How to detect whether a website accepts IFrame embedding using JQuery?

Asked Jul 27 '20 at 13:57

Active Jul 27 '20 at 14:06

Viewed 187 times

I am writing a webpage to test whether any particular website allows embedding into an IFrame.

Webservers use the X-Frame-Options header to determine whether or not they allow other websites to embed them using IFrames.

If this header is set to DENY or SAMEORIGIN, then the embedded IFrame cannot load the website.

If a website has X-Frame-Options set to either one of these configurations, (such as https://google.com), then I can see this error message in the console:

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This question is about detecting refused connections in frames (but none of the answers actually work!)

This leads me to my question:

Is there a way I can detect whether a website allows or denies frames using JQuery?

edited Jul 27 '20 at 14:02

asked Jul 27 '20 at 13:57

Oscar Chambers

Not a duplicate because I really would like to use JQuery if possible! – Oscar Chambers Jul 27 '20 at 14:03
I was not aware that was the case, hence the question :) – Oscar Chambers Jul 27 '20 at 14:06
1

Write a proxy and do `const url ="https://google.com"; $.get("myproxytestifxframe.php", { "site":url},function(res) { if (!res.error) $("iframe").attr("src",url) });`. Here is the code for the proxy: https://stackoverflow.com/questions/21263418/detect-x-frame-options – mplungjan Jul 27 '20 at 14:07
1

Great answer, thanks. This will do just fine – Oscar Chambers Jul 27 '20 at 14:09
1

You can also be one step nastier and do `const url ="https://google.com"; $("iframe").attr("src","myproxyloadpage.php?url="+encodeURIComponent(url)) });` - but that will likely fail on sites that ajax their content – mplungjan Jul 27 '20 at 14:12
That's quite clever – Oscar Chambers Jul 27 '20 at 14:17

How to detect whether a website accepts IFrame embedding using JQuery?

0 Answers0