<iframe> is not working - html

I'm making a simple html page which is require an <iframe> to show a specific area of the page. I used iframe so many times but this time I don't know what I'm doing wrong...
Please take a look at my code and help me!
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe Test</title>
</head>
<body>
<iframe src="https://www.secure-booker.com/sorelle/ShopOnline/Products.aspx" width="1000" height="1000" frameborder="0"></iframe>
</body>
</html>

The page you are trying to embed in the iframe blocks itself from being embedded.
You can see this if you open your browser's console (F12) and select the "Console" tab.
Refused to display 'https://www.secure-booker.com/sorelle/ShopOnline/Products.aspx' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' http://*.sorellechicago.com sorellechicago.com *.sorellechicago.com".
TL;DR: It's not possible.

You are not allowed to iFrame this Website. because they have set the following.
'X-Frame-Options' to 'SAMEORIGIN'.
You can find this from your console.
Refused to display 'https://www.secure-booker.com/sorelle/ShopOnline/Products.aspx' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' http://*.sorellechicago.com sorellechicago.com *.sorellechicago.com".
How to set this options?
https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
How to set 'X-Frame-Options' on iframe?
X-Frame-Options on apache
One more note (FYI) : AFAIK, there is one more thing called Frame Buster Code to prevent other domain to iFrame the site. Below is the reference URLs:
https://en.wikipedia.org/wiki/Framekiller
https://davidwalsh.name/javascript-framebuster
Frame Buster Buster ... buster code needed
Its a part of Clickjacking as well. Refer the below URL as well.
1. https://en.wikipedia.org/wiki/Clickjacking

Related

x-frame-options header set but can stilll embed in iframe?

The x-frame-options header is confirmed as set to SAMEORIGIN, but when creating a simplistic local HTML file e.g.
<html>
<head>
<title>Clickjack test page</title>
</head>
<body>
<p>Website is vulnerable to clickjacking!</p>
<iframe src="http://www.yoursite.com/sensitive-page" width="500" height="500">
</iframe>
</body>
</html>
and attempting to embed the target page i'm able to do so without issue.
What could be causing this?
Thanks
Some reasons I can think of:
Page is being loaded from the same origin, hence allowed.
"X-Frame-Options" or "SAMEORIGIN" is not spelled correctly and hence ignored.
Content-Security-Policy frame-ancestors directive is more permissive and X-Frame-Options is ignored when it is set. If this is the case it should be blocked in IE which doesn't understand Content-Security-Policy.
Your browser is more lenient with local files.

How to use a heroku app inside a html iframe?

I want to use this heroku app (spring boot) inside an iframe. https://sef-github-leaderboard.herokuapp.com/ but it doesn't work. it says refused to connect. Here's the code.
<!DOCTYPE html>
<html>
<body>
<iframe src="https://sef-github-leaderboard.herokuapp.com/" title="Iframe Example" style="height:500px;width:100%;"></iframe>
</body>
</html>
If you open up devtools, click the Network tab, refresh the page, and click the first item in the waterfall, you'll find that the Content Security Policy header X-Frame-Options is set to DENY on the URL you are seeking to embed. This instructs the browser to disallow loading the page within an iframe. To get around this, you would need to use a forward proxy to strip out the headers.

Unable to load an URL using iFrame because of Content Security Policy

<!DOCTYPE html>
<html>
<body>
<iframe src="URL">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I am using the above code to load the url inside iFrame and i am getting below error:
Refused to display 'URL' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://inteliapp-stage.grymatter.com URL1 URL2 URL3 URL4 URL5 URL6 URL7
http://18.233.166.250 https://18.233.166.250 cdn.jsdelivr.net".
For security reason, i am not able to mention the exact URLs. I want to know what should i add inside meta tag for content security Policy to resolve the problem? If we cant resolve the problem then how we can load the url inside html code.Please help me out. Thanks in advance.
The page you're trying to put in the frame has the policy that's being violated. There isn't any way to weaken CSP rules once sent; so unless you can modify the source of the framed page, there's not much you can do here.
You may be able to use an alternate method, such as doing an HTTP call in the background to fetch the content of that page, and manually insert that content into your page.

Content Security Policy sandbox to allow redirect with META

In my web app i allow users to download html files they uploaded.
I want to make this download to be maximum secure.
If users just open a html in new tab, it is insecure, there can be some script to catch cookies or so.
I added the header "Content-Security-Policy: sandbox" for such downloads. And it solves the problem.
But i got the problem with some subgroup of html files, which are "bookmarks". Files contain simple html like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Opening http://example.com</title>
<meta http-equiv="REFRESH" content="0;url=http://example.com">
</HEAD>
<BODY style="font-family:Tahoma;Arial;font-size:12px;padding:20px;color:#aaa">
Opening <b>http://example.com</b>...
</BODY>
</HTML>
After it is opened in new tab, i need a user to be redirected to the host in the file.
It works without the header "Content-Security-Policy: sandbox" , but doen't work with it.
I tried different sandbox modes
Content-Security-Policy: sandbox allow-scripts
Content-Security-Policy: sandbox allow-top-navigation
But nothing allows to execute that redirect.
is there a way to do it?

Why doesn't <iframe> work properly for me?

I have a simple bit of HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe Practice</title>
</head>
<body>
<div>
<iframe src="//embed.gettyimages.com/embed/183351352?et=dbA2ZDFzQUqFbu8nRMfGww&sig=ozPqnsmwjm88sptsMM2UVS70lzd2ci-9q27BF6R0TzU=" width="507" height="407" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
When saved with .html extension and opened in a multiple browsers, I get a message saying "The file or directory could not be found." This is a very silly question, can somebody help me out with this?
Thanks!
You are using a scheme relative URI (one that begins with //).
This preserves the current scheme, so the content will load if you view it in a document hosted on http: or https: (normally you would get a security error if you tried to load an https: document into an http: document or vice versa).
You appear to not be using a web server, so you are trying to access the document via file: where it is not available.
You can either use an explicit scheme (replace // with http://) or do your testing on a web server (you can install one on your development system).
I'd generally recommend picking the latter option, there are many issues that crop up when you are testing documents on file: and using a development server bypasses them all.
Simply "//embed... in the iframe element's src property to http://embed....
<iframe src="http://embed.gettyimages.com/embed/183351352?et=dbA2ZDFzQUqFbu8nRMfGww&sig=ozPqnsmwjm88sptsMM2UVS70lzd2ci-9q27BF6R0TzU=" width="507" height="407" frameborder="0" scrolling="no"></iframe>
Are you trying to load the file locally with file://xxxxxxx You can not load and iframe this way you need to run it with a web server