Qu'est-ce que ça veut dire quand ils disent que React est protégé par XSS?
2 réponses
réagir automatiquement échappe à tout pour vous.
donc par exemple, disons que vous avez cette chaîne
var htmlString = '<img src="javascript:alert('XSS!')" />';
si vous essayez de vous rendre dans cette chaîne de réagir
render() {
return (
<div>{htmlString}</div>
);
}
vous verrez littéralement sur la page la chaîne entière incluant le <span> balise de l'élément. aka dans le navigateur, vous verrez <img src="javascript:alert('XSS!')" />
si vous visualisez le html source, vous verriez
<span>"<img src="javascript:alert('XSS!')" />"</span>
voici plus de détails sur ce qu'est une attaque XSS
React fait en gros que vous ne pouvez pas insérer de markup à moins de créer vous-même les éléments dans la fonction de rendu... cela étant dit, ils ont une fonction qui permet un tel rendu son appelé dangerouslySetInnerHTML... voici plus de détails à ce sujet
ReactJS est tout à fait sûr, étant donné que
- les variables String dans les vues sont échappées automatiquement
- avec JSX vous passez une fonction comme gestionnaire d'événements, plutôt qu'une chaîne qui peut contenir du code malveillant
donc une attaque typique comme cela ne fonctionne 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 ...
փ փ avertissement փ!--29-->
Il y a encore quelques attaques XSS vecteurs dont vous avez besoin pour vous gérer dans React!
1. XSS via dangerouslySetInnerHTML
dangerouslySetInnerHTML quand vous utilisez dangerouslySetInnerHTML vous devez vous assurer que le contenu ne contient pas de javascript. React ne peut rien faire pour toi.
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 via un.attribut href
exemple 1: utiliser javascript: code
cliquez sur "Run code snippet" - > "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 codées par base64:
cliquez sur "Run code snippet" - > "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>3. XSS via attaker controlled props
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