Cosa significa quando dicono che React è protetto da XSS?

Question 1

L'ho letto nel tutorial di React. Cosa significa questo?

React è sicuro. Non stiamo generando stringhe HTML, quindi la protezione XSS è l'impostazione predefinita.

Come funzionano gli attacchi XSS se React è sicuro? Come si ottiene questa sicurezza?

Question 2

ReactJS è abbastanza sicuro in base alla progettazione da allora

Le variabili stringa nelle viste vengono sottoposte a escape automaticamente
Con JSX si passa una funzione come gestore di eventi, piuttosto che una stringa che può contenere codice dannoso

quindi un attacco tipico come questo non funzionerà

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>

Espandi lo snippet

ma ...

❗❗❗Warning

Ci sono ancora alcuni vettori di attacco XSS che devi gestire da solo in React!

1. XSS tramite `dangerouslySetInnerHTML`

Quando lo usi dangerouslySetInnerHTMLdevi assicurarti che il contenuto non contenga alcun javascript. React non può fare niente qui per te.

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>

Espandi lo snippet

2. XSS tramite l'attributo a.href

Esempio 1: utilizzo di javascript: code

Fare clic su "Esegui snippet di codice" -> "Il mio sito Web" per vedere il risultato

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>

Espandi lo snippet

Esempio 2: utilizzo di dati codificati in base64:

Fare clic su "Esegui snippet di codice" -> "Il mio sito Web" per vedere il risultato

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>

Espandi lo snippet

3. XSS tramite oggetti di scena controllati dall'attaccante

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>

Espandi lo snippet

Qui ci sono più risorse

Question 3

React evita automaticamente le variabili per te ... Impedisce l'iniezione XSS tramite stringa HTML con JavaScript dannoso .. Naturalmente, gli input vengono disinfettati insieme a questo.

Ad esempio, diciamo che hai questa stringa

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

se provi a rendere questa stringa in react

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

vedrai letteralmente sulla pagina l'intera stringa incluso il <span>tag dell'elemento. aka nel browser vedrai<img src="javascript:alert('XSS!')" />

se visualizzi il codice sorgente html vedresti

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

Ecco qualche dettaglio in più su cosa sia un attacco XSS

React fondamentalmente lo fa in modo che tu non possa inserire markup a meno che tu non crei gli elementi tu stesso nella funzione di rendering ... detto questo hanno una funzione che consente tale rendering è chiamato dangerouslySetInnerHTML... ecco qualche dettaglio in più a riguardo

Modificare:

Poche cose da notare, ci sono modi per aggirare ciò che React sfugge. Un modo più comune è quando gli utenti definiscono gli oggetti di scena per il tuo componente. Non estendere i dati dall'input dell'utente come oggetti di scena!

Cosa significa quando dicono che React è protetto da XSS?

❗❗❗Warning

Ci sono ancora alcuni vettori di attacco XSS che devi gestire da solo in React!

1. XSS tramite dangerouslySetInnerHTML

2. XSS tramite l'attributo a.href

3. XSS tramite oggetti di scena controllati dall'attaccante

Modificare:

1. XSS tramite `dangerouslySetInnerHTML`