在不使用 bypassSecurityTrustUrl 的情况下使用 Angular 的 DomSanitizer 清理动态 URL

Question

使用 Angular 13，我有一个加载到 iframe 的 SRC 属性中的动态 URL。我需要事先清理这个 url （当然）。我尝试了以下（伪代码）：

DomSanitizer.sanitize(SecurityContext.RESOURCE_URL, 'myurl')

这会引发以下错误：

unsafe value used in a resource URL context

我无法使用

bypassSecurityTrustResourceUrl

，因为 SonarQube 将其标记为 Security Hotspot。这就是我要解决的问题。

我在这里找到的大多数示例都推荐使用旁路，我想知道是否有办法不这样做。

提前致谢

Answer 1

使用

SecurityContext.URL

代替。

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    console.log(
      this.sanitizer.sanitize(
        SecurityContext.URL,
        "javascript:alert('You've been hacked!');"
      )
    );
  }

输出：

警告：清理不安全的 URL 值 javascript:alert('You've been hacked!'); （参见https://g.co/ng/security#xss）

unsafe:javascript:alert('你被黑了！');

示例：https://stackblitz.com/edit/angular-qymboh?file=src/main.ts

---

来自https://angular.io/guide/security#sanitization-and-security-contexts：

Angular 定义了以下安全上下文：

安全上下文	详情
HTML	在将值解释为 HTML 时使用，例如，绑定到 innerHtml 时。
风格	在将 CSS 绑定到样式属性时使用。
网址	用于URL属性，例如 <a href> .
资源网址	作为代码加载和执行的 URL，例如，在 <script src> .

Angular 清理 HTML、样式和 URL 的不受信任的值。清理资源 URL 是不可能的，因为它们包含任意代码。在开发模式下，Angular 在清理期间必须更改值时会打印控制台警告。

Answer 2

SecurityContext.RESOURCE_URL

在输入不安全时抛出错误，这是设计使然，它表示您的应用程序中有错误，因为在这种情况下，URL 应该始终是安全的。你必须明白它为什么会抱怨，也许你的 URL 真的不安全。如果 URL 不以任何方式依赖于用户输入，那么您实际上可以使用

bypassSecurityTrustResourceUrl

.

您可以使用

SecurityContext.URL

，但它会悄无声息地截断您的 URL，可能会从 URL 中删除有价值的信息位，因为内置的消毒剂相对笨拙。

您可以使用像

DOMPurify

这样更智能的第三方消毒剂。