React.js 允许在 href 中使用 XSS？答案

【问题标题】：React.js allows XSS in href?React.js 允许在 href 中使用 XSS？
【发布时间】：2018-04-01 15:00:08
【问题描述】：

href 标记中的用户生成链接可能如下所示：

javascript:(() => {alert('MALICIOUS CODE running on your browser')})();

我刚刚使用未在服务器上检查的页面上的输入字段注入的 URL 以 http / https 开头。在反应渲染的页面上，我稍后可以单击链接，瞧我的代码正在运行。

为什么它会起作用，当它经常被声明时：

react 会自动为您转义一切。 (What does it mean when they say React is XSS protected?)

【问题讨论】：

“在一个不检查服务器的页面上” - 你的问题。
那么这到底是什么意思：“React 受 XSS 保护？”... XSS 通常不是在输出也就是渲染期间处理吗？
问题是，关于这件事的唯一来源是这个博客：medium.com/dailyjs/…。如果我的问题看起来有点粗鲁，我很抱歉，但目前我很震惊，没有其他人指出这一点。大多数资源都直截了当地说：它逃脱了 XSS，尤其是对于初学者或非安全专家来说，这有点模糊。另外，为什么这不是 SO 的问题？
您如何在 XSS 和合法用例之间划清界限？您已经接受了来自用户的有效输入并告诉 React 将其放入 href 属性中，它是有效的并且不会改变文档本身的结构 - 那么 React 为什么要停止它呢？如果您尝试设置某些内容并突破href 之类的"/><script>alert('xss')</script>，它将为您逃脱。此 PR 对此进行了一些讨论：github.com/facebook/react/pull/1461
是的，这也在这里讨论。 github.com/facebook/react/issues/3473。我只是希望能在像文档这样更显眼的地方找到它。

【解决方案1】：

当 react 文档指出 "Everything" 被转义时，它只是意味着如果你将一些子元素添加到 JSX 元素中，那么这些子元素中的 "Everything" 将被转义。

例如在：

const element = (
  <h1>
    Random text
  </h1>
);

h1 中的所有内容都将被转义，因此如果您想要显示来自输入字段的一些用户文本而不是“随机文本”，那么您是安全的，任何恶意脚本都将被转义。

警告：这并不意味着如果您使用 React，您就不必担心 XSS。

您仍然可以从该输入字段（或外部源，作为 API，转换 JSON 对象等）中获取不安全的字符串，并将其放置在元素道具上，或使用 dangerouslySetInnerHTML，或直接作为 href 放置在 html 属性上， style.. 等恶意代码运行的地方。

因此，如果您确实需要在这些道具上放置文本，您有责任在使用数据之前对其进行清理。与保存用户输入的数据时通常在服务器中执行的操作相同，必须对这些数据进行清理，以便代码不会保存在数据库中。

【讨论】：