[Aporte] htmlEntities() para javascript.

@XSStringManolo · 16 Febrero 2020, 00:51 AM

Siempre me veo en la necesidad de codificar entidades a mano y acabo mirando una tabla porque no me acuerda alguna entidad en concreto. Por lo tanto hice una función en javascript que lo haga.
En principio la hice con el pseudoprotocolo

Código (javascript) [Seleccionar]

avascript:r='replace';d=document;a=prompt()[r](/ /g,"&#38;#38;#32;")[r](/!/g,"&#38;#38;#33;")[r](/"/g,"&#38;#38;#34;")[r](/%/g,"&#38;#38;#37;")[r](/'/g,"&#38;#38;#39;")[r](/\(/g,"&#38;#38;#40;")[r](/\)/g,"&#38;#38;#41;")[r](/</g,"&#38;#38;#60;")[r](/>/g,"&#38;#38;#62;")[r](/`/g,"&#38;#38;#96;")[r](/a/g,"&#38;#38;#97;")[r](/A/g,"&#38;#38;#65;")[r](/e/g,"&#38;#38;#101;")[r](/E/g,"&#38;#38;#69;")[r](/i/g,"&#38;#38;#105;")[r](/I/g,"&#38;#38;#73;")[r](/o/g,"&#38;#38;#111;")[r](/O/g,"&#38;#38;#79;")[r](/u/g,"&#38;#38;#117;")[r](/U/g,"&#38;#38;#85;")[r](/{/g,"&#38;#38;#123;")[r](/}/g,"&#38;#38;#125;")[r](/'/g,"&#38;#38;#8216;")[r](/'/g,"&#38;#38;#8217")[r](/,/g,"&#38;#38;#8218;")[r](/"/g,"&#38;#38;#8220;")[r](/"/g,"&#38;#38;#8221;")[r](/,,/g,"&#38;#38;#8222;")[r](/′/g,"&#38;#38;#8242;")[r](/″/g,"&#38;#38;#8244;")[r](/‹/g,"&#38;#38;#8249;")[r](/›/g,"&#38;#38;#8250;")[r](/s/g,"&#38;#38;#115;")[r](/S/g,"&#38;#38;#83;");a=d.createTextNode(a);b=d.createElement('p');b.appendChild(a);d.writeln(b.innerHTML);

Pense que a alguien más le podría ser algo útil y no me costaba nada asique hice una aplicación/página web con una interfaz muy simple para hacer esta tarea de forma automatizada.

htmlEntities() es una función que codifica caracteres que puedan ser interpretados y/o peligrosos a sus respectivas entidades. Estás entidades son códigos que el navegador conoce y puede mostrar. Por ejemplo el caracter < es codificado como <
Si en el código de tu página web permites que usuarios introduzcan caracteres como < podrían llegar a formar códigos que el navegador interprete como <img src="http://paginaporno.com/imagenPorno.jpg">, el navegador entiende la etiqueta imagen y muestra un imagen externa en tu página web sobre la que tu no tienes control. En vez de una imagen podría ser un código de javascript de un keylogger que te robase la cuenta. Otro caso común es que tu mismo quieras compartir un código para que los demás lo vean, pero el dichoso código en vez de mostrarse como texto, es interpretado por el navegador. O incluso en un ataque MITM interceptan una la respuesta a una petición por XHR. Para estes y otros casos una de las múltipes medidas que se toman es convertir los caracteres peligrosos en entidades. De esta forma el código no es interpretado por el navegador, en su lugar muestra el caracter correspondiente a dicha entidad.

Este programa que traigo hace precisamente esto. Le introduces un código o texto que no quieres que se interprete y te lo traduce a entidades html.

Solo debes copiar el código generado y lo pones en tu página web por ejemplo dentro de un div. En el blog que comencé hace unos días podeis ver que voy mostrando códigos. Para poder hacerlo codifico las entidades. Si no lo hiciese se ejecutaría y por lo tanto no podría compartir los códigos que creo.

Podeis copiar el código siguiente en un documento.html para abrirlo y utilizarlo o utilizar la función sin el resto de la página.

Código (javascript) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlEntities</title>
</head>
<body>
<h4 id="en" onclick="cambiarIdioma('en');" style="display:inline;font-size:40px">EN</h4>
<h4 style="font-size:40px;display:inline"> | </h4>
<h4 id="es" onclick="cambiarIdioma('es');" style="font-size:40px;display:inline;color:coral"> ES</h4>
<div style="width:100%;align:center">
<h1 style="color:coral;font-size: 60px;align:center;text-align:center;display: block; margin-right: auto; margin-left: auto;">htmlEntities()</h1>
<input type="text" id="codigo" placeholder="Introduce tu código a parsear" style="width:95%;font-size: 60px; display: block; margin-right: auto; margin-left: auto; outline-color:coral">
<br />
<button type="button" id="bt" onclick="Parsear()" style="width:47.5%;font-size: 50px;display: block; margin-right: auto; margin-left: auto; background-color: #fafafa;outline-color: coral">Parsear</button>


<br />
<textarea id="ta" contenteditable="true" style="width:95%;height:400px;overflow-y:scroll;padding:10px;background-color:#eee;color:coral;align:center;display: block; margin-right: auto; margin-left: auto;">Aquí aparecerá tu código.</textarea>
</div>

<script>
function cambiarIdioma(identificador) {
  if (identificador == "en") {   document.getElementById("codigo").placeholder = "Introduce your code to parse here";
document.getElementById("ta").innerHTML = "Here is going to be your code.";
 document.getElementById("en").style.color="coral"; document.getElementById("es").style.color="black";
  document.getElementById("bt").innerHTML="Parse";
  }

  if (identificador == "es") { document.getElementById("codigo").placeholder = "Introduce tu código a parsear"; document.getElementById("en").style.color="black"; document.getElementById("es").style.color="coral"; document.getElementById("ta").innerHTML = "Aquí aparecerá tu código."; document.getElementById("bt").innerHTML="Parsear";
  }
}


function Parsear() {
  var miString = document.querySelector("#codigo").value;

  miString = htmlEntities(miString);

   document.querySelector("#ta").innerHTML= miString;
}


/* Codigo */
function htmlEntities(string) {
r='replace';d=document;a=string[r](/ /g,"&#38;#38;#32;")[r](/!/g,"&#38;#38;#33;")[r](/"/g,"&#38;#38;#34;")[r](/%/g,"&#38;#38;#37;")[r](/'/g,"&#38;#38;#39;")[r](/\(/g,"&#38;#38;#40;")[r](/\)/g,"&#38;#38;#41;")[r](/</g,"&#38;#38;#60;")[r](/>/g,"&#38;#38;#62;")[r](/`/g,"&#38;#38;#96;")[r](/a/g,"&#38;#38;#97;")[r](/A/g,"&#38;#38;#65;")[r](/e/g,"&#38;#38;#101;")[r](/E/g,"&#38;#38;#69;")[r](/i/g,"&#38;#38;#105;")[r](/I/g,"&#38;#38;#73;")[r](/o/g,"&#38;#38;#111;")[r](/O/g,"&#38;#38;#79;")[r](/u/g,"&#38;#38;#117;")[r](/U/g,"&#38;#38;#85;")[r](/{/g,"&#38;#38;#123;")[r](/}/g,"&#38;#38;#125;")[r](/'/g,"&#38;#38;#8216;")[r](/'/g,"&#38;#38;#8217")[r](/,/g,"&#38;#38;#8218;")[r](/"/g,"&#38;#38;#8220;")[r](/"/g,"&#38;#38;#8221;")[r](/,,/g,"&#38;#38;#8222;")[r](/′/g,"&#38;#38;#8242;")[r](/″/g,"&#38;#38;#8244;")[r](/‹/g,"&#38;#38;#8249;")[r](/›/g,"&#38;#38;#8250;")[r](/s/g,"&#38;#38;#115;")[r](/S/g,"&#38;#38;#83;")[r](/\./g,"&#38;#38;#46;");a=d.createTextNode(a);b=d.createElement('pre');b.appendChild(a);return b.innerHTML;
}

</script>
</body>
</html>

Si encontrais algún bug o alguna forma de que se interprete código, avisar para mejorarlo.
No quite ni todas las entidades, ni solo las típicas, quité un poco las que yo creo que son mínimas imprescindibles.

Test Foro de elhacker.net SMF 2.1

[Aporte] htmlEntities() para javascript.

@XSStringManolo