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:
import * as braze from "@braze/web-sdk";
braze.initialize(apiKey, {
baseUrl: baseUrl,
contentSecurityNonce: "YOUR-NONCE-HERE", // assumes a "nonce-YOUR-NONCE-HERE" CSP value
});
A tag de inicialização da Braze para o Google Tag Manager (GTM) não oferece suporte a contentSecurityNonce no momento. Consulte Ambientes CSP restritivos (baseados em nonce) no guia do Google Tag Manager para uma solução alternativa usando uma tag Custom HTML.
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.com cdn.braze.eu |
Obrigatória ao usar imagens hospedadas pela rede de distribuição de conteúdo (CDN) da Braze. Inclua todos os quatro hostnames de CDN para garantir que as imagens sejam carregadas corretamente em todos os clusters do dashboard. Importante: Se você estiver usando fontes personalizadas, também será necessário incluir font-src. |
Hostnames de CDN
Adicione todos os hostnames a seguir à sua diretiva img-src:
appboy-images.combraze-images.comcdn.braze.comcdn.braze.eu
Font Awesome
Para desativar a inclusão automática do Font Awesome, use a opção de inicialização doNotLoadFontAwesome:
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'