Я прочитав це у підручнику React. Що це означає?
Реагуйте безпечно. Ми не генеруємо рядки HTML, тому захист XSS є типовим.
Як працюють атаки XSS, якщо React безпечний? Як досягається така безпека?
Я прочитав це у підручнику React. Що це означає?
Реагуйте безпечно. Ми не генеруємо рядки HTML, тому захист XSS є типовим.
Як працюють атаки XSS, якщо React безпечний? Як досягається така безпека?
Відповіді:
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 .. Звичайно, входи дезінфікуються разом із цим.
Наприклад, скажімо, у вас є цей рядок
var htmlString = '<img src="javascript:alert('XSS!')" />';якщо ви спробуєте відобразити цей рядок у відповідь
render() {
return (
<div>{htmlString}</div>
);
}
ви буквально побачите на сторінці цілий рядок, включаючи <span>тег елемента. aka у браузері, який ви побачите<img src="javascript:alert('XSS!')" />
якщо ви переглядаєте вихідний html, то побачите
<span>"<img src="javascript:alert('XSS!')" />"</span>Ось трохи детальніше про те, що таке атака XSS
React в основному робить це таким чином, що ви не можете вставити розмітку, якщо ви не створите елементи самостійно у функції рендерингу ... сказано, що вони мають функцію, яка дозволяє таку рендеринг викликати dangerouslySetInnerHTML... ось трохи детальніше про це
Кілька речей, на які слід звернути увагу, є способи обійти те, що уникне React. Ще один поширений спосіб - це коли користувачі визначають реквізити для вашого компонента. Не розширюйте будь-які дані від вводу користувача як реквізит!