Question

使用Angular2，是否有设置以避免在链接中添加前缀“ unsafe：”。我需要设置协议的链接，该协议在Angular2中默认不列入白名单，但是我们的内部应用需要，因此结果是无效的链接：

<a href="unsafe:Notes://MYSERVER/C1256D3B004057E8" ..

在较老的Angular中有compileProvider.aHrefSanitizationWhitelist，但我在Angular2中找不到类似的东西。

Answer 1

使用DomSanitizer：

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}
...
let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl('Notes://MYSERVER/C1256D3B004057E8');

或创建一个返回已清理网址的方法：

sanitize(url:string){
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

然后在你的模板中：

<a [href]="sanitize('Notes://MYSERVER/C1256D3B004057E8')" ..

Demo Plunk

Answer 2

另一种方法是，您可以创建管道服务以将不安全的URL更改为安全URL，因此无需重写所有组件中的代码。创建名为safe-url.pipe.ts的管道服务。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

然后在你的视图中使用。

示例：<a href="'Notes://MYSERVER/C1256D3B004057E8' | safeUrl"></a>

注意：不要忘记在app.module.ts中注入此管道服务

import { SafeUrlPipe } from './shared/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.

在节点模块声明部分。

@NgModule({ declarations: [SafeUrlPipe],...});

如何避免添加前缀“unsafe”链接Angular2？

2 个答案: