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?
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?
Respostas:
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
var htmlString = '<img src="javascript:alert('XSS!')" />';se você tentar renderizar esta string em reação
render() {
return (
<div>{htmlString}</div>
);
}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á
<span>"<img src="javascript:alert('XSS!')" />"</span>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 isso
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!