Что это значит, когда говорят, что React защищен от XSS?

Question 1

Я прочитал это в руководстве по React. Что это значит?

React безопасен. Мы не генерируем строки HTML, поэтому по умолчанию используется защита XSS.

Как работают XSS-атаки, если React безопасен? Как достигается такая безопасность?

Question 2

ReactJS вполне безопасен по конструкции, поскольку

Строковые переменные в представлениях экранируются автоматически
С JSX вы передаете функцию в качестве обработчика событий, а не строку, которая может содержать вредоносный код.

поэтому типичная атака, подобная этой, не будет работать

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>

Развернуть фрагмент

но ...

❗❗❗Предупреждение❗❗❗

Есть еще несколько векторов XSS-атак, с которыми вам нужно справиться в React самостоятельно!

1. XSS через `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>

Развернуть фрагмент

2. XSS через атрибут a.href

Пример 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>

Развернуть фрагмент

3. XSS через реквизиты, контролируемые злоумышленником.

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>

Развернуть фрагмент

Вот еще ресурсы

Question 3

React автоматически экранирует переменные для вас ... Он предотвращает внедрение XSS через строковый HTML с вредоносным Javascript .. Естественно, входные данные дезинфицируются вместе с этим.

Например, допустим, у вас есть эта строка

var htmlString = '<img src="javascript:alert('XSS!')" />';

если вы попытаетесь отобразить эту строку в реакции

render() {
    return (
        <div>{htmlString}</div>
    );
}

вы буквально увидите на странице всю строку, включая <span>тег элемента. иначе в браузере вы увидите<img src="javascript:alert('XSS!')" />

если вы посмотрите исходный html, вы увидите

<span>"<img src="javascript:alert('XSS!')" />"</span>

Вот еще несколько подробностей о том, что такое XSS-атака.

React в основном делает так, что вы не можете вставлять разметку, если вы сами не создаете элементы в функции рендеринга ... при этом, как говорится, у них есть функция, которая позволяет такой рендеринг вызываетсяdangerouslySetInnerHTML ... вот некоторые подробности об этом

Редактировать:

Несколько замечаний, есть способы обойти то, чего избегает React. Еще один распространенный способ - это когда пользователи определяют свойства вашего компонента. Не расширяйте данные из пользовательского ввода как реквизиты!

Что это значит, когда говорят, что React защищен от XSS?

❗❗❗Предупреждение❗❗❗

Есть еще несколько векторов XSS-атак, с которыми вам нужно справиться в React самостоятельно!

1. XSS через dangerouslySetInnerHTML

2. XSS через атрибут a.href

3. XSS через реквизиты, контролируемые злоумышленником.

Редактировать:

1. XSS через `dangerouslySetInnerHTML`