CSP errors in production

[David Petrásek]

I use

{% block javascripts %}
    {{ vite_entry_script_tags('global', {attr: {nonce: csp_nonce}}) }}
{% endblock %}

and it works for all of my <script> tags. But when on production, the CSP blocks some of vite's own scripts. The error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'nonce-XktWXbolcLTNY5qxqQDvKOWbJj7vL5drDyBvdb3HMKU'". Either the 'unsafe-inline' keyword, a hash ('sha256-BoFUHKsYhJ9tbsHugtNQCmnkBbZ11pcW6kZguu+T+EU='), or a nonce ('nonce-...') is required to enable inline execution.

and these are the blocked scripts on the page:

<!-- DETECT_MODERN_BROWSER_CODE --><script type="module">try{import.meta.url;import("_").catch(()=>1);}catch(e){}window.__vite_is_modern_browser=true;</script>

   <!-- DYNAMIC_FALLBACK_INLINE_CODE --><script type="module">
       (function() {
           if (window.__vite_is_modern_browser) return;
           console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");
           var legacyPolyfill = document.getElementById("vite-legacy-polyfill")
           var script = document.createElement("script");
           script.src = legacyPolyfill.src;
           script.onload = function() {
               document.querySelectorAll("script.vite-legacy-entry").forEach(function(elt) {
                   System.import(elt.getAttribute("data-src"));
               });
           };
           document.body.appendChild(script);
       })();
   </script>

Not sure if this post should be moved here: https://github.com/vitejs/vite/issues

[Hugues Tavernier]

I think it's the good place for the issue...
is there any trouble if you disable your vite-legacy plugin ?

[David Petrásek]

I don't use that plugin, because in my vite.config.js I have:

 plugins: [
        /* react(), // if you're using React */
        symfonyPlugin(),
    ],

So, should I move this post to the main repo?

[Hugues Tavernier]

oh strange, can you give me more details:
your vite.config.js,
vite and vite-plugin-symfony and pentatrion/vite-bundle versions.

the issue come from here not from the main repo who calculated hashes for his code fragments (not me)
https://github.com/vitejs/vite/blob/49674b54fac4378faec8580b0a13e29e21d7900d/packages/plugin-legacy/src/index.ts#L806

[David Petrásek]

pentatrion/vite-bundle v3.1.2
vite-plugin-symfony@0.7.5
└── vite@4.1.1

vite.config.js

import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import fs from "fs";

/* if you're using React */
// import react from '@vitejs/plugin-react';

export default defineConfig( ({ command, mode }) => 
{
  const DIR_ASSETS_JS = './assets/js/';
  
  return 
{
    plugins: [
        /* react(), // if you're using React */
        symfonyPlugin(),
    ],
    build: 
    {
	    rollupOptions: 
	    {
	    	input: 
            {
                global: DIR_ASSETS_JS + 'global.js',                
                ... list of other inputs ...
            }
	    },
  	},
  	
    server: 
    {
        https: 
        {
        	key: fs.readFileSync('certs/vite_dev/vite.key.pem'),
        	cert: fs.readFileSync('certs/vite_dev/vite.crt.pem'),
        },
        cors: true
    }
}});

[Hugues Tavernier]

first there was a mistake because the inline scripts are used only with vite legacy plugin. with this patch your issue is solved if you don't use this plugin. after I will have to add nonce for this scripts.

can you confirm it's ok

[David Petrásek]

Yes, I confirm it is ok now. Thank you.