100

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

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

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Veljac
  • 1,144
  • 2
  • 7
  • 8

2 Answers2

201

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

Abdulrahman Alsoghayer
  • 16,462
  • 7
  • 51
  • 56
  • 1
    Veri precise and complete instruction. Works perfectly. I wonder where you found this.... :) – Veljac May 25 '16 at 18:24
  • Currently it's in the very top of [angular2 change log page](https://github.com/angular/angular/blob/master/CHANGELOG.md). It's written for style sanitizing, but once you have `DomSanitizationService` the rest is just a matter of a ctrl+space :D – Abdulrahman Alsoghayer May 25 '16 at 18:37
  • Before I saw your demo, I was failing hard to see that I missed some key imports: `@angular/platform-browser` and `@angular/platform-browser-dynamic`. There was no way my URLs were going without `unsafe:` in their front. – gustavohenke Jul 05 '16 at 00:38
  • @gustavohenke what did you import using `@angular/platform-browser-dynamic` when the DomSanitize is in `@angular/platform-browser` cuz I'm still having trouble? – Paul G Jun 02 '17 at 21:22
  • @PaulG, this comment is from almost a year ago, from the times that Angular 2 wasn't even in final version, so things probably changed - and I'm not an Angular user anymore. – gustavohenke Jun 03 '17 at 07:15
  • 6
    make sure to use property binding `` and not insertion `` – r3mark Jul 04 '17 at 01:46
  • 2
    Or because we're in JavaScript, simply: `sanitize = this.sanitizer.bypassSecurityTrustUrl` will work – A T Oct 09 '17 at 00:42
  • Hey , I used your code but whenever i clicked on that link it automatically logged me out from my site . Any solution ?? – Aarsh Feb 21 '18 at 05:10
  • 1
    make sure an url is safe before using `bypassSecurityTrustUrl` – Dmitrij Kuba Dec 19 '19 at 17:01
  • You can also invoke DomSanitizer straight from a template expression (Angular 8): ``` Go to URL ``` – Yann Aug 08 '20 at 03:51
  • Please do not execute functions directly in templates, in Angular pipes are used for things like that so Change Detection can optimize the output. – muuvmuuv Aug 03 '21 at 09:37
55

Another way is you can create a pipe service to change an unsafe URL to a safe URL, so there isn't any 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 it 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 file:

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

@NgModule({ declarations: [SafeUrlPipe],...});
muuvmuuv
  • 901
  • 2
  • 13
  • 39
Amruth
  • 5,792
  • 2
  • 28
  • 41