Reaja CRA com CSP: Recusou-se a executar script inline
Eu configurei um novo site usando o Material UI Create React Template .
Eu adicionei uma Política de Segurança de Conteúdo, construída e implantada com sucesso, porém a página não é exibida no navegador e recebo o seguinte erro:
Recusou-se a executar o script embutido porque viola a seguinte diretiva da Política de Segurança de Conteúdo: "script-src 'self'". Tanto a palavra-chave 'inseguro-embutido', um hash ('sha256-mB4hl8euSw00eXDUIRf8KeqpMfBXgg0FILGScPTo + n0 ='), ou um nonce ('nonce -...') é necessário para habilitar a execução embutida.
Não tenho nenhum script embutido.
Quando adiciono o hash especificado à minha Política de Segurança de Conteúdo, o site funciona, mas se eu implantar novamente, o hash muda e preciso atualizar minha Política de Segurança de Conteúdo com o novo hash.
De onde vem o hash e é possível evitar a necessidade de atualizar o hash manualmente todas as vezes durante a implantação?
Respostas
Obrigado pela vossa ajuda até agora. Eu encontrei a resposta para o problema, então vou compartilhá-la na esperança de que ajude outra pessoa.
De acordo com a seção Configuração avançada nos documentos Criar aplicativo React:
Por padrão, Create React App irá incorporar o script de tempo de execução em index.html durante a construção de produção.
Esta parece ser a fonte dos scripts construídos dinamicamente.
Os documentos vão além para sugerir que o INLINE_RUNTIME_CHUNK=falsesinalizador deve ser incluído em um .envarquivo para evitar a incorporação de scripts.
Incluindo o INLINE_RUNTIME_CHUNK=falsesinalizador em um .envarquivo, reconstruindo e implantando, consegui resolver o problema.
Googletagmanager adiciona scripts embutidos à sua página. Você não poderá aplicar um script-src estrito (sem inseguro-in-line) com googletagmanager, a menos que configure isso da seguinte maneira:https://developers.google.com/tag-manager/web/csp
Também pode haver outros scripts construídos dinamicamente que você também precisará manipular.