ReactJS вполне безопасен по конструкции, поскольку
поэтому типичная атака, подобная этой, не будет работать
const username = "<img onerror='alert(\"Hacked!\")' src='invalid-image' />";
class UserProfilePage extends React.Component {
render() {
return (
<h1> Hello {username}!</h1>
);
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>но ...
dangerouslySetInnerHTMLКогда вы используете, dangerouslySetInnerHTMLвам необходимо убедиться, что контент не содержит javascript. React здесь ничего не может сделать для вас.
const aboutUserText = "<img onerror='alert(\"Hacked!\");' src='invalid-image' />";
class AboutUserComponent extends React.Component {
render() {
return (
<div dangerouslySetInnerHTML={{"__html": aboutUserText}} />
);
}
}
ReactDOM.render(<AboutUserComponent />, document.querySelector("#app"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>Пример 1: Использование javascript: code
Нажмите «Выполнить фрагмент кода» -> «Мой веб-сайт», чтобы увидеть результат.
const userWebsite = "javascript:alert('Hacked!');";
class UserProfilePage extends React.Component {
render() {
return (
<a href={userWebsite}>My Website</a>
)
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>Пример 2: Использование данных в кодировке base64:
Нажмите «Выполнить фрагмент кода» -> «Мой веб-сайт», чтобы увидеть результат.
const userWebsite = "data:text/html;base64,PHNjcmlwdD5hbGVydCgiSGFja2VkISIpOzwvc2NyaXB0Pg==";
class UserProfilePage extends React.Component {
render() {
const url = userWebsite.replace(/^(javascript\:)/, "");
return (
<a href={url}>My Website</a>
)
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>const customPropsControledByAttacker = {
dangerouslySetInnerHTML: {
"__html": "<img onerror='alert(\"Hacked!\");' src='invalid-image' />"
}
};
class Divider extends React.Component {
render() {
return (
<div {...customPropsControledByAttacker} />
);
}
}
ReactDOM.render(<Divider />, document.querySelector("#app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>Вот еще ресурсы
React автоматически экранирует переменные для вас ... Он предотвращает внедрение XSS через строковый HTML с вредоносным Javascript .. Естественно, входные данные дезинфицируются вместе с этим.
Например, допустим, у вас есть эта строка
если вы попытаетесь отобразить эту строку в реакции
вы буквально увидите на странице всю строку, включая
<span>тег элемента. иначе в браузере вы увидите<img src="javascript:alert('XSS!')" />если вы посмотрите исходный html, вы увидите
Вот еще несколько подробностей о том, что такое XSS-атака.
React в основном делает так, что вы не можете вставлять разметку, если вы сами не создаете элементы в функции рендеринга ... при этом, как говорится, у них есть функция, которая позволяет такой рендеринг вызывается
dangerouslySetInnerHTML... вот некоторые подробности об этомРедактировать:
Несколько замечаний, есть способы обойти то, чего избегает React. Еще один распространенный способ - это когда пользователи определяют свойства вашего компонента. Не расширяйте данные из пользовательского ввода как реквизиты!
источник