using Element.setHTML to get around the Trusted HTML CSP restriction

setHTML.js

// 7 July 2023
// using setHTML to get around the Trusted HTML CSP restricted apps.

// Our HTML fragment text

var source = `
<section id="x-fragment">
<fake>&amp;& < &lt; title</fake>
<meta charset="UTF-8">
<script>alert(1);</script>
</section>
`;

try {
  // The following fails in Trusted HTML CSP restricted apps like Chrome's blank tab.
  var div = document.createElement("DIV");
  div.innerHTML = source;
} catch (e) {
  console.error(e);
  /*
    This document requires 'TrustedHTML' assignment.
    -------
    TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.
  */
}

// However we can use the following brain-dead polyfill to assign an HTML
// string to an element's innerHTML...

(function setHTML(unset) {
  if (unset) {
    return delete Element.prototype.setHTML
  }

  typeof Element.prototype.setHTML == 'function' || (
    Element.prototype.setHTML = function setHTML(innerHTML) {
      this.innerHTML = innerHTML;
    }
  );
}).call(0, 0);

/* test it out */

var div = document.createElement("div");
div.setHTML(source);
document.body.appendChild(div);
console.log(div.innerHTML);

// Some surprising differences as of 8 July 2023!

// firefox removes unknown tags, the meta tag, and the script tag

/*
<section id="x-fragment">
&amp;&amp; &lt; &lt; title


</section>
*/

// chrome removes unknown elements and their content, and the script tag

/*
<section id="x-fragment">

<meta charset="UTF-8">

</section>
 */