CODEWITHSUNDEEP
angular
Bhimashankar Mantur
Bhimashankar Mantur

Reputation: 199

ERROR Error: unsafe value used in a resource URL context in angular 2

I have the following HTML code

<iframe #originalUrl [hidden]="!showOriginalDoc"  [src]="originalUrl"><span *ngIf="originalUrl===''">Original URL Not Available</span></iframe>

following angular code

 if(data.originalResearch.originalUrl===null)
  this.originalUrl='';
 else
  this.originalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(data.originalResearch.originalUrl);

the above code still throws the following error :

CuratorModalBodyComponent.html:123 ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) at DomSanitizerImpl.vendor../node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DomSanitizerImpl.sanitize (platform-browser.es5.js?ffb0:3992) at setElementProperty (core.es5.js?0445:9398) at checkAndUpdateElementValue (core.es5.js?0445:9318) at checkAndUpdateElementInline (core.es5.js?0445:9252) at checkAndUpdateNodeInline (core.es5.js?0445:12357) at checkAndUpdateNode (core.es5.js?0445:12303) at debugCheckAndUpdateNode (core.es5.js?0445:13167) at debugCheckRenderNodeFn (core.es5.js?0445:13146)

I am Using angular 4.4.1

Upvotes: 3

Views: 19815

Answers (3)

Ramesh KC
Ramesh KC

Reputation: 589

Use iframe in this format:

<ifrmae [src]="variable_name">

In ts file:

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

constructor(private dom:DomSanitizer)
{ 
    variable_name=this.dom.bypassSecurityTrustResourceUrl(url); 
}

Upvotes: 13

user1533603
user1533603

Reputation: 329

There is a problem in your code. Your gave local template name to iframe and you are using the same name for property binding. Local template name have higher precedence so it [src]="originalUrl" will refer to iframe. You should change #originalUrl or remove it completely if it's not in use anywhere.

Upvotes: 0

marvstar
marvstar

Reputation: 417

It seems like you need to use the DomSanitizer to sanitize the src.

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

constructor(private _sanitizationService: DomSanitizer){}

Wherever you need it pass the Src data to this funktion:

var imgSrc = this._sanitizationService.bypassSecurityTrustUrl('data:image/png;base64,' + yourSrc);

Upvotes: 2

Related Questions