[Aporte] Coloreador de palabras y código. (Para DOM XSS)

[@XSStringManolo]

Os comparto un script que hice para resaltar palabras que suelen ser comunes en las inyecciones DOM XSS.

Qué hace?
-Obtiene el código fuente de la página web en la que estás, y te lo muestra con las palabras más interesantes coloreadas. Util para centrar la vista en lo que quieres y entender de un vistazo como entran los datos en la aplicación.

Preview del resultado de aplicar el scriprt a una página:


Como usar?
-Copiar el código, pegarlo en la barra del navegador y darle a enter.
*Si tu navegador elimina la palabra javascript de la barra de direcciones automáticamente al pegar el código, puedes copiar todo el script menos la primera letra j. Escribes la j en la barra del naevegador y pegas el código.

Copiar De Aquí

Otros usos?
- Puedes cambiar las palabras por las que tu quieras y darle otro uso. O utilizar prompt() dentro de un bucle para obtener las palabras de forma interactiva.

Comentario del código:

Código (javascript) [Seleccionar] Expandir


/*Funcion que remplaza varios caracteres inseguros del string que se le pase como parámetro en la llamada por su entidad homóloga. */
function htmlEntities(str) {
  r='replace'; /* Acortador para el método replace */
  z=document; /* Acortador para document */
  x=str[r] /* Utilizo la sintaxis del operador array en lugar de la de punto para acortar el código. Ej, de window.alert("hola") a window["alert"]("hola") o si utilizas variables a w[a](h); */
(/ /g," ")[r]
(/!/g,"!")[r]
(/"/g,""")[r]
(/%/g,"%")[r] /* Son múltiples replaces sobre el msimo string utilizando encadenamiento de métodos. El replace toma 2 parámetros, el string a remplazar y el string que ocupará su lugar. Utilizo RegExp Expresiones regulares /caracter/ para buscar un caracter y //g para buscar todas las ocurrencias de ese caracter en el string que se le pasó por parámetro a la función. El segundo parámetro es la entidad HTML correspondiente a dicho caracter. La entidad nos permite ver el caracter sin que se interprete. */
(/'/g,"'")[r]
(/\(/g,"(")[r]
(/\)/g,")")[r]
(/</g,"&#60;")[r]
(/>/g,"&#62;")[r]
(/`/g,"&#96;")[r]
(/a/g,"&#97;")[r]
(/A/g,"&#65;")[r]
(/e/g,"&#101;")[r]
(/E/g,"&#69;")[r]
(/i/g,"&#105;")[r]
(/I/g,"&#73;")[r]
(/o/g,"&#111;")[r]
(/O/g,"&#79;")[r]
(/u/g,"&#117;")[r]
(/U/g,"&#85;")[r]
(/{/g,"&#123;")[r]
(/}/g,"&#125;")[r]
(/'/g,"&#8216;")[r]
(/'/g,"&#8217")[r]
(/,/g,"&#8218;")[r]
(/"/g,"&#8220;")[r]
(/"/g,"&#8221;")[r]
(/,,/g,"&#8222;")[r]
(/′/g,"&#8242;")[r]
(/″/g,"&#8244;")[r]
(/‹/g,"&#8249;")[r]
(/›/g,"&#8250;")[r]
(/s/g,"&#115;")[r]
(/S/g,"&#83;"); /* Se puede acortar el código con el constructor de Reg Exp, declarando todas las palabras y regexp del código como un único string separadas por un espacio y hacer split de string a array. Con que el código no laggease al pegar en la url me valia. */
  return x; /* Retorna el string convertido a entidades */
}

var temp;

/* Para rodear las palabras y aplicarles css para colorearlas */
var c="<span class='xssRed'>";
var d="</span>";


/* Todas las palabras que encontré que de forma frecuente puede que sean relevantes en inyecciones DOM XSS */
var b=[
"write","writeln","domain","innerHTML",
"outerHTML","insertAdjacentHTML","onevent","baseURI",
"documentURI","location","referrer","URL",
"URLUnencoded","href","search","hash","pathname","self","name","eval",
"javascript","setInterval","setTimeout","import url",
"add","after","append","animate",
"insertAfter","insertBefore","before","prepend",
"replaceAll","replaceWith","wrap","wrapInner",
"wrapAll","has","constructor","init",
"index","parseHTML"];

/* Obtiene el fuente de la página actual */
var a=document.querySelector("html").outerHTML;

/* Itera una vez por palabra */
for(var i=0; i<b.length; ++i) {

/* Crea una expresión regular Global caseInsensitive de cada palabra. Es decir, busca todas las ocurrencias de la palabra que toque indistintamente de si tiene mayusculas o minuúsculas. */
  temp=new RegExp(b[i],"gi");

/* Remplaza las palabras que encuentre en el código por cadenas temporales reconocibles que no vayan a ser codificadas a entidades. En medio de estas cadenas pon la palabra original.*/
  a=a.replace(temp,"nblblbl"+b[i]+"nhlhlhl");
}

a=htmlEntities(a); /* Transforma el fuente a entidades para poder leerlo sin que se interprete. */
a=a.replace(/nblblbl/g,"<span class='xssRed'>"); /* Modifica las cadenas temporales reconocibles por los elementos span. */
a=a.replace(/nhlhlhl/g, "</span>");
document.write(' /* Escribe un código html sin entidades en el que meter dentro el código con entidades. Así se interpretan los <span> y el nuevo código para colorear su innerHTML. */
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <section id="code">'+a+'</section>
    <style>
#code {
  background-color: #fefefe;
}

.xssRed {
  color:red;
}
    </style>
  </body>
</html>');