Si no estás familiarizado con la Política de Seguridad del Contenido (CSP), un buen punto de partida es Introducción a la Política de Seguridad del Contenido. Ese documento abarca la visión más amplia de la plataforma web de CSP. La CSP de apps de Chrome no es tan flexible.
La CSP es una política para mitigar los problemas de secuencias de comandos entre sitios, y todos sabemos que esta acción es mala. No intentaremos convencerlos de que la CSP es una nueva política confusa. Requiere trabajo; tendrás que aprender a realizar tareas fundamentales de manera diferente.
El propósito de este documento es explicarte exactamente cuál es la política de CSP para las apps de Chrome, qué debes hacer para cumplir con ella y cómo puedes realizar esas tareas fundamentales de una manera que cumpla con la CSP.
¿Qué es la CSP de las Apps de Chrome?
La política de seguridad del contenido para las Apps de Chrome te restringe hacer lo siguiente:
- No puedes usar secuencias de comandos intercaladas en las páginas de la app de Chrome. La restricción impide los bloques de
<script>y los controladores de eventos (<button onclick="...">). - No puedes hacer referencia a ningún recurso externo en ningún archivo de tu app (excepto los recursos de audio y video). No puedes incorporar recursos externos en un iframe.
- No puedes usar métodos de string a JavaScript como
eval()ynew Function().
Esto se implementa a través del siguiente valor de la política:
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' data: 'unsafe-inline';
img-src 'self' data:;
frame-src 'self' data:;
font-src 'self' data:;
media-src * data: blob: filesystem:;
Tu app de Chrome solo puede hacer referencia a secuencias de comandos y objetos dentro de ella, a excepción de los archivos multimedia (las apps pueden hacer referencia a video y audio fuera del paquete). Las extensiones de Chrome te permitirán flexibilizar la Política de Seguridad del Contenido predeterminada, mientras que las Apps de Chrome no.
Cómo cumplir con la CSP
Todo JavaScript y todos los recursos deben ser locales (todo se empaqueta en tu app de Chrome).
"Pero entonces, ¿cómo puedo..."
Es muy posible que uses bibliotecas de plantillas y muchas de estas no funcionarán con CSP. Es posible que también quieras acceder a recursos externos en tu app (imágenes externas o contenido de sitios web).
Usa bibliotecas de plantillas
Usa una biblioteca que ofrezca plantillas precompiladas. Eso es todo. Puedes usar una biblioteca que no ofrezca compilación previa, pero requerirá trabajo de tu parte, y hay restricciones.
Deberás usar una zona de pruebas para aislar el contenido con el que quieras realizar tareas de evaluación. La zona de pruebas aumenta la CSP del contenido que especificas. Si deseas usar las APIs de Chrome potentes en tu app de Chrome, el contenido de la zona de pruebas no puede interactuar directamente con estas APIs (consulta Contenido local de la zona de pruebas).
Cómo acceder a recursos remotos
Puedes recuperar recursos remotos mediante XMLHttpRequest y entregarlos a través de URLs blob:, data: o
filesystem: (consulta Haz referencia a recursos externos).
Se pueden cargar videos y audio desde servicios remotos porque tienen un buen comportamiento de resguardo cuando no tienen conexión o tienen una conectividad irregular.
Incorporar contenido web
En lugar de usar un iframe, puedes llamar a una URL externa mediante una etiqueta de WebView (consulta Cómo incorporar páginas web externas).