React CRA with CSP: Refused to execute script inline
Ho creato un nuovo sito web utilizzando il Material UI Create React Template .
Ho aggiunto una politica di sicurezza dei contenuti, creata con successo e distribuita, tuttavia la pagina non viene visualizzata nel browser e ricevo il seguente errore:
Rifiutato di eseguire lo script inline perché viola la seguente direttiva sui criteri di sicurezza dei contenuti: "script-src 'self'". Per abilitare l'esecuzione inline è necessaria la parola chiave 'unsafe-inline', un hash ('sha256-mB4hl8euSw00eXDUIRf8KeqpMfBXgg0FILGScPTo + n0 =') o un nonce ('nonce -...').
Non ho script in linea.
Quando aggiungo l'hash specificato alla mia politica di sicurezza dei contenuti, il sito web funziona, ma se eseguo nuovamente la distribuzione, l'hash cambia e devo aggiornare la mia politica di sicurezza dei contenuti con il nuovo hash.
Da dove proviene l'hash ed è possibile evitare di dover aggiornare l'hash manualmente ogni volta durante la distribuzione?
Risposte
Grazie per il tuo aiuto finora. Ho trovato la risposta al problema, quindi la condividerò nella speranza che aiuti qualcun altro.
Secondo la sezione Configurazione avanzata nei documenti Crea app React:
Per impostazione predefinita, Crea app React incorporerà lo script di runtime in index.html durante la compilazione di produzione.
Questa sembra essere la fonte degli script costruiti dinamicamente.
I documenti vanno oltre per suggerire che il INLINE_RUNTIME_CHUNK=falseflag dovrebbe essere incluso in un .envfile per evitare l'incorporamento di script.
Includendo il INLINE_RUNTIME_CHUNK=falseflag in un .envfile, ricostruendo e distribuendo, sono stato in grado di risolvere il problema.
Googletagmanager aggiunge script inline alla tua pagina. Non sarai in grado di applicare uno script-src rigoroso (senza unsafe-inline) con googletagmanager a meno che non lo imposti come segue:https://developers.google.com/tag-manager/web/csp
Potrebbero esserci anche altri script creati dinamicamente che dovrai gestire.