Cabeçalhos de política de segurança de conteúdo
A Content-Security-Policy oferece segurança adicional ao restringir como e onde o conteúdo pode ser carregado em seu site. Este artigo de referência aborda quais cabeçalhos de política de segurança de conteúdo são necessários com o Web SDK.
Este artigo é destinado a desenvolvedores que trabalham em sites que aplicam regras de CSP e se integram à Braze. Não se trata de um conselho sobre como você deve abordar a segurança.
Este guia usa exemplos de código do SDK da Braze para Web 4.0.0+. Para fazer upgrade para a versão mais recente do SDK para Web, consulte o Guia de atualização do SDK.
Atributos de nonce
Se você usar um valor nonce nas diretivas script-src ou style-src, passe esse valor para a opção de inicialização contentSecurityNonce para propagá-lo para scripts e estilos recém-criados gerados pelo SDK:
1
2
3
4
5
6
import * as braze from "@braze/web-sdk";
braze.initialize(apiKey, {
baseUrl: baseUrl,
contentSecurityNonce: "YOUR-NONCE-HERE", // assumes a "nonce-YOUR-NONCE-HERE" CSP value
});
Diretivas
connect-src
Sua URL deve corresponder ao endpoint de SDK da API da sua opção de inicialização baseUrl escolhida.
| URL | Informações |
|---|---|
connect-src https://sdk.iad-01.braze.com |
Permite que o SDK se comunique com as APIs da Braze. Altere essa URL para corresponder ao endpoint de SDK da API da sua opção de inicialização baseUrl escolhida. |
script-src
| URL | Informações |
|---|---|
script-src https://js.appboycdn.com |
Obrigatória ao usar a integração hospedada por CDN. |
script-src 'unsafe-eval' |
Obrigatória ao usar o snippet de integração que contém referência a appboyQueue. Para evitar o uso dessa diretiva, integre o SDK usando o NPM. |
script-src 'nonce-...'ou script-src 'unsafe-inline' |
Obrigatória para determinadas mensagens no app, como HTML personalizado. |
img-src
| URL | Informações |
|---|---|
img-src: appboy-images.com braze-images.com cdn.braze.eu |
Obrigatória ao usar imagens hospedadas pelo CDN da Braze. Os nomes de host podem variar de acordo com o cluster do dashboard. Importante: Se você estiver usando fontes personalizadas, também será necessário incluir font-src. |
Font Awesome
Para desativar a inclusão automática do Font Awesome, use a opção de inicialização doNotLoadFontAwesome:
1
2
3
4
5
6
import * as braze from "@braze/web-sdk";
braze.initialize(apiKey, {
baseUrl: baseUrl,
doNotLoadFontAwesome: true,
});
Se você optar por usar o Font Awesome, as seguintes diretivas de CSP serão obrigatórias:
font-src https://use.fontawesome.comstyle-src https://use.fontawesome.comstyle-src 'nonce-...'oustyle-src 'unsafe-inline'