如何以角度清理 html 以避免 XSS 漏洞答案

【问题标题】：How to sanitize html in angular for avoiding XSS vulnerabilities如何以角度清理 html 以避免 XSS 漏洞
【发布时间】：2021-10-28 13:20:26
【问题描述】：

在访问 API 调用和在 HTML 页面中访问时获取 XSS 漏洞。也尝试使用带有 url 和 Sanitized html 的 DOM sanitizer，仍然遇到 XSS 跨站点脚本问题。尝试以下方式。如果有任何问题，请纠正我并提出解决方案。

const dataUrl = this.domSanitizer.sanitize(
      SecurityContext.RESOURCE_URL,
      this.domSanitizer.bypassSecurityTrustResourceUrl(
        'https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json'
      )
    );

html:

   <td [innerHTML]="person.id | sanitizeHtml"></td>
   <td [innerHTML]="person.firstName | sanitizeHtml"></td>
   <td [innerHTML]="person.lastName | sanitizeHtml"></td>

Stackblitz

【问题讨论】：

您发布的打字稿部分是您在 html 模板中使用的 sanitizeHtml 管道的一部分吗？我不清楚这些代码 sn-ps 是如何精确连接的，以及 person 对象是什么样的。
您能分享一下您遇到的确切错误吗？

标签： javascript angular xss angular-datatables angular-dom-sanitizer

【解决方案1】：

你放在这里的是 HTML 类型的字符串吗？如果它们是不包含 HTML 内容的普通字符串，那么您应该使用带有花括号的普通语法。

stackblitz

<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>

【讨论】：

DrakeAnglin 我们使用了常规插值概念，但我们遇到了跨站点脚本错误，因此需要清理 url 和 html 代码。
这可能是您获取数据的方式。您是否使用 HttpClient 来获取 JSON？我在答案中添加了堆栈闪电战，但没有收到任何错误。

【解决方案2】：

您可以使用innerText 而不是innerHTML 来解决这个问题:)。

您的 HTML 将如下所示：

   <td [innerText]="person.id"></td>
   <td [innerText]="person.firstName"></td>
   <td [innerText]="person.lastName"></td>

【讨论】：

如果你打算这样做，你可以使用插值语法{{ person.id }}，这可行，但我不知道你为什么要使用这种方法而不是默认插值。