How to avoid adding prefix “unsafe” to link by Angular2? [duplicate]

Answer 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

Answer 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],...});