CSP in development

[denis-sokolov]

I have a CSP Meta tag in my HTML:

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

In development mode, plugin-react-refresh adds inline scripts to my HTML, that trigger the CSP and prevent the scripts from loading. I assume more development mode plugins can manipulate HTML and add scripts.

I am currently using a workaround with a tiny plugin of my own:

module.exports = function () {
  return {
    name: "development-server allow inline script",
    async transform({ contents, isDev, fileExt }) {
      if (!isDev || fileExt !== ".html") return contents;
      return contents.replace(/\bscript-src\b/g, "script-src 'unsafe-inline'");
    },
  };
};

Perhaps automatically adding unsafe-inline in development mode to a CSP Meta tag could be a good idea?

Alternatively, it would be convenient to get HTML conditionals based on %MODE%:

{% ifProduction %}
    <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'self'">
{% endIfProduction %}

[FredKSchott]

Oh interesting! I like the idea of better templating support...

[denis-sokolov]

This is present in the latest 3.0.11.

[slashwhatever]

This is present in the latest 3.0.11.

Any chance you can elaborate on this please? I'm in the process of evaluating whether I can replace an existing webpack setup that uses a CSP plugin with snowpack and don't yet know how to implement this.