Eu li isso no tutorial React. O que isto significa?
Reagir é seguro. Não estamos gerando strings HTML, então a proteção XSS é o padrão.
Como funcionam os ataques XSS se o React for seguro? Como essa segurança é alcançada?
109
ReactJS é bastante seguro por design, uma vez que
então um ataque típico como este não 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>mas ...
dangerouslySetInnerHTMLQuando você usa, dangerouslySetInnerHTMLvocê precisa se certificar de que o conteúdo não contém nenhum javascript. React não pode fazer nada aqui por você.
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>Exemplo 1: usando javascript: code
Clique em "Executar snippet de código" -> "Meu site" para ver o 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>Exemplo 2: usando dados codificados em base64:
Clique em "Executar snippet de código" -> "Meu site" para ver o 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>Aqui estão mais recursos
O React escapa automaticamente as variáveis para você ... Impede a injeção de XSS via string HTML com Javascript malicioso. Naturalmente, as entradas são higienizadas junto com isso.
Por exemplo, digamos que você tenha esta string
se você tentar renderizar esta string em reação
você verá literalmente na página toda a string, incluindo o
<span>tag elemento. também conhecido como no navegador, você verá<img src="javascript:alert('XSS!')" />se você visualizar o código HTML, verá
Aqui estão mais alguns detalhes sobre o que é um ataque XSS
O React basicamente faz com que você não possa inserir marcação a menos que crie você mesmo os elementos na função de renderização ... dito que eles têm uma função que permite tal renderização é chamada
dangerouslySetInnerHTML... aqui estão mais alguns detalhes sobre issoEditar:
Poucas coisas a serem observadas, há maneiras de contornar o que o React escapa. Outra maneira comum é quando os usuários definem adereços para seu componente. Não estenda nenhum dado da entrada do usuário como suporte!
fonte