Preact-cli: Violation of CSP script-src / need for unsafe-inline

[raphaelbauer]

The default template.html uses an inline script tag to install polyfills. When a server delivers content security headers, then this will violate all "safe" choices for script-src configuration.

Or - in other words - this will need the server to send script-src unsafe-inline, which is, well. unsafe.

https://github.com/developit/preact-cli/blob/e910aa9c43850d032a3069f792e02441f84c9847/src/resources/template.html#L29

We just hit that with our application. Not sure how to proceed from here. We can of course use a custom template.html.

But I guess it would be much better to make the default template.html compatible with safe script-src choices - by default.

Would it be possible to bundle polyfill loading via a separate script? Any other ideas? Thanks!

[developit]

We used to inject the script from the main bundle, but it meant that initial render happened without the polyfills for Fetch and Promise applied, which breaks most applications.

There might be an opportunity here to leverage @kristoferbaxter's <script type="module"> + fallback technique as a cutting-the-mustard test (further info on the technique).

[raphaelbauer]

Thanks for the response! I am not a big pro in webpack and how to make the script nomodule / type=module thing work easily. I get what the idea is, but I have no idea how to rewrite the template then...

Our simple "solution" was to have a custom template which does not load the polyfills via unsafe-src. We don't support old browsers anyway, so that's a non-issue.

[developit]

Sounds good! We're going to be making custom templates easier in the next major update.