feat: support Trusted Types for client overlay #4404

Siegrift · 2022-04-24T19:37:01Z

For Bugs and Features; did you add new tests?

Yes. LMK if more are needed.

Motivation / Use-Case

Addresses #4400

Breaking Changes

No breaking changes.

This change is noop for applications which do not enforce Trusted Types. Applications which do enforce Trusted Types and use webpack-dev-server can now whitelist webpack-dev-server#overlay policy to make error overlay work. Optionally, users can choose a different name via policyName attribute (but maybe this could change to more verbose trustedTypesPolicyName?).

Additional Info

See #4400

linux-foundation-easycla · 2022-04-24T19:37:05Z

The committers listed above are authorized under a signed CLA.

✅ login: Siegrift / name: Emanuel Tesař (fc7962a)

alexander-akait · 2022-04-24T19:41:59Z

Thanks for PR, can you accept CLA?

Siegrift · 2022-04-24T19:37:43Z

client-src/index.js

@@ -15,7 +15,7 @@ import createSocketURL from "./utils/createSocketURL.js";
 * @property {boolean} hot
 * @property {boolean} liveReload
 * @property {boolean} progress
- * @property {boolean | { warnings?: boolean, errors?: boolean }} overlay
+ * @property {boolean | { warnings?: boolean, errors?: boolean, policyName?: string }} overlay


I am wondering whether the policyName should be renamed to more verbose trustedTypesPolicyName. WDYT?

I don't think we will have the policyName option here, but I think make sense to rename it to trustedTypesPolicyName, to avoid misleading

Fixed in c63489b

Siegrift · 2022-04-24T19:38:54Z

client-src/overlay.js

@@ -23,10 +23,26 @@ let iframeContainerElement;
 let containerElement;
 /** @type {Array<(element: HTMLDivElement) => void>} */
 let onLoadQueue = [];
+/** @type {any} */


There are TS type definitions located in https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/trusted-types

However, I am not sure if it is worth typing so I've added any for now.

I think we need install them in dev depedencies, because when types is not found it is any

Fixed 68d3974

Siegrift · 2022-04-24T19:43:53Z

client-src/overlay.js

