Безопасная альтернатива опасноSetInnerHTML

Я хотел бы иметь динамический блог на моем сайте (который использует React). Вначале я собирался хранить сообщения в необработанном HTML в моей базе данных и генерировать контент, используя riskouslySetInnerHTML. Однако я обеспокоен последствиями безопасности. Хотя мое приложение не имеет каких-либо конфиденциальных данных, я недостаточно разбираюсь в XSS, чтобы узнать все опасности, с которыми я буду открывать приложение.

Мне любопытно, есть ли эффективный, безопасный способ динамически загружать страницы блога в моем приложении. Будет ли полезно использовать https://github.com/odysseyscience/react-router-proxy-loader в этом случае? У вас есть папка блога JSX отдельно от остальной части моего приложения и загружайте его с помощью этого (правда, я не уверен, как работает агент-посредник-прокси-загрузчик).

Я открыт для предложений.

Спасибо,

Кевин

Ответы

Ответ 1

Если XSS является вашей основной задачей, вы можете использовать DOMPurify для дезинфекции своего HTML, прежде чем вставлять его в DOM через dangerouslySetInnerHTML. Это всего лишь 10K. И он работает и в Node.

Ответ 2

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

"Имя опоры опасно SetInnerHTML специально выбрано, чтобы быть пугающим..."

"После полного понимания последствий для безопасности и правильной очистки данных..."

Я полагаю, что если вы доверяете своему собственному CMS/Серверу (а не получению от третьей стороны), который очистил данные (этот шаг также выполнен), то вы можете вставить с помощью dangerouslySetInnerHTML.

Как сказал Морхаус, возможно, используйте DOMPurify, так как он (бонус), вероятно, обрабатывает этот неудачный бит: "поэтому предоставляемый HTML-код должен быть правильно сформирован (т.е. пройти проверку XML)". Я подозреваю, что некоторое содержимое, использующее не-XML версию HTML5, могло бы стать проблемой. (Примечание: я сам еще не использовал его, так как я новичок, как вы.)

Ответ 3

Если вы уверены, входной HTML является безопасным (без риска XSS), но может быть искаженным (например, иметь случайный < в тексте), и вы хотите, чтобы ваше приложение не сработало из-за неожиданного изменения DOM, вы можете попробовать следующее:

function sanitize(html) {
  var doc = document.createElement('div');
  doc.innerHTML = html;
  return doc.innerHTML;
}

^{(На основе fooobar.com/questions/259051/...)}

Но если у вас есть хоть малейшее сомнение в том, что ваш HTML-код может быть не-XSS-безопасным, используйте DOMPurify, как указано выше.

Ответ 4

Я столкнулся с той же проблемой и закончил лучшее решение. если ваш ввод что-то вроде ниже и решение будет работать для вас, используя lodash

&lt;em&gt;paragraph text example:&lt;/em&gt;

Мое решение:

import _ from 'lodash';

const createMarkup = encodedHtml => ({
  __html: _.unescape(encodedHtml),
});

/* eslint-disable react/no-danger */
const Notes = ({ label }) => (
  <div>
    <div dangerouslySetInnerHTML={createMarkup(label)} />
  </div>
);

Ответ 5

У меня была аналогичная проблема в реакции и наткнулся на пакет npm html-reat-parser который анализирует html в тексте и удаляет любые опасные сценарии, которые могут использоваться для угона.

Ответ 6

В статье Как предотвратить XSS-атаки при использовании dangerouslySetInnerHTML в React предлагается использовать правило eslint jam3/no-sanitizer-with-danger, чтобы проверить, что содержимое, передаваемое в dangerouslySetInnerHTML, помещено в эту функцию sanitizer

Пример правильного кода:

const sanitizer = dompurify.sanitize;
return <div dangerouslySetInnerHTML={{__html: sanitizer(title)}} />; // Good

Здесь также описаны 3 библиотеки дезинфицирующих средств:
DOMPurify
Xss.
XSS-фильтры.