fix: overlay and require-trusted-types-for (#5046)

webpack · Feb 13, 2024 · e115436 · e115436
1 parent 7681477
commit e115436
Show file tree

Hide file tree

Showing 8 changed files with 475 additions and 2,521 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,3 +3,4 @@
 !/test/client
 coverage
 node_modules
+examples/client/trusted-types-overlay/app.js
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,4 @@
 coverage
 node_modules
 CHANGELOG.md
+examples/client/trusted-types-overlay/app.js
diff --git a/client-src/overlay.js b/client-src/overlay.js
@@ -189,7 +189,9 @@ const createOverlay = (options) => {
    */
   function ensureOverlayExists(callback, trustedTypesPolicyName) {
     if (containerElement) {
-      containerElement.innerHTML = "";
+      containerElement.innerHTML = overlayTrustedTypesPolicy
+        ? overlayTrustedTypesPolicy.createHTML("")
+        : "";
       // Everything is ready, call the callback right away.
       callback(containerElement);
 

diff --git a/examples/client/trusted-types-overlay/app.js b/examples/client/trusted-types-overlay/app.js
@@ -4,3 +4,6 @@ const target = document.querySelector("#target");
 
 target.classList.add("pass");
 target.textContent = "Success!";
+
+// To display an overlay with an error
+(
diff --git a/examples/client/trusted-types-overlay/webpack.config.js b/examples/client/trusted-types-overlay/webpack.config.js
@@ -9,11 +9,14 @@ const { setup } = require("../../util");
 const config = setup({
   context: __dirname,
   // create error for overlay
-  entry: "./invalid.js",
+  entry: "./app.js",
   output: {
     trustedTypes: { policyName: "webpack" },
   },
   devServer: {
+    headers: {
+      "Content-Security-Policy": "require-trusted-types-for 'script'",
+    },
     client: {
       overlay: {
         trustedTypesPolicyName: "webpack#dev-overlay",