我在 React 教程中读到了这个。这是什么意思？
react是安全的。我们不会生成 HTML 字符串，因此 XSS 保护是默认设置。
如果 React 是安全的，XSS 攻击如何工作？这种安全性是如何实现的？
当他们说 React 受 XSS 保护时，这是什么意思？
IT技术
reactjs
security
xss
2021-04-07 03:47:22
2个回答
ReactJS 在设计上非常安全，因为
- 视图中的字符串变量会自动转义
- 使用 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>但 ...
❗❗❗警告❗❗❗
还有一些 XSS 攻击向量需要你在 React 中自己处理！
1. XSS 通过 dangerouslySetInnerHTML
当您使用时，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. XSS 通过攻击者控制的props
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>这里有更多资源
React 会自动为你转义变量......它可以防止通过带有恶意 Javascript 的字符串 HTML 进行 XSS 注入......自然地，输入也会随之被清理。
例如，假设你有这个字符串
var htmlString = '<img src="javascript:alert('XSS!')" />';
如果您尝试在react中呈现此字符串
render() {
return (
<div>{htmlString}</div>
);
}
你会在页面上看到整个字符串，包括<span>元素标签。又名在浏览器中你会看到<img src="javascript:alert('XSS!')" />
如果您查看源 html，您会看到
<span>"<img src="javascript:alert('XSS!')" />"</span>
React 基本上做到了，所以你不能插入标记，除非你自己在渲染函数中创建元素......据说他们确实有一个允许这种渲染的函数被调用dangerouslySetInnerHTML......这里有一些关于它的更多细节
编辑：
有几件事需要注意，有一些方法可以解决 React 逃避的问题。一种更常见的方式是当用户为你的组件定义 props 时。不要将用户输入的任何数据扩展为props！