Como sabemos, los desarrolladores son responsables de escapar / validar correctamente los datos proporcionados por el usuario antes de procesarlos o almacenarlos. Sin embargo, debemos estar de acuerdo en que es relativamente fácil olvidar una entrada única entre cientos y, finalmente, hacer que su aplicación web sea explotada por un XSS. ¿O no has conocido a alguien que haya explotado su sitio por XSS?
Incluso Twitter y Orkut sufrieron recientemente de XSS. Y no estoy aquí para culpar a nadie.
Supongamos que su navegador admite elementos DOM de lista blanca. Estos elementos incluidos en la lista blanca son los únicos elementos que pueden ejecutar JavaScript. Rápidamente se da cuenta de que suena insano porque es imposible que su sitio web preferido funcione correctamente si tiene una lista blanca tan genérica. ¡Y estás en lo correcto!
Pero ahora suponga que los motores HTML y JavaScript admiten una sintaxis para permitirle incluir en la lista blanca los elementos de su propio sitio web. Por ejemplo:
<head>
<script type="text/javascript">
document.allowJavaScript(['div.item', '#list', 'a.navigate']);
</script>
</head>
Esto no resuelve el problema de representar etiquetas <script> en medio de un árbol DOM, pero supongo que es mucho más fácil de resolver.
Además de mi punto anterior, ¿qué tipo de problemas o fallas ve en la solución descrita?
ACTUALIZACIÓN 1 : solo se debe confiar en el elemento head para invocar allowJavaScript .
ACTUALIZACIÓN 2 : con suerte, el siguiente fragmento de código explica un poco más mi idea:
<html>
<head>
<style>
div.outer { background-color: #aaa; width: 200px; height: 100px; }
div.inner { background-color: #5ff; width: 100px; height: 50px; }
ul { list-style-type: none; }
li { background-color: #bbc; border: 1px solid #fff; float: left;
width: 100px; height: 30px; }
</style>
<script type="text/javascript">
document.allowJavaScript(['div.outer', '#list', 'a.test']);
function register_events() {
var list = document.querySelector('#list');
list.onclick = function() { alert('list'); }
var example1 = document.querySelector('#list li:nth-of-type(1)');
example1.onclick = function() { alert('example 1'); }
}
window.onload = register_events;
</script>
</head>
<body>
<div class="outer" onclick="alert('outer');">
<div class="inner" onmouseover="alert('inner');">
</div>
</div>
<a class="navigate" href="#" onclick="alert('a');">click me</a>
<ul id="list">
<li>example 1</li>
<li>example 2</li>
</ul>
</body>
</html>
Esto NO debe permitir la ejecución de:
-
alert('inner')- > permitimosdiv.outer, pero ninguno de sus elementos secundarios; -
alert('example 1')- > permitimos#list, pero ninguno de sus elementos secundarios; -
alert('a')- > permitimosa.test, noa.navigate;