Inline js with Iframe src not working in IE11 with Angular

Question

I have a scenario where i have to embed a inline js to an iframe src by dynamically building the iframe at runtime when the component loads.

The example runs fine in both Chrome and Edge but fails in IE11 , what could be the possible reason? IE dosen't even complain and if we check the console log nothing gets printed, where as in chrome it will print my name in the console log .

Stackblitz link.

Note - Please run the app in chrome as well as IE to see the difference .

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{
  name = 'Angular 6';


 constructor(private renderer : Renderer2, private elRef : ElementRef ){}


  ngOnInit(){
    const outerDiv = this.elRef.nativeElement.getElementsByTagName('div')[0];
    const el = this.renderer.createElement('iframe');
    let script =encodeURI(`data:text/html,<script>console.log('DONE');var execute = function(context){ console.log(context.data.name);}; window.addEventListener('message', function(msg){execute(msg);});</script>`);
    el.setAttribute('sandbox', 'allow-scripts');
    el.setAttribute('src', script);
    outerDiv.appendChild(el);
    el.onload = function() {
      el.contentWindow.postMessage({name: 'Rahul'}, "*");
  }
  }
}

<div></div>

Do note, even if that kind of code can't run in a Stack snippet, its relevant part should still be provided within the question, or else this question will be useless when that external resource die...and you should know that already — Ason, Jun 28 '18 at 08:09
yup i get that i thought a running env would be suitable i will add the same — Rahul Singh, Jun 28 '18 at 08:11
A running env. **is perfect**, we just want it inline as well, so +1 — Ason, Jun 28 '18 at 08:12
Actually I don't, though this post has some info regarding `postMessage`, which I guess is the main issue in your case: https://stackoverflow.com/questions/21070553/postmessage-still-broken-on-ie11 — Ason, Jun 28 '18 at 09:58
Also, have you tried to simply access some content instead of using `postMessage`, so at least that part works? — Ason, Jun 28 '18 at 09:59
No IE to test rn, what if you don't set the sandbox attribute? What if instead of generating a dataURI, you set your iframe's src to `about:blank` and then append your script in there (you should be able to access the contentDocument of about:blank from your script, but IE may well have weird behavior again...) https://jsfiddle.net/ob8y5gjh/ — Kaiido, Jul 02 '18 at 07:46
Which feature do you want to block? If only cross-origin, your dataURL served doc should already be seen as such. For other features, I don't think they are the culprit here. So you might want to try dataURL + sandbox= allow-sameorigin allow-scripts (double check the syntax and if IE respects the CORS policy on dataURLs) — Kaiido, Jul 02 '18 at 11:49
`allow-sameorigin allow-scripts` prevents the use case of sandbox then it is of no use — Rahul Singh, Jul 02 '18 at 12:30
@RahulSingh no that's my point, documents served as dataURI should (according to specs) be treated as a cross-origin document anyway. So allow-sameorigin should not have any impact. But you'd have to double check IE's behavior. — Kaiido, Jul 02 '18 at 23:37
So I just tried on a VM, and IE simply don't load iframes from dataURIs... would have saved me a lot of time if you said so when I asked the first time. The only workaround would be to serve your sandbox page from a real server (even blobURIs don't work). — Kaiido, Jul 03 '18 at 05:14
Yup i actually was in and out , thanks for letting me know , i am tied hands down to use if like a static text in this scenario . but i guess i need to use something else — Rahul Singh, Jul 03 '18 at 07:23

Pradeep Nedunchezhian · Answer 1 · 2018-06-28T08:21:23.967

0

Due to security reason in IE, you can not give base64 data of any image/ pdf or any other assets to a HTML object. Instead you can use path of the server having the asset.

how to display base64 encoded pdf?

This gives an example.

edited Jun 28 '18 at 08:21

answered Jun 28 '18 at 08:12

Pradeep Nedunchezhian

9
3

I donot have a server resource path for the same its more or less an inline js that we have parsed. Any idea on that would be great – Rahul Singh Jun 28 '18 at 08:13
https://stackoverflow.com/questions/40674532/how-to-display-base64-encoded-pdf This gives an example. – Pradeep Nedunchezhian Jun 28 '18 at 08:20

Inline js with Iframe src not working in IE11 with Angular

1 Answers1