опасноSetInnerHTML — это атрибут элементов DOM в React.
Согласно официальной документации , опасноSetInnerHTML является заменой React для использования innerHTML в DOM браузера для установки HTML программно или из внешнего источника.

Синтаксис и необходимость использовать опасно SetInnerHTML

В простом ванильном JS для вставки HTML на веб-страницу мы используем свойство innerHTML, как показано ниже.

<div innerHTML=<p>A sample paragraph</p></div>
or
document.querySelector(".testClass")= '<p>A sample paragraph</p>';

Синтаксис для использованияhazardlySetInnerHTML довольно прост. Вместо innerHTML вы должны напечатать опасноSetInnerHTML и передать объект с ключом __html. Например:

<div dangerouslySetInnerHTML={{__html: '<p>lorem ipsum</p>'}}></div>

Почему это называется опасноSetInnerHTML?

Имя опасноSetInnerHTML выбрано намеренно, чтобы быть пугающим. Это не ошибка в названии.

Как правило, настройка HTML из кода сопряжена с риском, поскольку это может подвергнуть ваших пользователей атаке с использованием межсайтовых сценариев (XSS) . Вы можете установить HTML прямо из React, но вам нужно ввести dangerouslySetInnerHTMLи передать объект с __htmlключом, чтобы напомнить себе, что это опасно.

Если вы разрешаете пользователям вставлять HTML-код непосредственно на вашу веб-страницу, технически они могут встраивать сценарии и вредоносный код, и когда вы отображаете этот HTML-код в своем приложении для реагирования, эти сценарии могут выполняться. Пример показан ниже.

import React from "react";
import './App.css';
const App = () => {
const data = `
  <h3>Welcome to this page</h3>
  <p>May the code be with you</p>
  <img src=??? onerror="alert('XSS')" />
  `;
return (
    <div className="App">
      <h2>Understanding dangerouslySetInnerHTML</h2>
      <div
        style={{ padding: "10px", fontSize: '17px', textAlign: 'center' }}
        dangerouslySetInnerHTML={{ __html: data }}
      ></div>
    </div>
  );
}
export default App;

      

Пример того, как вы можете очистить свой код с помощью dompurify, показан ниже:

Представление

Когда вы используете опасно SetInnerHTML, за кулисами это позволяет React узнать, что HTML внутри этого компонента — это не то, что его волнует, так как он исходит из другого источника.

Поскольку React использует виртуальный DOM, при сравнении различий с реальным DOM он может просто пропустить сравнение с виртуальным DOM, чтобы получить дополнительную производительность.

Если вы просто используете innerHTML, React не сможет узнать, что узел DOM был изменен.

Заключение

В заключение, dangerouslySetInnerHTMLэто не что иное, как замена innerHTMLв React, и его следует использовать с осторожностью. Имя опасноSetInnerHTML выбрано намеренно, чтобы напомнить вам, что это опасно и может привести к уязвимостям XSS, поэтому вы должны убедиться, что ваш HTML очищен, прежде чем вставлять его в свое приложение для реагирования.

Видео объяснение:

Больше контента на PlainEnglish.io . Подпишитесь на нашу бесплатную еженедельную рассылку . Следите за нами в Twitter и LinkedIn . Присоединяйтесь к нашему сообществу Discord .