Ich habe dies im React-Tutorial gelesen. Was bedeutet das?
Reaktion ist sicher. Wir generieren keine HTML-Zeichenfolgen, daher ist der XSS-Schutz die Standardeinstellung.
Wie funktionieren XSS-Angriffe, wenn React sicher ist? Wie wird diese Sicherheit erreicht?
Antworten:
ReactJS ist seitdem von Natur aus ziemlich sicher
Ein typischer Angriff wie dieser funktioniert also nicht
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>aber ...
dangerouslySetInnerHTMLWenn Sie verwenden dangerouslySetInnerHTML, müssen Sie sicherstellen, dass der Inhalt kein Javascript enthält. React kann hier nichts für dich tun.
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>Beispiel 1: Verwenden von Javascript: Code
Klicken Sie auf "Code-Snippet ausführen" -> "Meine Website", um das Ergebnis anzuzeigen
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>Beispiel 2: Verwenden von base64-codierten Daten:
Klicken Sie auf "Code-Snippet ausführen" -> "Meine Website", um das Ergebnis anzuzeigen
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>Hier finden Sie weitere Ressourcen
React entgeht automatisch Variablen für Sie ... Es verhindert die XSS-Injektion über String-HTML mit bösartigem Javascript. Natürlich werden Eingaben zusammen mit diesem bereinigt.
Nehmen wir zum Beispiel an, Sie haben diese Zeichenfolge
var htmlString = '<img src="javascript:alert('XSS!')" />';Wenn Sie versuchen, diese Zeichenfolge in Reaktion zu rendern
render() {
return (
<div>{htmlString}</div>
);
}Sie sehen buchstäblich auf der Seite die gesamte Zeichenfolge einschließlich des <span>Element-Tags. aka im Browser sehen Sie<img src="javascript:alert('XSS!')" />
Wenn Sie die Quell-HTML anzeigen, würden Sie sehen
<span>"<img src="javascript:alert('XSS!')" />"</span>Hier finden Sie weitere Informationen zu einem XSS-Angriff
Reagieren im Grunde macht es so dass Sie nicht einfügen Markup können , wenn Sie die Elemente sich in der Funktion machen schaffen ... sagte , dass Wesen sie habe eine Funktion , die so erlaubt Rendering seine genannte dangerouslySetInnerHTML... hier ist etwas ausführlicher darüber
Nur wenige Dinge zu beachten, es gibt Möglichkeiten, um zu umgehen, was React entgeht. Eine weitere Möglichkeit besteht darin, dass Benutzer Requisiten für Ihre Komponente definieren. Erweitern Sie keine Daten aus Benutzereingaben als Requisiten!