How do I test an iframe and get all the response headers?

Question

I am working on a webapp that can show url's in an iframe. But it also has the ability to first test the url before showing the url in an iframe. So before i show the iframe (set CSS rule to show the iframe element) i want to wait on the response. If i get an error or if i get a response header 'x-frame-options: DENY' i don't want to show the iframe and instead show an error message or something.

Consider this example:

const request = new XMLHttpRequest();
request.open("GET", urlToTest, true);
request.send();

Here i ALWAYS get a CORS issues. But this is expected, and testing this is not the same as what we actually want to do which is:

<iframe id="webiframe" "src"="urlToTest></iframe>

Then i tried the following:

this.webiframe is a reference of the <iframe>

this.webiframe.onload = function () {
    console.log('iframe ONLOAD');
}.bind(this);
this.webiframe.onerror = function () {
    console.log('iframe ONERROR');
}.bind(this);
this.webiframe.contentDocument.onreadystatechange = function () {
    this.iFrameEvent();
}.bind(this);
this.webiframe.contentDocument.addEventListener('DOMContentLoaded', this.iFrameEvent);
this.webiframe.contentDocument.addEventListener('load', this.iFrameEvent);
this.webiframe.contentDocument.addEventListener('onreadystatechange ', this.iFrameEvent);

But the event listeners that are added to the contentDocument are never called. The only event that is called is the onload event of the iframe reference.

So my question:

Is it possible to get some information/testing of iframe when setting a 'src' attribute on it. More specifically if the url is working and if not, why it's not working through response headers?

In Chrome it doesn't use the property on webiframe, contentDocument. To set the onload function you would go like this: this.webiframe.onload = ... — Money Murch, Jun 15 '20 at 05:31
Is it in scope to modify the content of the framed page to include a script and then use cross document messaging to communicate to the parent page that it loaded? — Jared Kells, Jun 16 '20 at 11:44
no, it can be any url the user needs to show. i dont know what that can be. — Martijn van den Bergh, Jun 16 '20 at 12:00

saarp · Accepted Answer · 2020-06-16T16:30:29.910

1

You should be able to access the webiframe.location.href attribute on the frame to get the URL. If you opened the frame you should already have this information. If the proper CORS headers are not in place you may not be able to get any details about the frame.

Frames are also accessible from the window.frames array if you are the parent. You can also try cross-document messaging as suggested in another StackOverflow answer.

NOTE: CORS is designed to explicitly block unauthorized cross-domain access in the browser. A server-based proxy solution may allow you to make a separate query and test the URL or collect information.

edited Jun 16 '20 at 16:30

answered Jun 15 '20 at 01:07

saarp

1,903
1
14
27

cross document messaging is not possible as i dont know which URL needs to be tested, The user can enter any url in our app and then i need to know if this URL will show in an iframe or not, before showing it in an iframe. – Martijn van den Bergh Jun 16 '20 at 12:02
1

@MartijnvandenBergh - CORS is designed to prevent this because it can lead to information leakage across domains. You are trying to bypass this security feature in the browser. A proxy solution may be a better approach. You would need to add a server-side component. – saarp Jun 16 '20 at 16:28
Yes, a colleague also proposed this solution. I was hoping it would be possible in the front end though. Thanks for confirming it! – Martijn van den Bergh Jun 17 '20 at 07:07
I'm going to give you the bounty as this will probably be the only solution. – Martijn van den Bergh Jun 17 '20 at 07:07
@MartijnvandenBergh - Thanks! Much appreciated and good luck. – saarp Jun 17 '20 at 19:31

How do I test an iframe and get all the response headers?

1 Answers1