La Política de Seguridad de Contenidos (CSP) es un mecanismo de seguridad para navegadores que controla qué fuentes externas — scripts, fuentes, hojas de estilo y conexiones API — pueden cargar en tu página web. Si tu sitio tiene un CSP existente y estás incrustando el widget de Document360, debes añadir las URLs de origen confiables del widget a tu política. Sin estas adiciones, el navegador bloqueará los recursos de los widgets, causando síntomas como barras de desplazamiento ausentes, fuentes bloqueadas, fallidas llamadas a la API o errores de violación de CSP en la consola del navegador.
Antes de que empieces
- Confirma si tu base de conocimiento está alojada en la región de EE. UU . o en la de la UE : las URLs de origen confiable varían entre regiones.
- Asegúrate de tener acceso al HTML de tu sitio o a la configuración del servidor para editar el encabezado o
<meta>laContent-Security-Policyetiqueta. - Identifica la variable nonce que ya está disponible en tu sistema. Tendrás que reemplazar
"document360Nonce"en los ejemplos de código por este valor.
Cómo añadir fuentes CSP confiables para el widget de Document360
Actualiza tu Política de Seguridad de Contenidos
Añade las siguientes fuentes a tus connect-src, script-src-elem, font-src, y style-src-elem directivas.
Para usuarios estadounidenses
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="
connect-src
https://2ql92r65q8-dsn.algolia.net/
https://apihub.us.document360.io/
https://api.us.document360.io/
https://gateway.us.document360.io
https://*.algolianet.com
https://js.monitor.azure.com;
script-src-elem
'nonce-document360Nonce'
https://cdn.us.document360.io
https://*.algolianet.com
https://cdn.jsdelivr.net
https://cdnjs.cloudflare.com
https://floik.com/exe/
*.floik.com;
font-src
https://fonts.gstatic.com
https://cdn.us.document360.io;
style-src-elem
'unsafe-inline'
'unsafe-eval'
https://cdn.us.document360.io/
https://cdn.jsdelivr.net
https://fonts.googleapis.com;">
</head>
</html>
Sustituye "document360Nonce" por la variable nonce que ya está disponible en tu sistema.
Para usuarios de la UE
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="
connect-src
https://jx9o5re9su-dsn.algolia.net
https://apihub.document360.io/
https://api.document360.io/
https://gateway.document360.io
https://*.algolianet.com
https://js.monitor.azure.com;
script-src-elem
'nonce-document360Nonce'
https://cdn.document360.io
https://*.algolianet.com
https://cdn.jsdelivr.net
https://cdnjs.cloudflare.com
https://floik.com/exe/
*.floik.com;
font-src
https://fonts.gstatic.com
https://cdn.document360.io;
style-src-elem
'unsafe-inline'
'unsafe-eval'
https://cdn.document360.io/
https://cdn.jsdelivr.net
https://fonts.googleapis.com;">
</head>
</html>
Sustituye "document360Nonce" por la variable nonce que ya está disponible en tu sistema.
La URL del host de Algolia en connect-src es específica del entorno. Si no estás seguro del anfitrión exacto para tu entorno, usa el comodín https://*.algolia.net en tu connect-src directiva en su lugar. Esto cubre todos los entornos Algolia y previene errores CSP causados por nombres de host desajustados.
Actualiza la configuración de tu widget
- Ve a Conexiones () > al widget de la base de conocimientos en la barra lateral de navegación izquierda de tu portal de base de conocimientos.
- Selecciona el widget requerido y haz clic en Editar ().
- En la pestaña Configurar y conectar , expande el acordeón JavaScript de widgets bajo el grupo Conexión .
- Actualiza tu script widget con el parámetro nonce como se muestra a continuación.
Para clientes estadounidenses
<!-- Document360 knowledge base assistant start -->
<script nonce="document360Nonce">
(function (w,d,s,o,f,js,fjs) {
w['JS-Widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(panel, document, 'script', 'mw', './widget.js'));
mw('init', { nonce:'document360Nonce',apiKey: 'YOUR_API_KEY' });
//var jQuery_2_2_4 = $.noConflict(true);
</script>
<!-- Document360 knowledge base assistant end -->
Para clientes de la UE
<!-- Document360 knowledge base assistant start -->
<script nonce="document360Nonce">
(function (w,d,s,o,f,js,fjs) {
w['JS-Widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(panel, document, 'script', 'mw', './widget.js'));
mw('init', { nonce:'document360Nonce',apiKey: 'YOUR_API_KEY' });
//var jQuery_2_2_4 = $.noConflict(true);
</script>
<!-- Document360 knowledge base assistant end -->
Sustituye "document360Nonce" por la variable nonce que ya está disponible en tu sistema. El widget ahora está configurado para operar de forma segura dentro de tu entorno CSP.
Preguntas frecuentes
¿Por qué la barra de desplazamiento no aparece en el widget de la Base de Conocimiento?
Esto suele ser causado por una regla CSP que bloquea el dominio del widget. Si tu dominio no está permitido en tu CSP, puede impedir que la funcionalidad de desplazamiento funcione correctamente. Añade la URL del dominio al CSP de tu aplicación para resolver esto.
¿Necesito añadir fuentes CSP si no uso un nonce?
Sí. CSP fuentes para connect-src, font-src, y style-src-elem son necesarias independientemente de si usas un nonce. El nonce es necesario específicamente para script-src-elem permitir que el script del widget se ejecute. Sin el nonce, puede que necesites usar 'unsafe-inline' para scripts, lo cual no es recomendable.
¿Cuál es la diferencia entre las configuraciones CSP de EE. UU. y la de la UE?
Las configuraciones de EE. UU. y UE difieren en los dominios de endpoint CDN y API. Los usuarios estadounidenses apuntan a cdn.us.document360.io y api.us.document360.io, mientras que los usuarios de la UE usan cdn.document360.io y api.document360.io. Usar las URLs de la región incorrecta resultará en recursos bloqueados y un widget no funcional.