我不明白 SafeUrl/SafeStyle 背后的概念

Question

前段时间我意识到我不能简单地将字符串传递给

<img ...>

标签或背景样式的 href 参数。仅接受

SafeUrl

和

SafeStyle

实例。坦率地说，我不明白整个概念，因为我可以使用一个简单的调用来清理任何图像 URL 或样式。如果我可以创建一个安全的管道来将安全的图像 href 从可靠的后端 API 编组到视图层，这可能是合理的。 Buf

@angular/platform-browser

API 无法注入服务，因此我应该清理控件中的 URL，因为我缺少任何可以帮助我区分源可靠性的上下文。也许我错过了什么？

Answer 1

清理意味着你明确地告诉 Angular 认为内容是安全的。 它只不过是 Angular 的一个标记，你负责并且 Angular 不需要检查内容是否存在潜在的不安全内容。仅在您知道内容来自何处且不包含有害内容的情况下“清理”内容。

这也是您需要使用属性绑定符号

[innerHTML]="sanitizedConent

来绑定它的原因，因为随着

innerHTML="{{sanitizedContent}}"

sanitizedContent

被字符串化（

toString

被调用）并且标记在过程中丢失。

Answer 2

属性绑定适用于 src 属性但不适用于 style 属性的原因是因为它们在 Angular 中具有不同的安全上下文。

src 属性被认为是受信任的 URL 上下文，这意味着 Angular 会自动sanitizes URL 并将其标记为可以在 img 元素的 src 属性中安全使用。

另一方面，style属性被认为是不受信任的上下文，这意味着 Angular 不会自动sanitize为此属性设置的任何值。相反，它希望开发人员使用 DomSanitizer 服务手动清理值。

解决这个问题的一种方法是使用 DomSanitizer 服务从 SafeUrl 对象创建一个 SafeStyle 对象，以便在 [style] attribute property bidning

绕过 DomSanitizer 服务的 SecurityTrustStyle 方法，从 SafeUrl 对象创建一个 SafeStyle 对象。