reaccionar analiza el método de cadena html

1. En React, puede usar dangerouslySetInnerHTMLatributos para representar cadenas HTML como componentes de React. Sin embargo, hacerlo puede provocar ataques de secuencias de comandos en sitios cruzados (XSS) y solo debe usarse en orígenes confiables.

Aquí hay dangerouslySetInnerHTMLun ejemplo de representación de una cadena HTML usando atributos:

function MyComponent() {
  const htmlString = "<p>Hello, world!</p>";
  return <div dangerouslySetInnerHTML={
   
   { __html: htmlString }} />;
}

Tenga en cuenta que __htmles un atributo especial de React que se usa para especificar la cadena HTML para representar. El nombre de la propiedad tiene la intención de enfatizar el riesgo potencialdangerouslySetInnerHTML de su uso .

Entonces, además de esta manera, ¿hay alguna otra manera?

2. Utilice una biblioteca de terceros, por ejemplo react-html-parser, . Con esta biblioteca, las cadenas HTML se pueden analizar en un árbol de componentes React y representar en la aplicación. Este enfoque es relativamente seguro, ya que las bibliotecas suelen realizar una estricta validación y filtrado de entrada. Aquí hay un react-html-parserejemplo de uso:

import ReactHtmlParser from 'react-html-parser';

function MyComponent() {
  const htmlString = "<p>Hello, world!</p>";
  return <div>{ReactHtmlParser(htmlString)}</div>;
}

3. Analice manualmente la cadena HTML. Esta forma requiere más trabajo, pero también es más flexible y permite un mayor control sobre el proceso de análisis. Esto se puede lograr dividiendo la cadena HTML en tokens y construyendo manualmente el árbol de componentes de React usando la API de React Elements. Aquí hay un ejemplo de análisis de una cadena HTML:

function MyComponent() {
  const htmlString = "<p>Hello, world!</p>";
  const htmlTags = htmlString.match(/<[^>]*>/g);
  const reactElements = htmlTags.map((tag) => {
    const tagName = tag.match(/<(w+)/)[1];
    const props = {};
    const attributes = tag.match(/w+="[^"]*"/g) || [];
    attributes.forEach((attribute) => {
      const [key, value] = attribute.split('=');
      props[key] = value.replace(/"/g, '');
    });
    return React.createElement(tagName, props, []);
  });
  return <div>{reactElements}</div>;
}

Independientemente del enfoque que utilice, tenga cuidado de validar y desinfectar la entrada del usuario para evitar posibles riesgos de seguridad.

Además react-html-parser, hay algunas otras bibliotecas que pueden ayudar a analizar cadenas HTML en componentes de React. Aquí hay algunas bibliotecas de uso común:

html-react-parser- Un analizador HTML simple que puede analizar cadenas HTML en componentes React. Admite analizadores personalizados, como etiquetas y atributos personalizados.
html-to-react- Otro analizador HTML que puede analizar cadenas HTML en componentes React. Admite la asignación de diferentes etiquetas HTML a diferentes componentes de React.
cheerio- Un analizador de HTML rápido, similar a jQuery. Está disponible en Node.js y proporciona algunos selectores potentes para buscar y manipular etiquetas HTML.

Estas bibliotecas brindan diferentes opciones de análisis y API, elija la biblioteca más adecuada según sus necesidades.

Para analizar cadenas HTML y mantener su aplicación segura, debe usar filtros o analizadores HTML especializados, por ejemplo:

DOMPurify: esta es una biblioteca liviana que filtra y purifica el código HTML para eliminar el código malicioso y los elementos y atributos inseguros.
sanitize-html: esta es una biblioteca de Node.js que puede filtrar y desinfectar el código HTML a través de una lista blanca, eliminando así el código malicioso y los elementos y atributos no seguros.
parse5: este es un analizador HTML rápido que puede analizar el código HTML en un AST (árbol de sintaxis abstracta), lo que permite una fácil manipulación y filtrado de HTML.

Con estas bibliotecas, los desarrolladores pueden convertir de forma segura cadenas HTML en componentes de React y evitar posibles problemas de seguridad. Sin embargo, debe tenerse en cuenta que estas bibliotecas también pueden tener vulnerabilidades o problemas, por lo que estas bibliotecas deben actualizarse periódicamente para garantizar la seguridad del código.

sanitize-html uso:

const sanitizeHtml = require('sanitize-html');

const html = '<div><h1>Title</h1><p>Paragraph #1</p><p>Paragraph #2</p></div>';
const purifiedHtml = sanitizeHtml(html);
console.log(purifiedHtml);

sanitize-html también admite listas blancas personalizadas: por ejemplo, podemos agregar atributos y atributos <img>en etiquetas a la lista blanca, para que estos atributos se conserven al filtrar y desinfectar el código HTML.srcalt

const sanitizeHtml = require('sanitize-html');

const html = '<div><img src="image.jpg" alt="My Image"></div>';
const options = {
  allowedAttributes: {
    img: ['src', 'alt'],
  },
};
const purifiedHtml = sanitizeHtml(html, options);
console.log(purifiedHtml);

En el código anterior, definimos un optionsobjeto, que contiene una allowedAttributespropiedad denominada, cuyo valor es un objeto, contiene una imgpropiedad, cuyo valor es una matriz, que contiene srcy altdos nombres de propiedad. Finalmente, optionspasamos el objeto a sanitizeHtmlla función para usar nuestra lista blanca personalizada al filtrar y desinfectar el código HTML.

En resumen, sanitize-html es un potente filtro HTML que puede ayudarnos a filtrar y depurar el código HTML de forma más flexible, mejorando así la seguridad de las aplicaciones.

Uso de parse5:

// 1.安装  npm install parse5

const parse5 = require('parse5');

// 2.在Node.js中使用parse5解析HTML代码
const html = '<div><h1>Title</h1><p>Paragraph #1</p><p>Paragraph #2</p></div>';
const ast = parse5.parse(html);
console.log(ast);

// 3.对AST进行操作和过滤
const html = '<div><h1>Title</h1><p>Paragraph #1</p><script>alert("Hello, world!");</script><p>Paragraph #2</p></div>';
const ast = parse5.parse(html);

function filterScripts(node) {
  if (node.nodeName === 'script') {
    return parse5.treeAdapters.default.createElement('template');
  }
}

parse5.treeAdapters.default.traverse(ast, {
  pre: filterScripts,
});

const filteredHtml = parse5.serialize(ast);
console.log(filteredHtml);

En el código anterior, definimos una filterScriptsfunción llamada para filtrar todas las etiquetas en HTML <script>. Luego parse5.treeAdapters.default.traverserecorremos el AST usando funciones, filterScriptsoperando en nodos coincidentes usando funciones que definimos. Finalmente, usamos parse5.serializeuna función para serializar el AST filtrado en una cadena HTML y mostrar el resultado.

reaccionar analiza el método de cadena html

おすすめ