Trusted Types in overlay.js issue with innerHTML inside div from iframe

[Rendez]

Bug report

Trusted Types in overlay.js issue with innerHTML inside div from iframe.

Caused by setting HTTP Header Content-Security-Policy require-trusted-types-for 'script'

Actual Behavior

iframeContainerElement.onload = function () {
      var contentElement = /** @type {Document} */
      /** @type {HTMLIFrameElement} */
      iframeContainerElement.contentDocument.createElement("div");
      containerElement = iframeContainerElement.contentDocument.createElement("div");
     // ^^^ we assign a div created inside the iframe to `containerElement`
[...]

Which we then later try to set innerHTML = "" to:

function ensureOverlayExists(callback, trustedTypesPolicyName) {
    if (containerElement) {
      containerElement.innerHTML = ""; // <----
      // Everything is ready, call the callback right away.
      callback(containerElement);
      return;
    }

Unfortunately setting a 'default' policy in the main frame doesn't work because this containerElement is a different window frame (iframe).

Expected Behavior

Should not violate the CSP rule.

Potential Fix

containerElement.innerHTML = overlayTrustedTypesPolicy ? overlayTrustedTypesPolicy.createHTML("") : ""

How Do We Reproduce?

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 110.19 MB / 16.00 GB
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Safari: 16.5.2
  Packages:
    webpack: ^5.76.1 => 5.86.0

[alexander-akait]

Thank you for your issue, it is the known issue, close #4966, we will fix it soon, sorry for delay, also you can send a PR and help us, thank you