How to check if website is loadable in iframe - javascript

I need to check, if website in iframe is loaded properly. On my website, users can POST custom website, which will show them in iframe. But some websites are protected from insert to iframe (such as google or facebook).
How can I check, if is website loadable in iframe and can be used in iframe?
PS: I haven't show any code, because I have no code and no idea how to do it. (My website runs on Java, so no Apache or PHP).

Check HTTP response header for X-Frame-Options. Facebook sends X-Frame-Options=DENY, which means "The page cannot be displayed in a frame, regardless of the site attempting to do so."
The X-Frame-Options HTTP response header can be used to indicate
whether or not a browser should be allowed to render a page in a
<frame>, <iframe> or <object>. Sites can use this to avoid
clickjacking attacks, by ensuring that their content is not embedded
into other sites.
Check this: Accessing the web page's HTTP Headers in JavaScript

Related

How to allow iframe embed for a web page? (The iframe shows blank screen)

I'm trying to put a url from my web app in an iframe to be displayed on another website.
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://mywebsite.com/a-page"></iframe>
But right now the page doesn't show up inside the iframe. It's completely blank. Some internet research shows that it means my web app is not set up to allow iframes. What should I do (e.g. change certain settings on my server) to allow iframe embed?
I only want to allow certain url patterns from my web app to be embeddable, i.e. https://mywebsite/embeds/page-number. The site is built with react.js and using Nginx server.
The client (browser in this case) is blocking the web site from being rendered. You have to whitelist the origin from which you are trying to access the content to be loaded in the iframe
If you open dev tools, you should see something like this
This article should provide the solution you are looking for to fix your issue :
Google Content Security Policy

Load javascript file from other domain in bookmarklet?

I'm quite new to bookmarklets. I'm trying to load a javascript file from my own server/domain by using the following bookmarklet/javascript code:
javascript:(function(){s=document.createElement('script');
s.type='text/javascript';
s.src='http://www.test.com/js.js?v='+parseInt(Math.random()*99999999);
document.body.appendChild(s);})();
This code works nicely (js.js is loaded and executed) when i press the bookmarklet on my firefox toolbar when visiting pages on the test.com domain.
But when i go to google.com or any other sites and press the bookmarklet button the http://www.test.com/js.js isn't even loaded (looking in server log)
I know about cross domain restrictions but don't they apply to ajax request and related things?
This has nothing to do with CORS
You are loading unsafe content (http) in a secure page (https). Mixed content on secure pages don't work. You need to serve your script with https as well

Using CORS to handle reauthentication on another site

I'm trying to handle reauthentication using a different Authorisation website, while within a Single Page Application (SPA) in my home website. Both websites are internal to a client site.
I can't use the standard "redirect" method as I'll lose my SPA JavaScript context.
I've investigated and had CORS setup on the Auth website so it's now returning Access-Control-Allow-Origin: https://www.mywebsite.com. When I try to load the Auth page into a JQuery UI dialog it fails as the scripts all try to load in the context of the Home website.
i.e.
From my website https://www.mywebsite.com/static/
I'm loading https://www.auth.com/login.html.
When loaded into a JQuery UI dialog it tries to load it's scripts as https://www.mywebsite.com/static/scripts/authscript.js
instead of
https://www.auth.com/scripts/authscript.js
I also tried loading the Auth page into an iframe by changing the src tag but it just reloaded the page.
Is there a way to change the Source directory in the context of the CORS web page I'm trying to show?
So I couldn't get the page to load correctly into a standard jQuery Modal dialog and I have no control over the Auth page I was connecting to. To solve this I investigated the problem I was having with the iframe and used an HTML5 feature sandbox to fix it.
The Auth page was using a "break out" script to reload the page if it was loaded into an iframe and obviously this broke my SPA context. HTML5 allows you to restrict the contents of an iframe.
<iframe src="" id="my_auth" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>
allow-forms Allow form and submit
allow-scripts let it run JavaScript
allow-same-origin let it consider the Origin the same as the script (i.e. the Auth website), this was necessary to enable cookies
Of note is that I am not including allow-top-navigation which is what was allowing the reload of the page and loss of my JavaScript context
VoilĂ , auth page displayed inside a jQuery modal dialog (containing the iframe) with no need to pop up another window.
CORS was necessary to allow the redirect to the Auth website (which happens in the browser before JavaScript gets involved). You could also trap the "Access-control-allow-origin" exception instead.
The iframe with the Siteminder login was accessing a page from my site that set a value in localStorage once the user had logged in. The app just polled localStorage in the background to see if the user had logged in successfully.
Hope this is useful to someone.

How to fix a drupal (https) website with blocked mixed content

My Drupal e-commerce site is working on https.I want to embed below code to a page.
<iframe src="http://files.podsnack.com/......"(not exact code)
But src is on http, due to this not able to load the iframe in the page. I am getting below error.
Blocked loading mixed active content "http://files.podsnack.com/iframe/embed.html?hash=avcsgijp&t=1402616221"
carouFredSel: No element found for "#clients-scroller".
plugins... > eval (line 1)
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Note: src will not work on https.
Please advise.
I'm afraid you cannot load an iframe via http on a https page securely, thus getting the errors. Browsers are beginning to just completely block this now, where as older browsers would just give a warning.
The only way to get it to load is using https for the iframe, or accessing the page via http instead of https.
See this blog post about Firefox introducing the block: https://blog.mozilla.org/tanvi/2013/04/10/mixed-content-blocking-enabled-in-firefox-23/
and here's a page about IE blocking mixed content: http://support.microsoft.com/kb/2625928
and here's a page about Chrome blocking mixed content or warning about it: https://support.google.com/chrome/answer/1342714?hl=en
And see this post for a general explanation of the problem: https://developer.mozilla.org/en-US/docs/Security/MixedContent/How_to_fix_website_with_mixed_content

Responsive Iframe height cross-domain without having control of source page

I'm developing a responsive website that will have some iframes, in the iframes I'll load content from other domain which I can't edit it.
So, it is possible somehow, to get the content height? From another domain and without access to source page.
You can't access any content inside an iframe when loading a page from another domain.
It's possible to do cross domain AJAX requests with CORS or JSONP but then you need to have access to the embedded websites. Possibly you could try YQL to get the content. Mirroring on your own server would do the job. Otherwise you will hit SOP.

Categories