Sweetalert: Compatibilidade da política de segurança de conteúdo

Você precisa atualizar o valor Content-Security-Policy para acomodar a diretiva style-src que deve conter 'unsafe-inline' (cuidado com aspas) para executar os estilos inline injetados.

Definitivamente, não é ideal forçar os desenvolvedores a usar a política unsafe-inline para CSS. Talvez devêssemos encontrar uma maneira melhor de lidar com isso.

Uma maneira é não importar o arquivo css dentro do seu código e torná-lo disponível como um arquivo separado que pode ser importado dentro do código do desenvolvedor. algo como
import 'sweetalert/sweetalert.css
Desta forma, seria responsabilidade do desenvolvedor garantir que não viole o CSP

Não tem (quase) nada a ver com a localização do arquivo CSS (contanto que o CSS resida no mesmo domínio). Sweetalert _injects_ CSS inline , que qualquer CSP que valha a pena não permitirá, a menos que haja um valor nonce / hash. Isso está me causando uma dor infinita esta manhã; Talvez eu tenha que desenlaçá-lo do meu projeto, o que é uma pena, porque eu realmente gosto (d) dele.

Houve alguma atualização sobre isso? Estou tendo o mesmo problema; apenas se perguntando qual é a melhor maneira de contornar isso?

A solução alternativa é adicionar os hashes ao seu cabeçalho Content-Security-Policy .

Algo como

style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-wTr/bct+DGhJCU0mVZOm9Z1v99oBZrIu4VCMYQJWdfI=';

Não é o ideal, mas é melhor do que unsafe-inline . O problema é que, se os arquivos forem alterados, os hashes não corresponderão mais e o navegador os rejeitará.

A situação ideal seria extrair o css em seu próprio arquivo e hospedá-lo em um CDN. Assim, podemos colocar o arquivo na lista branca.

Não tem (quase) nada a ver com a localização do arquivo CSS (contanto que o CSS resida no mesmo domínio). Sweetalert _injects_ CSS inline , que qualquer CSP que valha a pena não permitirá, a menos que haja um valor nonce / hash. Isso está me causando uma dor infinita esta manhã; Talvez eu tenha que desenlaçá-lo do meu projeto, o que é uma pena, porque eu realmente gosto (d) dele.

mesmo aqui.

Posso obter dois hashes de estilo inline em sweetalert.min.js no Chrome. Quando adicionado ao cabeçalho CSP, o Chrome não reclama mais.
Mas o Firefox e o Safari ainda reclamam e não consigo encontrar o hash adequado. Esses navegadores não fornecem dicas.
Firefox: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)
Safari: Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy.