Error de Content Security Policy (CSP) en la consola
¿Qué significa Content Security Policy (CSP)?
Los sitios web pueden configurar una Content Security Policy (CSP) ya sea estableciendo la cabecera de respuesta HTTP Content-Security-Policy o usando una etiqueta meta con el atributo http-equiv="Content-Security-Policy" en el HTML.
En lugar de confiar automáticamente en todo el contenido del servidor, la CSP determina qué fuentes se consideran seguras. El navegador entonces solo ejecuta scripts, estilos u otros recursos que provienen de estas fuentes de confianza.
Cómo reconocer el error
Necesitas actualizar tu CSP para usar Varify.io si:
- Ves un error como este en la consola de tu navegador:
- This page uses security features that are incompatible with the varify.io editor.
- Ves un error como este en las Google Developer Tools:
- Refused to execute editor.varify.io because it violates the following Content Security Policy directive...
- Ves un error como este:
- Content Security Policy of your site blocks the use of 'eval' in JavaScript.
Cómo solucionar el error
Si tu sitio web usa una Content Security Policy (CSP), introduce los siguientes valores:
- https://app.varify.io
- https://editor.varify.io
- https://ip.varify.dev (solo es necesario si se utiliza el servicio de IP para geotargeting)
- https://ai-proxy.varify.io (solo es necesario si se utilizan servicios de IA en el editor)
También necesitas el valor unsafe-eval en la directiva script-src.
Para que el Responsive Device Switcher funcione, tu dominio también debe especificarse en las directivas frame-ancestors y frame-src.
Ejemplo de una CSP adecuada:
Content-Security-Policy: frame-ancestors {YOUR_DOMAIN}; frame-src {YOUR_DOMAIN} https://editor.varify.io; script-src 'unsafe-eval' https://app.varify.io https://editor.varify.io; connect-src https://ip.varify.dev
Nota: La entrada unsafe-eval es necesaria para que el JavaScript definido por el usuario pueda ejecutarse dentro de las variaciones.