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

.eslintignore

@@ -3,3 +3,4 @@
 !/test/client
 coverage
 node_modules
+examples/client/trusted-types-overlay/app.js

.prettierignore

@@ -3,3 +3,4 @@
 coverage
 node_modules
 CHANGELOG.md
+examples/client/trusted-types-overlay/app.js

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);
 

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
+(

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",