Propuesta HTML5 (IE10+
)
El atributo sandbox
del elemento iframe
nos da exactamente lo que necesitamos para ajustar las restricciones sobre el contenido enmarcado. Podemos instruir al navegador para que cargue el contenido de un iframe
específico en un entorno de privilegios bajos.
Utilizando sandbox="allow-scripts"
sobre un iframe
, habilitamos al documento enmarcado la posibilidad de ejecutar JavaScript
(pero no de crear popups).
Cuando el documento enmarcado tiene el mismo origen que la página principal, se recomienda encarecidamente que no utilicemos allow-scripts
y allow-same-origin
al mismo tiempo, ya que esto permitiria que el documento enmarcado elimine, mediante programación, el atributo sandbox
.
Aprovechando la API postMessage
, el documento padre y el enmarcado pueden intermediar la comunicación entre ellos publicando mensajes y escuchando respuestas.
Ejemplo:
Archivo index.html:
<!-- Documento padre -->
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
display: block;
width: 300px;
height: 150px;
}
iframe {
display: none;
}
</style>
</head>
<body>
<textarea id="codigo">
function sumar(a, b) {
return a + b;
}
sumar(1, 2);
</textarea>
<button id="ejecutar">Ejecutar</button>
<iframe id="sandbox" src="sandbox.html" sandbox="allow-scripts"></iframe>
<script>
var sandbox = document.getElementById('sandbox');
var codigo = document.getElementById('codigo');
// Suscribimos al click del boton
document.getElementById('ejecutar').addEventListener('click', function () {
// Enviamos el mensaje sin especificar el origen (*)
sandbox.contentWindow.postMessage(codigo.value, '*');
});
// Escuchamos la respuesta del frame
window.addEventListener('message', function (evt) {
// Normalmente se debe verificar el origen del mensaje es de la fuente esperada
if (evt.data && (
(evt.origin === "null" && evt.source === sandbox.contentWindow) ||
evt.origin === (window.location.protocol + "//" + window.location.host))
) {
alert('Result: ' + evt.data);
}
});
</script>
</body>
</html>
Archivo sandbox.html:
<!-- Documento enmarcado -->
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('message', function (evt) {
// Se debe validar que el origen del mensaje sea el esperado.
// En este caso esperamos que sea el mismo origen.
if (evt.origin !== (window.location.protocol + "//" + window.location.host)) {
return;
}
var resultado = '';
try {
resultado = eval(evt.data);
} catch (e) {
resultado = 'eval() arrojo una excepción.';
}
evt.source.postMessage(resultado, evt.origin);
});
</script>
</head>
</html>
El código evaluado no tiene acceso a información sensible como cookies, no tiene acceso al DOM del documento padre, no puede cargar complementos, abrir ventanas nuevas o cualquiera de otras actividades molestas o maliciosas.
Lectura recomendada:
Play safely in sandboxed IFrames (en Ingles)