绕过 Angular 不安全的 URL

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

您可以创建一个管道以在您的 html 中的任何地方重复使用它：

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

然后在您的 html 中使用它：

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

Answer 2

您应该将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);
   }

}

有关更多信息，请查看文档