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 ao Braze. Não se trata de um conselho sobre como você deve abordar a segurança.
This guide uses code samples from the Braze Web SDK 4.0.0+. To upgrade to the latest Web SDK version, see SDK Upgrade Guide.
Atribuições 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
});
Diretrizes
connect-src
URL | Informações |
---|---|
connect-src https://sdk.iad-01.braze.com |
Permite que o SDK se comunique com as APIs do Braze. Altere esse URL para corresponder ao endpoint de SDK da API para a opção de inicialização escolhida em baseUrl . |
script-src
URL | Informações |
---|---|
script-src https://js.appboycdn.com |
Necessário ao usar a integração hospedada por CDN. |
script-src 'unsafe-eval' |
Necessário ao usar o snippet de integração que contém referência a appboyQueue . Para evitar o uso dessa diretriz, integre o SDK usando o NPM. |
script-src 'nonce-...' ou script-src 'unsafe-inline' |
Necessário para determinadas mensagens no app, como HTML personalizado. |
img-src
URL | Informações |
---|---|
img-src: appboy-images.com braze-images.com cdn.braze.eu |
Necessário ao usar imagens hospedadas pelo Braze CDN. Os nomes de host podem variar de acordo com o cluster dashboard. Importante: Se estiver usando fontes personalizadas, também será necessário incluir font-src . |
Font Awesome
Para desativar a inclusão automática da 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 a Font Awesome, as seguintes diretivas do CSP serão necessárias:
font-src https://use.fontawesome.com
style-src https://use.fontawesome.com
style-src 'nonce-...'
oustyle-src 'unsafe-inline'