How to avoid adding prefix “unsafe” to link by Ang

问题:

This question already has answers here:

In RC.1 some styles can't be added using binding syntax (2 answers)

Closed 3 years ago.

Using Angular2, is there a setting to avoid adding prefix “unsafe:” to links. I need to set links for protocol which is not whitelisted by default in Angular2, but is needed for our internal applicaion, so result is invalid link:

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

In older Angular there was compileProvider.aHrefSanitizationWhitelist, but I cannot find something similar in Angular2.

回答1:

Use the DomSanitizer:

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

or create a method to return the sanitized url:

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

and then in your template:

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

Demo Plunk

回答2:

Another way, you can create a pipe service to change unsafe url to safe url, so no need to rewrite the code in all components. Create a pipe service called 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);
  }
}

Then use in your view.

Example :<a href="'Notes://MYSERVER/C1256D3B004057E8' | safeUrl"></a>

NOTE : Don't forget to inject this pipe service in your app.module.ts

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

And in your node module declarations section.

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