我在 React 教程上读到了这篇文章。这是什么意思？
React is safe. We are not generating HTML strings so XSS protection is the default.
如果 React 是安全的，XSS 攻击如何发挥作用？这种安全性是如何实现的？
最佳答案
ReactJS 在设计上就非常安全
- View 中的字符串变量会自动转义
- 使用 JSX，您可以传递一个函数作为事件处理程序，而不是传递可能包含恶意代码的字符串
所以像这样的典型攻击是行不通的
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>但是...
❗❗❗警告❗❗❗
React 中仍然存在一些 XSS 攻击媒介，您需要自行处理!
1。通过 dangerouslySetInnerHTML
进行 XSS
当您使用dangerouslySetInnerHTML时，您需要确保内容不包含任何javascript。 React 不能为你做任何事。
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。通过 a.href 属性进行 XSS
示例 1:使用 javascript:code
点击“运行代码片段”->“我的网站”查看结果
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>示例 2:使用 base64 编码数据:
点击“运行代码片段”->“我的网站”查看结果
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。通过攻击者控制的 props 进行 XSS
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>这里有更多资源
关于reactjs - 他们说 React 受 XSS 保护是什么意思？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33644499/