Angular 清理 url 以便在 iframe 的 src 中使用

Question

我正在尝试构建一个 url 以将其传递到 iframe 的 src 属性中。但我总是遇到异常 unsafe value used in a resource URL context 并且我正在努力了解如何正确清理 url.

我可以让它与 domSanitizer.bypassSecurityTrustResourceUrl(myCustomUrlAsString) 一起工作，但据我所知，这样做只是禁用了安全性。即使它可以接受，因为 url 不是用任何用户输入构建的，我想了解清理是如何工作的。

我的ng组件代码：

export class MyAngularComponent implements OnInit {
   public url: SafeResourceUrl | null;
   
   constructor(private domSanitizer: DomSanitizer) {}

   ngOnInit() {
       const url = new URL('https://example.org?param1=foo');
       this.url = this.domSanitizer.sanitize(SecurityContext.URL, url.toString());
   }
}

我的模板：<iframe [src]="url" width="100%" height="100%"></iframe>

检查清理后的值时，它只是一个字符串或相同的 url。但是模板渲染触发异常。 sanitize 函数 return 不应该是一个 Safe Url 来避免这个异常吗？或者我应该在 sanitize 之后有 bypassSecurityTrustResourceUrl 吗？

Tx 寻求帮助

Answer 1

I could make it work with domSanitizer.bypassSecurityTrustResourceUrl(myCustomUrlAsString) but from what I understand, by doing so, I'm just disabling the security. Even tho it could be acceptable as the url is not constructed with any user input, I want to understand how the sanitization work.

这正是您需要做的。您将 URL 标记为可信，我认为这是因为它不是用户输入。您可以像这样包裹消毒剂：

domSanitizer.bypassSecurityTrustResourceUrl(this.domSanitizer.sanitize(SecurityContext.URL, url.toString()))

确保其中没有任何疯狂的东西，但在这种情况下将其标记为受信任的做法也不错。

Shouldn't the sanitize function return a Safe Url to avoid this exception?

至于这个，我的预期和你一样，但我想它可能不会或不能检查 URL 是否安全，所以它总是抛出异常，除非你绕过它.

Answer 2

假设我们将无效 URL 直接传递给 bypassSecurityTrustResourceUrl，它会假设我们传递有效 url 和 return SafeResourceUrl 对象而不会引发任何错误。

例子

const invalidURL = `javascript:alert('Moar XSS!')`;
const url = this.domSanitizer.sanitize(SecurityContext.URL,invalidURL);
//It will skip validing URL and will not throw any error.

sanitize 方法将添加额外的检查以使 url 可以安全使用。

const invalidURL = `javascript:alert('Moar XSS!')`;
const url = this.domSanitizer.sanitize(SecurityContext.URL, url.toString());
//This additional check will ensure the above string is invalid string.
this.domSanitizer.bypassSecurityTrustResourceUrl(url);

最好在将 URL 传递给 bypassSecurityTrustResourceUrl 方法之前使用清理 URL 以使 url 安全。

const url = this.domSanitizer.sanitize(SecurityContext.URL, url.toString());
this.url = this.domSanitizer.bypassSecurityTrustResourceUrl(url);

Angular 清理 url 以便在 iframe 的 src 中使用

Angular sanitizing url to be used in an iframe's src

iframe

sanitize

angular

angular-dom-sanitizer