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

Question

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

我可以让它与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 函数不应该返回一个 Safe Url 来避免此异常吗？或者我应该有 bypassSecurityTrustResourceUrl无论如何，在sanitize之后？

发送帮助

Answer 1

假设我们直接将无效的 URL 传递给bypassSecurityTrustResourceUrl，它将假设我们传递有效的 URL 并返回 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);