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

Question

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

Its working but throwing error at the same time which is not wanted — Bhimashankar Mantur, Nov 07 '17 at 08:02

score 13 · Answer 1 · edited Nov 25 '18 at 15:21

13

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); 
}

edited Nov 25 '18 at 15:21

LundinCast

9,412
4
36
48

answered Nov 25 '18 at 07:08

Ramesh KC

589
4
10

6

While this code may answer the question, providing additional context regarding *how* and *why* it solves the problem would improve the answer's long-term value. – Alexander Nov 25 '18 at 11:32

score 2 · Answer 2 · answered Nov 07 '17 at 07:51

2

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);

answered Nov 07 '17 at 07:51

marvstar

417
5
21

even though they question didn't state they were dealing with a base64 string, I know I was... so I like that you added `'data:image/png;base64,'` in the argument of bypassSecurityTrustUrl. – sirbradwick Apr 28 '23 at 12:19

score 0 · Answer 3 · answered Nov 07 '17 at 07:53

0

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.

answered Nov 07 '17 at 07:53

user1533603

329
1
4

I changed to a different name, it's working but throwing the same error – Bhimashankar Mantur Nov 07 '17 at 08:14
Maybe you should return `originalUrl` from a function. look in this [answer](https://stackoverflow.com/a/38269951/1533603) – user1533603 Nov 07 '17 at 09:17

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

3 Answers3