Desinfectar cadena en JavaScript

1. Use el método sanitize() para desinfectar cadenas en JavaScript
2. Utilice el método sanitize() de DomPurify para desinfectar cadenas en JavaScript

En este artículo, la desinfección se discutirá en detalle. Los paquetes utilizados para desinfectar datos en HTML o prevenir ataques XSS también se explican en detalle.

Use el método sanitize() para desinfectar cadenas en JavaScript

Las aplicaciones web con frecuencia requieren entrada HTML. Sin embargo, presentarlos de manera segura en una página web es difícil porque están sujetos a ataques de secuencias de comandos entre sitios (XSS).

El método sanitize() de la interfaz Sanitizer desinfecta un árbol de nodos DOM, eliminando elementos o atributos no deseados. Debe usarse cuando los datos ya están disponibles como nodos DOM, como cuando se sanea una instancia de Documento en un marco.

La configuración predeterminada de sanitizer() elimina automáticamente la entrada relevante para XSS, incluidas las etiquetas de script, los elementos personalizados y los comentarios. Esta configuración se puede personalizar utilizando las opciones del constructor sanitizer().

Sintaxis:

sanitize(input)

Parámetro:

• input: Puede ser un DocumentFragment o un Document a desinfectar.

Valor de retorno:

• El valor devuelto es un DocumentFragment desinfectado.

Ahora desinfectaremos los datos de un iframe con id nombre de usuario.

Ejemplo:

const sanitizer = new Sanitizer();  // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById('username')
const unsanitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);

Utilice el método sanitize() de DomPurify para desinfectar cadenas en JavaScript

DOMPurify es un desinfectante XSS solo para DOM para HTML, MathML y SVG que es súper rápido y tolerante. También es fácil de usar y comenzar.

DOMPurify está construido en JavaScript y es compatible con todos los navegadores contemporáneos (Safari (10+), Opera (15+), Internet Explorer (10+), Edge, Firefox, Chrome, etc., que usan Blink o WebKit). No se ve afectado por MSIE6 u otros navegadores más antiguos, y utiliza un respaldo o no hace nada en absoluto.

Las pruebas automatizadas ahora cubren 19 navegadores distintos, y seguirán más. Además, Node.js v14.15.1, v15.4.0, v16.13.0, v17.0.0 y versiones anteriores también se tratan al ejecutar DOMPurify en JSDOM.

Expertos en seguridad crearon DOMPurify con amplia experiencia en ataques en línea y XSS.

Qué hace DOMPurify

DOMPurify limpia HTML y protege contra ataques XSS. Puede alimentar a DOMPurify con una cadena que contenga HTML sucio, y devolverá una cadena que contenga HTML limpio (a menos que se establezca lo contrario).

DOMPurify eliminará cualquier cosa que incluya HTML dañino. También es relativamente rápido.

Toma la tecnología del navegador y la convierte en un filtro XSS, por lo que DOMPurify será más rápido si su navegador es más rápido. Solo incluye DOMPurify en tu sitio web para comenzar a usarlo.

Utilice la versión de desarrollo no minimizada

<script type="text/javascript" src="src/pure.js"></script>

Utilice la versión de producción minificada y probada

<script type="text/javascript" src="dist/pure.min.js"></script>

Después de eso, puede desinfectar las cadenas ejecutando el siguiente código:

let clean = DOMPurify.sanitize(dirty);

El HTML generado se puede escribir en un elemento DOM usando innerHTML o directamente en el DOM con document.write().. Eso depende de ti.

Vale la pena señalar que permite HTML, SVG y MathML de forma predeterminada. Si todo lo que necesita es HTML, que es un caso de uso frecuente, también puede colocarlo fácilmente:

let clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {html: true}});

Tenga en cuenta que los beneficios de limpieza pueden perderse si limpia primero HTML y luego lo edita. Si envía el marcado desinfectado a otra biblioteca después de la desinfección, asegúrese de que la biblioteca no interfiera con el HTML por sí sola.

Después de desinfectar su marcado, puede mirar la propiedad DOMPurify.removed para ver qué elementos y atributos se eliminaron.

Puede cargar este script de forma asíncrona si está utilizando un cargador de módulos AMD como Require.js:

import DOMPurify from 'dompurify';

var clean = DOMPurify.sanitize(dirty);

DOMPurify se puede usar tanto en el lado del servidor con Node.js como en el lado del cliente con Browserify o traductores equivalentes. Es necesario tener Node.js 4.xo posterior.

DOMPurify está destinado a admitir cualquier versión que se haya marcado como activa. Simultáneamente, elimina el soporte para cualquier versión marcada como mantenimiento.

Es posible que DOMPurify no se rompa instantáneamente con todas las versiones en mantenimiento, pero deja de ejecutar pruebas contra versiones anteriores específicas.

npm install dompurify

Para JSDOM v10 o posterior:

const createDOMPurify = require('dompurify');
const {JSDOM} = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

Para versiones de JSDOM anteriores a v10:

const createDOMPurify = require('dompurify');
const jsdom = require('jsdom').jsdom;

const window = jsdom('').defaultView;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

Qué es compatible con DOMPurify

DOMPurify, de forma predeterminada, admite atributos de datos personalizados CSS y HTML. Además, es compatible con Shadow DOM y desinfecta recursivamente las plantillas DOM.

También desinfecta HTML para su uso con las API de JQuery $() y elm.html() sin causar ningún problema.