Question

我有一个用Angular 5编写的CMS，其中成员可以添加包含链接的文本。问题是当内容呈现时：

<div [innerHTML]="model.content"></div>

然后链接呈现为

unsafe:\"http://www.example.com\"

我收到了这个警告：

WARNING: sanitizing unsafe URL value \"https://www.example.com/\" (see http://g.co/ng/security#xss)

如何禁用此功能？我已经看到类似的问题，要求每个URL都是特别安全的，但我不知道将要输入什么URL。

由于它是一个非常小的用户群并通过成员资格进行分区，因此我不希望拥有这种额外的安全级别。

Answer 1

您应该将DomSanitizer注入您的组件和byPassSecurity控件。

@Component({
   selector: 'my-comp',
   template: `
       <div [innerHTML]="url"></div>
   `
})
export class MyComponent {

   url;
   content;
   constructor(private sanitizer: DomSanitizer) {}

   ngOnInit() {
       this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.content);
   }

}

有关详细信息，请check the docs

Answer 2

您可以创建一个管道，以便在html中的任何位置重复使用它：

@Pipe({name: 'trust'})
export class TrustPipe implements PipeTransform {
   constructor(sanitizer: DomSanitizer) {}
   transform(value) {
     return this.sanitizer.bypassSecurityTrustHTML(value);
   }
}

然后在你的html中使用它：

<div [innerHTML]="model.content | trust"></div>

绕过Angular不安全的URL

2 个答案: