При вставке статьи из JSON отображаются HTML теги - (React / Next JS)

Question

У меня есть многолетний проект, созданный на Joomla. Используя REST API Джумлы получил JSON из базы данных MySQL. Задача - обновить сайт и сделать его на Next, параллельно попрактиковаться. Столкнулся с проблемой - при вставке тела статьи в компонент, в браузере отображаются все теги. Перечитал множество форумов, но как решить вопрос на Реакт, так и не нашел.

Ссылка на пример получаемого JSON: https://sketchok.com/api/v1/content/item/1902

Ниже привел код компонента

Буду очень признателен за подсказку!

export default class Article extends React.Component {
  state = {
    title: null,
    body: null,
  };

  componentDidMount() {
    fetch("https://sketchok.com/api/v1/content/item/1902")
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          title: data.article.title,
          body: data.article.fulltext
        });
      });
  }

  render() {
    return (
      <Layout>
        <h1>{this.state.title}</h1>
        <div>{this.state.body}</div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <p>Text</p>
      </Layout>
    );
  }
}

Answer 1

Можно решить это с помощью регулярного выражения и код будет выглядеть так

const regex = /(<([^>]+)>)/ig
const result = data.description.replace(regex, '')

Answer 2

Текст как HTML в реакте можно вставить при помощи "dangerouslySetInnerHTML"

В вашем случае код будет выглядеть примерно так:

export default class Article extends React.Component {
  state = {
    title: null,
    body: null,
  };

  componentDidMount() {
    fetch("https://sketchok.com/api/v1/content/item/1902")
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          title: data.article.title,
          body: data.article.fulltext
        });
      });
  }

  render() {
  const {title, body} = this.state;
  const regex = /(<([^>]+)>)/ig;
  
  const formattedTitle = title.replace(regex, ''),
        formattedBody = body.replace(regex, '');
  
    return (
      <Layout>
        <h1 dangerouslySetInnerHTML={{__html:formattedTitle}} />
        <div dangerouslySetInnerHTML={{__html:formattedBody}} />
        <Link href="/">
          <a>Home</a>
        </Link>
        <p>Text</p>
      </Layout>
    );
  }
}

Answer 3

HTML в реакте можно вставить при помощи "dangerouslySetInnerHTML".

При этом есть опасность XSS атаки.

Для защиты можно использовать библиотеку: https://github.com/cure53/DOMPurify

function RawHTML({dirtyHTML}) {
  const cleanHTML = DOMPurify.sanitize(dirtyHTML)
  return <div dangerouslySetInnerHTML={{__html: cleanHTML}} />;
}

БЛОГ НА HUSL

При вставке статьи из JSON отображаются HTML теги - (React / Next JS)

Ответы (3 шт):