+ */
+function createContainer(policyName) {
+  // Enable Trusted Types if they are available in the current browser.
+  if (window.trustedTypes) {


We could optionally check whether the policyName is not null. However, I think using trustedTypes whenever they are available is better because:

It is still noop and backwards compatible change for applications which do not enforce Trusted Types

This enables Trusted Types integration without the need to change anything in webpack configuration (which can be hidden, such as in CRA). This means that the only change the application needs to do is whitelist the default policy name.

Siegrift · 2022-04-24T19:46:15Z

types/lib/Server.d.ts

@@ -1610,6 +1610,10 @@ declare class Server {
                    negatedDescription: string;
                  };
                };
+                policyName: {


I am not sure why there are so many unrelated changes in this autogenerated d.ts file. Especially, since I've added just one field.

Please, LMK if I have something wrong in my setup.

It is bug in ts, ignore it

Siegrift · 2022-04-24T19:53:19Z

I also see that there needs to be a documentation update in https://webpack.js.org/configuration/dev-server/#overlay, specifically this file https://github.com/1ilsang/webpack.js.org/blob/master/src/content/configuration/dev-server.mdx#overlay

I guess that is only updated after there is a new release?

Also, please LMK if there are is anything in this PR I've missed :)

alexander-akait · 2022-04-24T20:46:07Z

I also see that there needs to be a documentation update in https://webpack.js.org/configuration/dev-server/#overlay, specifically this file https://github.com/1ilsang/webpack.js.org/blob/master/src/content/configuration/dev-server.mdx#overlay

We will open issue in our docs after merge, dont worry

I guess that is only updated after there is a new release?

Yes, I will do release

koto · 2022-04-25T07:07:52Z

examples/client/trusted-types-overlay/README.md

+  devServer: {
+    client: {
+      overlay: {
+        policyName: "overlay-policy",


Consider using webpack#dev-overlay or something like this to feature the recommended naming scheme.

Fixed in 8ef1a48

alexander-akait · 2022-04-28T19:45:02Z

@Siegrift frinedly ping

Siegrift · 2022-04-28T19:49:02Z

Sorry, I got a bit busy with work stuff this week. I'll hopefully find some time tomorrow or over the weekend.

Thanks for the ping :)

alexander-akait · 2022-04-28T19:57:38Z

Bih thanks, feel free to ping me

Siegrift · 2022-05-01T20:23:08Z

client-src/overlay.js

+function createContainer(trustedTypesPolicyName) {
+  // Enable Trusted Types if they are available in the current browser.
+  if (window.trustedTypes) {
+    overlayTrustedTypesPolicy = window.trustedTypes.createPolicy(


In case there is an error creating a Trusted Types policy the overlay is not shown at all.

A different approach would be to capture the exception outside this function (same place we define overlayTrustedTypesPolicy) and show an overlay without using innerHTML showing that the policy creation failed.

However I think having an error in the console is sufficient, since this is a development only feature so we can assume the console is opened anyways.

Siegrift · 2022-05-01T20:29:35Z

I've fixed the comments and rebased on current master and left one more comment.

alexander-akait · 2022-05-02T20:52:59Z

@Siegrift Hello, sorry for delay, can you update snapshots?

Siegrift · 2022-05-03T12:32:00Z

Sorry for not running the tests locally first :/
However, there seem to be some changed snapshots which are unrelated to my feature. I am not sure about that.

snitin315 · 2022-05-04T04:54:26Z

@Siegrift help output changed because you added client-overlay-trusted-types-policy-name CLI flag, hence need to update the snapshot.

Siegrift · 2022-05-04T05:32:57Z

Thanks, I am having problems passing the tests locally. When I run yarn test:only --updateSnapshot most of the tests pass, but there are sometimes a few unrelated changes (I've reverted those manually). When I try to run the tests now, they seem to remove the basic should output help should generate correct cli flags 1 in webpack5 snapshot which is wrong.

Is there something I am doing wrong?

snitin315 · 2022-05-04T08:07:25Z

Are you using macOS?

Siegrift · 2022-05-04T08:08:27Z

Yes, the m1 chip.

snitin315 · 2022-05-04T08:29:22Z

Yeah, help output snapshots are not quite well on macOS, known bug in nodejs it strips the actual output on stdout.

Siegrift · 2022-05-04T09:09:59Z

I'll try to fix the tests on my Linux machine later today. I don't think I'll get anywhere by testing this on macOS :D

alexander-akait · 2022-05-04T12:53:52Z

I want to merge it and fix tests in the next PR, because we need to do release today due security problems in portfinder, big thanks for PR

Siegrift · 2022-05-04T13:20:49Z

No problem, sorry for taking it too long :/

Good luck with the release.

Siegrift requested review from alexander-akait, hiroppy, knagaitsev, snitin315 and anshumanv as code owners April 24, 2022 19:37

Siegrift commented Apr 24, 2022

View reviewed changes

Siegrift force-pushed the add-tt-support branch from 05c2242 to fc7962a Compare April 24, 2022 19:46

koto reviewed Apr 25, 2022

View reviewed changes

koto previously approved these changes Apr 25, 2022

View reviewed changes

alexander-akait mentioned this pull request Apr 27, 2022

AWS Inspector Vulnerability Scan | async, minimist, portfinder #4398

Closed

Siegrift dismissed koto’s stale review via 8ef1a48 May 1, 2022 20:13

Siegrift commented May 1, 2022

View reviewed changes

Siegrift force-pushed the add-tt-support branch from 8ef1a48 to 6474879 Compare May 1, 2022 20:25

Siegrift force-pushed the add-tt-support branch 2 times, most recently from 26d875c to d8da5ca Compare May 3, 2022 12:30

Siegrift force-pushed the add-tt-support branch from 6465d5a to aa2554b Compare May 3, 2022 20:17

Siegrift added 4 commits May 3, 2022 22:34

feat: support Trusted Types for client overlay

7db36ec

Rename policyName to trustedTypesPolicyName

55a2805

Add Trusted Types typings

efa9248

Change default TT policy name

57cd5a6

Siegrift added 4 commits May 3, 2022 22:34

Update snapshots

b2fb287

Fix webpack policy name configuration

eb652fa

Update snapshots to make the tests pass

e12147e

Update snapshots to make the test pass

acca22a

Siegrift force-pushed the add-tt-support branch from aa2554b to acca22a Compare May 3, 2022 20:34

Update failed snapshot and README

8a9754e

alexander-akait merged commit 8132e1d into webpack:master May 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support Trusted Types for client overlay #4404

feat: support Trusted Types for client overlay #4404

Siegrift commented Apr 24, 2022

linux-foundation-easycla bot commented Apr 24, 2022 •

edited

alexander-akait commented Apr 24, 2022

Siegrift Apr 24, 2022

alexander-akait Apr 24, 2022

Siegrift May 1, 2022

Siegrift Apr 24, 2022

alexander-akait Apr 24, 2022

Siegrift May 1, 2022

Siegrift Apr 24, 2022

Siegrift Apr 24, 2022

alexander-akait Apr 24, 2022

Siegrift commented Apr 24, 2022

alexander-akait commented Apr 24, 2022

koto Apr 25, 2022

Siegrift May 1, 2022

alexander-akait commented Apr 28, 2022

Siegrift commented Apr 28, 2022

alexander-akait commented Apr 28, 2022

Siegrift May 1, 2022

Siegrift commented May 1, 2022

alexander-akait commented May 2, 2022

Siegrift commented May 3, 2022

snitin315 commented May 4, 2022

Siegrift commented May 4, 2022

snitin315 commented May 4, 2022

Siegrift commented May 4, 2022

snitin315 commented May 4, 2022

Siegrift commented May 4, 2022

alexander-akait commented May 4, 2022

Siegrift commented May 4, 2022

feat: support Trusted Types for client overlay #4404

feat: support Trusted Types for client overlay #4404

Conversation

Siegrift commented Apr 24, 2022

For Bugs and Features; did you add new tests?

Motivation / Use-Case

Breaking Changes

Additional Info

linux-foundation-easycla bot commented Apr 24, 2022 • edited

alexander-akait commented Apr 24, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Siegrift commented Apr 24, 2022

alexander-akait commented Apr 24, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexander-akait commented Apr 28, 2022

Siegrift commented Apr 28, 2022

alexander-akait commented Apr 28, 2022

Choose a reason for hiding this comment

Siegrift commented May 1, 2022

alexander-akait commented May 2, 2022

Siegrift commented May 3, 2022

snitin315 commented May 4, 2022

Siegrift commented May 4, 2022

snitin315 commented May 4, 2022

Siegrift commented May 4, 2022

snitin315 commented May 4, 2022

Siegrift commented May 4, 2022

alexander-akait commented May 4, 2022

Siegrift commented May 4, 2022

linux-foundation-easycla bot commented Apr 24, 2022 •

edited