El modelo de seguridad de las Apps de Chrome no permite el contenido externo en iframes ni el uso de secuencias de comandos intercaladas y eval(). Puedes anular estas restricciones, pero tu contenido externo debe estar aislado de la app.
El contenido aislado no puede acceder directamente a los datos de la app ni a ninguna de las APIs. Usa XMLHttpRequests de origen cruzado y mensajes posteriores para establecer la comunicación entre la página del evento y el contenido de la zona de pruebas, y accede indirectamente a las APIs.
Referencia a recursos externos
La Política de Seguridad del Contenido que usan las apps no permite el uso de muchos tipos de URL remotas, por lo que no puedes hacer referencia directamente a imágenes, hojas de estilo o fuentes externas desde la página de una app. En su lugar, puedes
usar XMLHttpRequests de origen cruzado para recuperar estos recursos y, luego, entregarlos a través de URLs blob:.
Requisito del manifiesto
Si quieres usar XMLHttpRequests de origen cruzado, deberás agregar un permiso para el host de la URL remota:
"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();
Te recomendamos 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. A diferencia de los iframes, la etiqueta webview se ejecuta en un proceso independiente. Esto significa que cualquier exploit dentro de él estará aislado de todos modos y no podrá obtener privilegios elevados. Además, como su almacenamiento (cookies, etc.) está aislado de la app, no hay forma de que el contenido web acceda a los datos de la app.
Agregar elemento de WebView
Tu elemento webview debe incluir la URL que dirige al 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 configurarlas directamente en el objeto JavaScript o usar 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 la zona de pruebas
La zona de pruebas permite que las páginas especificadas se publiquen en un origen único y con zona de pruebas. Estas páginas quedan exentas de su Política de Seguridad del Contenido. Las páginas de zona de pruebas pueden usar iframes, secuencias de comandos intercaladas y eval(). Consulta la descripción del campo del manifiesto para la sandbox.
Sin embargo, hay una desventaja: las páginas de la zona de pruebas no pueden usar Chrome.* APIs Si necesitas realizar acciones como eval(), usa esta opción para quedar exento de CSP, pero no podrás usar las nuevas funciones geniales.
Usa 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 una zona de pruebas en el manifiesto
Debes incluir el campo sandbox en el manifiesto y enumerar las páginas de la app que se entregarán en una zona de pruebas:
"sandbox": {
"pages": ["sandboxed.html"]
}
Abrir una página de zona de pruebas en una ventana
Al igual que con las demás páginas de la app, puedes crear una ventana en la que se abra la página de la zona de pruebas. A continuación, se muestra un ejemplo en el que se crean 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
}
});
});
Incorporación de una página de zona de pruebas en la página de una aplicación
Las páginas de zona de pruebas también se pueden incorporar dentro de la página de otra app mediante 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 zona de pruebas
Existen dos partes para enviar un mensaje: debes publicar un mensaje desde la página o ventana del remitente y escuchar los mensajes en esa 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. A continuación, se muestra una secuencia de comandos en segundo plano de muestra 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, se desea 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, por lo que solo puedes incluir en la lista de entidades permitidas todos los orígenes como orígenes aceptables (“*”). En el extremo receptor, por lo general, se recomienda verificar el origen, pero, como se incluye el contenido de las Apps de Chrome, no es necesario. Para obtener más información, consulta window.postMessage.
Escuchar mensaje y responder
Este es un receptor de mensajes de muestra 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 sandbox.