El modelo de seguridad de las Apps de Chrome no permite el contenido externo en los iframes ni el uso de contenido intercalado.
la secuencia de comandos y eval(). Puedes anular estas restricciones, pero tu contenido externo debe
aisladas de la app.
El contenido aislado no puede acceder directamente a los datos de la app ni a ninguna de las APIs. Usar origen cruzado XMLHttpRequests y mensajes posteriores para comunicar entre la página del evento y el contenido de la zona de pruebas, y acceder de forma indirecta a las APIs.
Cómo hacer referencia a recursos externos
La Política de Seguridad del Contenido que usan las apps no permite el uso de muchos tipos de URLs remotas, por lo que
No pueden hacer referencia directamente a imágenes, hojas de estilo o fuentes externas de una página de la app. En cambio, puedes
usar XMLHttpRequests de origen cruzado para recuperar estos recursos y, luego, publicarlos a través de URLs blob:.
Requisito del manifiesto
Para poder usar XMLHttpRequests de origen cruzado, deberás agregar un permiso para las URL remotas host:
"permissions": [
"...",
"https://supersweetdomainbutnotcspfriendly.com/"
]
XMLHttpRequest de origen cruzado
Recupera la URL remota en la app y entrega su contenido como una URL blob::
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var img = document.createElement('img');
img.src = window.URL.createObjectURL(this.response);
document.body.appendChild(img);
};
xhr.send();
Es posible que quieras guardar estos recursos de forma local para que estén disponibles sin conexión.
Incorporar páginas web externas
La etiqueta webview te permite incorporar contenido web externo en tu app, por ejemplo, una página web
. Reemplaza los iframes que dirigen a URLs remotas, que están inhabilitadas en las Apps de Chrome. Desmarcar “Me gusta”
iframes, la etiqueta webview se ejecuta en un proceso independiente. Esto significa que un exploit en su interior
estén aisladas y no podrán obtener privilegios elevados. Además, dado que su almacenamiento
(cookies, etc.) está aislada de la app, no hay forma de que el contenido web acceda a
datos de la app.
Agregar elemento de WebView
Tu elemento webview debe incluir la URL del contenido de origen y especificar sus dimensiones.
<webview src="http://news.google.com/" width="640" height="480"></webview>
Actualizar propiedades
Para cambiar dinámicamente las propiedades src, width y height de una etiqueta webview, puedes hacer lo siguiente:
establece esas propiedades directamente en el objeto JavaScript o usa la función del DOM setAttribute.
document.querySelector('#mywebview').src =
'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
'src', 'http://blog.chromium.org/');
Contenido local de zona de pruebas
Las zonas de pruebas permiten que las páginas especificadas se publiquen en un origen único de zona de pruebas. Luego, estas páginas
eximida de su Política de Seguridad del Contenido. Las páginas de zona de pruebas pueden usar iframes, secuencias de comandos intercaladas
eval() Consulta la descripción del campo del manifiesto de sandbox.
Sin embargo, hay una desventaja: las páginas de la zona de pruebas no pueden usar Chrome.* APIs Si necesitas hacer cosas como
eval(), toma esta ruta para eximirte de la CSP, pero no podrás usar cosas nuevas y geniales.
Usar secuencias de comandos intercaladas en la zona de pruebas
A continuación, se muestra una página de zona de pruebas de ejemplo que usa una secuencia de comandos intercalada y eval():
<html>
<body>
<h1>Woot</h1>
<script>
eval('console.log(\'I am an eval-ed inline script.\')');
</script>
</body>
</html>
Incluir zona de pruebas en el manifiesto
Debes incluir el campo sandbox en el manifiesto y enumerar las páginas de la app que se publicarán en un
zona de pruebas:
"sandbox": {
"pages": ["sandboxed.html"]
}
Abrir una página de zona de pruebas en una ventana
Al igual que cualquier otra página de la aplicación, puedes crear una ventana en la que se abra la página de la zona de pruebas. Este es un que crea dos ventanas, una para la ventana principal de la app, que no está en zona de pruebas, y otra para la página de zona de pruebas:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'bounds': {
'width': 400,
'height': 400,
'left': 0,
'top': 0
}
});
chrome.app.window.create('sandboxed.html', {
'bounds': {
'width': 400,
'height': 400,
'left': 400,
'top': 0
}
});
});
La incorporación de una página de zona de pruebas en la página de una app
Las páginas de zona de pruebas también se pueden incorporar dentro de la página de otra app a través de un iframe:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am normal app window.</p>
<iframe src="sandboxed.html" width="300" height="200"></iframe>
</body>
</html>
Envía mensajes a páginas de la zona de pruebas
Hay dos partes para enviar un mensaje: debes publicar el mensaje desde la ventana o ventana del remitente, y escuche los mensajes en la página o ventana de recepción.
Publicar mensaje
Puedes usar postMessage para la comunicación entre tu app y el contenido de la zona de pruebas. Aquí hay un ejemplo
secuencia de comandos en segundo plano que publica un mensaje en la página de zona de pruebas que se abre:
var myWin = null;
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('sandboxed.html', {
'bounds': {
'width': 400,
'height': 400
}
}, function(win) {
myWin = win;
myWin.contentWindow.postMessage('Just wanted to say hey.', '*');
});
});
En términos generales en la Web, es recomendable especificar el origen exacto desde el que se envía el mensaje. Las Apps de Chrome no tienen acceso al origen único del contenido de la zona de pruebas, así que solo puedes incluir todo en la lista de entidades permitidas orígenes como orígenes aceptables ("*"). Por lo general, en el extremo receptor, debes verificar el origen. pero, dado que el contenido de las Apps de Chrome está incluido, no es necesario. Para obtener más información, consulta window.postMessage.
Escucha el mensaje y responde
Este es un ejemplo de receptor de mensajes que se agrega a tu página de zona de pruebas:
var messageHandler = function(event) {
console.log('Background script says hello.', event.data);
// Send a reply
event.source.postMessage(
{'reply': 'Sandbox received: ' + event.data}, event.origin);
};
window.addEventListener('message', messageHandler);
Para obtener más detalles, consulta la muestra de la zona de pruebas.