Unsafe Value Used In A Resource URL Context (iframe)

Trying to pass value as iframe url from local db and and im getting error message: Unsafe value used in a resource URL context. i'm trying to display an array of printers ip so i

Solution 1:

Using a Pipe is better.

Create a Pipe: In the app.component.ts (The main component that loads first)*

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

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Declare the Pipe: After creating the pipe

@NgModule({
  imports: [ ... ],
  declarations: [ ..., SafePipe ],
  bootstrap: [ App ]
})

Usage: You can use this with the pipe operator and the pipe name. Example:

 <iframe [src]="your_url_here | safe" id="inneriframe" scrolling="no"  ></iframe>

Using this method, you will get a sanitized URL without rewriting the code every time you need it in some other components..

Solution 2:

[src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" solved it for me

Solution 3:

You may use Angular DomSanitizer from @angular/platform-browser

Refer Angular Guide for more info

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

@Component({
  templateUrl: 'temp.html'
})
export class AppComponent {
yourUrl : '';
  constructor(private sanitizer : DomSanitizationService) {  
  }

  getSanitizedURL() {
    return this.sanitizer.bypassSecurityTrustUrl(yourUrl);
  }
}

HTML :

   <div id="outerdiv">
      <iframe src="getSanitizedURL()" id="inneriframe" scrolling="no"></iframe>
    </div>