J'ai lu ceci sur le tutoriel React. Qu'est-ce que ça veut dire?
React est sûr. Nous ne générons pas de chaînes HTML, la protection XSS est donc la valeur par défaut.
Comment fonctionnent les attaques XSS si React est sûr? Comment cette sécurité est-elle assurée?
Réponses:
ReactJS est assez sûr de par sa conception depuis
donc une attaque typique comme celle-ci ne fonctionnera pas
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>mais ...
dangerouslySetInnerHTMLLorsque vous utilisez, dangerouslySetInnerHTMLvous devez vous assurer que le contenu ne contient pas de javascript. React ne peut rien faire ici pour vous.
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>Exemple 1: utilisation de javascript: code
Cliquez sur "Exécuter l'extrait de code" -> "Mon site Web" pour voir le résultat
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>Exemple 2: Utilisation de données encodées en base64:
Cliquez sur "Exécuter l'extrait de code" -> "Mon site Web" pour voir le résultat
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>Voici plus de ressources
React échappe automatiquement les variables pour vous ... Il empêche l'injection XSS via une chaîne HTML avec Javascript malveillant .. Naturellement, les entrées sont nettoyées avec cela.
Par exemple, disons que vous avez cette chaîne
var htmlString = '<img src="javascript:alert('XSS!')" />';si vous essayez de rendre cette chaîne en react
render() {
return (
<div>{htmlString}</div>
);
}
vous verrez littéralement sur la page toute la chaîne, y compris la <span>balise d'élément. aka dans le navigateur, vous verrez<img src="javascript:alert('XSS!')" />
si vous affichez le code source html, vous verriez
<span>"<img src="javascript:alert('XSS!')" />"</span>Voici quelques détails supplémentaires sur ce qu'est une attaque XSS
React fait que vous ne pouvez pas insérer de balisage à moins que vous ne créiez les éléments vous-même dans la fonction de rendu ... cela étant dit, ils ont une fonction qui permet un tel rendu, c'est appelé dangerouslySetInnerHTML... voici plus de détails à ce sujet
Peu de choses à noter, il existe des moyens de contourner ce que React échappe. Une méthode plus courante consiste à définir des accessoires pour votre composant. N'étendez pas les données de l'entrée utilisateur comme accessoires!