ReactJS es bastante seguro por diseño ya que
por lo que un ataque típico como este no funcionará
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>pero ...
dangerouslySetInnerHTMLCuando lo use dangerouslySetInnerHTML, debe asegurarse de que el contenido no contenga JavaScript. React no puede hacer nada por ti.
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>Ejemplo 1: uso de javascript: código
Haga clic en "Ejecutar fragmento de código" -> "Mi sitio web" para ver el resultado.
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>Ejemplo 2: uso de datos codificados en base64:
Haga clic en "Ejecutar fragmento de código" -> "Mi sitio web" para ver el resultado.
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>Aquí hay más recursos
React escapa automáticamente de las variables por usted ... Evita la inyección de XSS a través de HTML de cadena con JavaScript malicioso. Naturalmente, las entradas se desinfectan junto con esto.
Por ejemplo, digamos que tienes esta cadena
si intentas renderizar esta cadena en reaccionar
literalmente verá en la página la cadena completa, incluida la
<span>etiqueta del elemento. también conocido como en el navegador verá<img src="javascript:alert('XSS!')" />si ve el código fuente html, verá
Aquí hay más detalles sobre qué es un ataque XSS
React básicamente lo hace para que no pueda insertar marcado a menos que cree los elementos usted mismo en la función de renderizado ... dicho esto, tienen una función que permite tal renderizado, se llama
dangerouslySetInnerHTML... aquí hay más detalles al respectoEditar:
Pocas cosas a tener en cuenta, hay formas de evitar lo que React escapa. Una forma más común es cuando los usuarios definen accesorios para su componente. ¡No extienda ningún dato de la entrada del usuario como accesorios!
fuente