Cabeceras de la política de seguridad de contenidos
Content-Security-Policy proporciona seguridad añadida al restringir cómo y dónde se puede cargar contenido en tu sitio web. Este artículo de referencia cubre qué encabezados de políticas de seguridad de contenidos son necesarios con el SDK Web.
Este artículo está dirigido a los desarrolladores que trabajan en sitios web que aplican reglas CSP y se integran con Braze. No pretende ser un consejo sobre cómo debes enfocar la seguridad.
Esta guía utiliza ejemplos de código del SDK Web de Braze 4.0.0+. Para actualizar a la última versión del SDK Web, consulta la Guía de actualización del SDK.
Atributos nonce
Si utilizas un valor nonce en tus directivas script-src o style-src, pasa ese valor a la opción de inicialización contentSecurityNonce para propagarlo a los scripts y estilos recién creados generados por el 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
});
Directivas
connect-src
Tu URL debe coincidir con el punto final de SDK de la API de la opción de inicialización baseUrl que hayas elegido.
| URL | Información |
|---|---|
connect-src https://sdk.iad-01.braze.com |
Permite al SDK comunicarse con las API de Braze. Cambia esta URL para que coincida con el punto final de SDK de la API de la opción de inicialización baseUrl que hayas elegido. |
script-src
| URL | Información |
|---|---|
script-src https://js.appboycdn.com |
Obligatoria cuando se utiliza la integración alojada en CDN. |
script-src 'unsafe-eval' |
Obligatoria cuando se utiliza el fragmento de código de integración que contiene la referencia a appboyQueue. Para evitar el uso de esta directiva, integra el SDK utilizando NPM. |
script-src 'nonce-...'o script-src 'unsafe-inline' |
Obligatoria para determinados mensajes dentro de la aplicación, como HTML personalizado. |
img-src
| URL | Información |
|---|---|
img-src: appboy-images.com braze-images.com cdn.braze.eu |
Obligatoria cuando se utilizan imágenes alojadas en el CDN de Braze. Los nombres de host pueden variar según el clúster del dashboard. Importante: Si utilizas fuentes personalizadas, también tienes que incluir font-src. |
Font Awesome
Para desactivar la inclusión automática de Font Awesome, utiliza la opción de inicialización doNotLoadFontAwesome:
1
2
3
4
5
6
import * as braze from "@braze/web-sdk";
braze.initialize(apiKey, {
baseUrl: baseUrl,
doNotLoadFontAwesome: true,
});
Si decides utilizar Font Awesome, se requieren las siguientes directivas CSP:
font-src https://use.fontawesome.comstyle-src https://use.fontawesome.comstyle-src 'nonce-...'ostyle-src 'unsafe-inline'