跨站点脚本(XSS)攻击是一种将恶意代码注入网页然后执行的攻击。这是前端Web开发人员必须应对的最常见的网络攻击形式之一，因此了解攻击的工作原理以及如何防御它们非常重要。在本文中，我们将查看几个用React编写的代码示例，这样您也可以保护您的网站和用户。示例1：React中成功的XSS攻击对于我们所有的示例，我们将实现相同的基本功能。我们将在页面上有一个搜索框，用户可以在其中输入文本。点击“开始”按钮将模拟运行搜索，然后一些确认文本将显示在屏幕上，向用户重复他们搜索的术语。这是允许您搜索的任何站点的标准行为。很简单，对吧？会出什么问题？那么，如果我们在搜索框中输入一些HTML呢？让我们试试这个片段：现在会发生什么？哇，执行了onerror事件处理程序！那不是我们想要的！我们只是在不知不觉中执行了来自不受信任的用户输入的脚本。然后，页面上会呈现出破碎的图像，这也不是我们想要的。那么我们是怎么到这里的呢？好吧，在呈现搜索结果的JSX示例中，我们使用以下代码：Yousearchedfor:
用户输入被解析和呈现的原因是因为我们使用了dangerouslySetInnerHTML属性，这是React中的一个功能，它的工作方式类似于本机innerHTML浏览器API同样，出于这个原因使用此属性通常被认为是不安全的。示例2：React中XSS攻击失败下面我们来看一个成功防御XSS攻击的示例。这里的修复非常简单：为了安全地呈现用户输入，我们不应该使用dangerouslySetInnerHTML属性。相反，让我们像这样编写输出代码：
Yousearchedfor:{this.state.submittedSearch}我们将输入相同的输入，但这一次输出：太棒了！用户输入仅以文本形式呈现在屏幕上，威胁已解除。这真是个好消息！React默认转义呈现的内容，将所有数据视为文本字符串，这相当于使用本机textContent浏览器API。示例3：在React中清理HTML内容所以，这里的建议似乎很简单。只是不要在你的React代码中使用dangerouslySetInnerHTML，你会没事的。但是，如果您发现自己需要使用此功能怎么办？例如，您可能正在从像Drupal这样的内容管理系统(CMS)中提取内容，其中一些内容包括标记。（顺便说一句，我可能一开始就不建议在文本内容和来自CMS的翻译中包含标记，但是对于这个例子，我们假设您的评论被否决，带有标记的内容将保留。）在这种情况下，您确实想要解析HTML并将其呈现在页面上。那么你如何安全地做到这一点？答案是在呈现之前清理HTML。您无需完全转义HTML，而是通过函数运行内容以在呈现之前去除任何潜在的恶意代码。您可以使用许多优秀的HTML清理库。对于与Web安全相关的任何内容，最好不要自己编写这些内容。有些人比你聪明得多，不管是好人还是坏人，他们想的比你多，一定要用久经考验的方案。我最喜欢的消毒程序库之一叫做sanitize-html，它的功能正如其名。您从一些肮脏的HTML开始，通过一个函数运行它，并获得一些漂亮、干净、安全的HTML作为输出。如果您想要比它们的默认设置提供更多的控制，您甚至可以自定义允许的HTML标签和属性。到此为止。如何执行XSS攻击，如何防止它们，以及如何在必要时安全地解析HTML内容。快乐编程并保持安全！GitHub上提供了完整的代码示例：https://github.com/thawkin3/xss-demo
