iframe src中使用的角度消毒URL

Question

我正在尝试构建一个URL，以将其传递到IFRAME的SRC属性中。但是我总是会得到异常在资源URL上下文中使用的不安全值，我正在努力理解如何正确消毒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());
   }
}

我的模板：＆lt; iframe [src] =“ url” width =“ 100％” height =“ 100％”＆gt;＆lt;/iframe＆gt;

在检查消毒值时，它只是一个字符串或相同的URL。但是模板渲染触发了例外。消毒功能不应该返回安全的URL以避免此例外吗？还是在sanitize之后，我应该拥有bypasssecuritytrustresourceurl吗？

TX寻求帮助

Answer 1

假设我们将无效的URL传递到直接绕过SecurityTrustResourceurl，它将假定我们通过有效的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.

消毒方法将添加额外的支票以使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);

在将其传递给旁路苏联troustresourceurl方法之前，最好使用Sanitize URL来确保URL安全。

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


    

Answer 2

我可以使它与domsanitizer.bypasssecuritytrustresourceurl（mycustomurlasstring）一起使用，但是据我了解，通过这样做，我只是禁用了安全性。即使是由于没有使用任何用户输入来构建URL，我也可能会接受它，我想了解消毒的工作方式。

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

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

确保在那里没有疯狂的东西，但是在这种情况下，将其标记为信任不是不好的做法。

消毒功能不应该返回安全的URL以避免此例外吗？

至于这一点，我期望与您相同，但认为它可能不会或无法检查URL是否安全或不检查，所以除非您绕过它，否则它总是会抛出该异常。