javascript - 如何保护前端免受由 REST API 数据引起的 XSS 影响？

Question

我有以下情况:

让我们拥有一个带有 POST 端点的 REST API，例如:POST /users 。然后我将以下请求正文发送到此端点:

{
  "data": {
    "firstname": "<script>alert('John')</script>",
    "lastname": "<script>alert('Doe')</script>"
  }
}

然后，这些数据将保存到 users SQL 表的 firstname 和 lastname 列中。

现在我有一个简单的 PHP Web 应用程序(一个经典的、非单页的、服务器端渲染的 PHP Web 应用程序)，它也可以访问此 users 表。现在，当他取出上面插入的 firstname 和 lastname 并将它们呈现到 HTML View 时，<script>标签也会被渲染，<script>之间的代码标签将在浏览器中运行，因此将显示警报。显然，我不希望这样，因为这是一个 XSS 漏洞。问题是，避免此漏洞的正确方法是什么:

1. 清理后端的 POST 请求 - 因此转义 <script>在数据保存到数据库之前从数据中提取标签

或

不要在后端清理 POST 请求 - 因此请使用 <script> 保存数据标签按原样添加到数据库。然后当PHP webapp从DB加载数据时，他应该转义<script>在将数据呈现到 HTML View 之前标记。

在我看来，第二种方法是正确的方法，因为 XSS 仅是前端的问题，但是，REST API 端点也可以从非前端应用程序调用，其中通过转义来避免 XSS 漏洞<script>标签无关紧要。也许，某些服务需要从后端获取完整的 HTML 代码，而不仅仅是其转义版本。但你觉得呢？

非常感谢!

Answer 1

你是对的，通常你会想要:

1. 存储前验证传入数据(例如，这是真实的电子邮件地址吗？)
2. 在输出之前转义

转义应该总是发生在之前，因为您不知道在 INSERT 语句中应该如何转义它。也许您的数据仅以 HTML 形式出现，但稍后您可能还希望相同的数据以 .csv 导出形式出现。 JSON 文件、HTTP header 、URL。每种格式都有自己的转义规则。