Different behavior with CSP and HTML imports

[lmuntaner]

Hi,

I found a different behavior in how Chrome, Safari and Firefox interact with HTML Modules and CSP.

Maybe someone can help me better understand it.

We had an inline script importing a module:

<script type="module">
  import start from './start.js';
  start();
</script>

We used sha256 hashing for our CSP tag:

<meta http-equiv="Content-Security-Policy" content="
  script-src 'unsafe-eval' 'unsafe-inline' https: 'strict-dynamic' 'sha256-GD2MyhNzRFjmxD4jAUnvYIt90C1er46lTotfFdaZ3lg='
">

I found three different behaviors:

Safari:

It works.

Chrome:

Refused to load the script 'http://127.0.0.1:8080/start.js' because it violates the following Content Security Policy directive

Yet, if we preload the module start.js it works:

<link rel="modulepreload" href="./start.js">

Firefox:

It doesn't work in any case.

We had to do a workaround:

We moved the inline script to a file:

// main.js
import start from './start.js';
start();

Then we loaded it dynamically in the html:

<script>
   const loader = document.createElement("script");
  loader.type = "module";
  loader.src = "./main.js";
  document.head.appendChild(loader);
</script>

We had to change the sha256 of the CSP to the new inline script.

Any ideas of why this different behavior?

Thanks!!