reactjs - 我什么时候可以认为危险地SetInnerHTML()的使用是安全的?

标签 reactjs

阅读scary doc ,我知道如果我向angerlySetInnerHTML()提供了错误的参数,我的裤子就会因XSS而垮掉。我必须在这个函数调用的上游做什么才能确保我可以安全地使用它?查找并从用户输入中删除 <script> 标签?还有什么?

最佳答案

警告:我不是安全专家;以下总结了我作为一个工作外行积累的最佳理解。

确保“危险”内部 HTML 安全的最佳方法是确保仅将其设置为您自己生成的 HTML。换句话说,您永远不会显示任何来自外部来源的内容。这可能听起来太严格,但有一个解决方法:如果您想在危险的 HTML 中包含“受污染”的内容,您可以解析受污染的内容并重新生成它。基本思想是您的解析器仅识别合法输入,并忽略其他所有内容。然后它接受解析的输入,并生成安全的输出。

例如,假设我们有以下规则:

  • 字符串可以是 A-Z、a-z、0-9 和/或标点符号句点、逗号、分号、冒号、问号和感叹号的任意序列。
  • 样式字符串类似于 [b]粗体[/b]、[u]下划线[/u]等。
  • 其他所有内容都会被忽略。

请注意,您没有将脚本标记之类的内容列入黑名单,因为您可能不知道需要列入黑名单的所有内容。相反,您将某些您知道安全的特定事物列入白名单,并忽略其他所有事物。解析完输入后,您将获得已知安全字符串和样式字符串的列表,并且生成带有嵌入式样式标记的安全 HTML 输出相对简单。

链接和图像标签更难以安全处理,因为任何链接/图像都可能导致恶意软件,或者导致看似无害的网站在一天左右后重定向到恶意软件。据我所知,确保图像安全的最佳方法是要求将它们上传到配备病毒扫描程序的服务器(这也不是 100% 万无一失)。对于链接,我能想到的最好方法是确保实际的链接文本与您要链接的文本一起显示。但我仍然会使用相同的方法:编写一个解析器,它知道如何解析安全 URL(对于链接或图像),并且不知道如何解析不安全 URL,然后从解析的数据重新生成链接/图像。这仍然比仅仅显示样式文本风险大,但如果您需要链接/图像,这是我所知道的最好方法。

关于reactjs - 我什么时候可以认为危险地SetInnerHTML()的使用是安全的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35800607/

相关文章:

javascript - onbeforeunload 事件不会在浏览器按钮单击时触发,但在 CMD+R/F5 上工作

javascript - Ant Design SSR 不匹配问题,服务端呈现中文,客户端呈现英文

javascript - 引用文档如何。在 React 组件中工作?

javascript - 如何摆脱此 react 的 "unique key"错误

javascript - 为大于零的项目创建对象数组

javascript - React-Native - 如何替换 React-Native 核心组件的功能

javascript - 在应用程序外部调用路由更改(react-router)

html - 如何在 css 中获得 5 x 5 的网格?

laravel - 您将 CSRF token 放在 Relay/GraphQL 中的什么位置?

svg - 根据我导入的位置,在 Webpack 中使用不同的加载器