Angular 6 sanitize local drive url

Question

I have tried using DomSanitizer methods to sanitize the following type of url with no success

C:\path\to\executable

Is there any way to sanitize this url to be used as href value?

Also I am binding the value with [] notation so I am sure it is not interpolated as string.

Loupgarou

can you post some sample code ? – Geronimo

Answer 1

First the url should be C:/path/to/executable not the one C:\path\to\executable

According to http://www.ietf.org/rfc/rfc2396.txt backslash characters are not valid characters in URLs

Most of the browsers convert the backslash into forward slashes. Technically, if you required backslash characters in your URL you need to encode them using %5C.

Now about the sanitization

You could just bind a function that returns safe url using bypassSecurityTrustUrl() in angular DomSanitizer

app.component.html

<a [href]="getlink()"> link  </a>

app.component.ts

import { DomSanitizer} from '@angular/platform-browser';


export class AppComponent  {
  constructor(private sanitizer:DomSanitizer) {    }
  name = 'Angular';

  getlink():SafeUrl {
      return this.sanitizer.bypassSecurityTrustUrl("C:/path/to/executable");
  }
}

Recommended

Using Pipe: You can create a pipe to disable Angular’s built-in sanitization

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

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

import { SafePipe } from './shared/safe-url.pipe';


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

Now you can use the pipe to disable the built-in sanitization

 <a [href]="'C:/path/to/executable' | safe: 'url'"> link </a>

I would recommend using pipe as the code is reusable , also here is the working demo : https://stackblitz.com/edit/angular-vxcvfr

Geronimo

can you specify any details like error message shown or purpose of the link , is you are trying to download file adding file:///C:/path/to/executable may not help as Chrome won't download local files using the file:/// protocol anyway (giving you a Not allowed to load local resource error) . You may check following article : #18246553 – Geronimo

I am trying to run the file via url. I'm creating some kind of internal dashboard app, and the current system, due to ancient reasons, designed to work using local files. Most of the files are located in a network drive, which works in internet explorer, chrome dependency does not really effect me as most of my users will use IE 11/Edge. As of error message there is none, it just does not lunch the executable. – Loupgarou

Answer 2

I have used it like this:
In ts file.

import { DomSanitizer } from '@angular/platform-browser';
constructor(
        public domSanitizer: DomSanitizer
    ) { }

in HTML file

<img [src]="domSanitizer.bypassSecurityTrustUrl(pazar.imagedata)" class="zoom">

Raffin