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

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

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.

html containing iframe won't display in browser

I want to embed a video stream in a html page. I run apache on a raspberry pi. With the standard index.html it works fine. When I change to my custom index.html, it says the page takes too long to load. This occurs when I access from another network (the internet) not the local network.
This is the content of the html page:
<html>
<head>
</head>
<body>
<iframe src=”http://192.168.1.56:8081” height=”480” width=”640”>
</iframe>
</body>
</hmtl>
My research has led me to X-Frame-Options (this is the best reference https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options i found).
I have enabled the headers module
a2enmod headers.load
systemctl restart apache2
and added the following line at the end of the apache2.conf file
Header always set X-Frame-Options “ALLOW-FROM http://192.168.1.56:8081”
Could you please help?
Thanks!`

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?

Auto refresh in Mac not working for some site

I got a code that refreshes the html page as per the seconds I desire. I am on an Mac and I use the TextEdit app to make the HTML file. This code works for www.apple.com but it does not work for say, https://www.bitcointalk.org or http://www.macrumors.com.
I am not sure why this is happening. All I am doing is replacing the apple URL with bitcointalk url. I know I can also do this refreshing via Safari extension, but I need this code to work.
Thanks a lot
The code I am using is:
<html>
<head>
<meta http-equiv="refresh" content="5">
</head>
<FRAMESET>
<FRAME src="http://www.apple.com/">;
</FRAMESET>
</html>
EDIT: What I am trying to do is, create this html and move it to my iPhone, so that I can do the web refresh through my phone. Right now there are only paid apps in the App store that lets you refresh a page automatically every few seconds/minute and they are not really that good.
As #esqew pointed out in their comment, the sites that aren't showing up forbid access via frames by setting the X-Frame-Options HTTP header to DENY or SAMEORIGIN.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

Why aren't iframes working for certain sites

I was following a jQuery tutorial and part of it was to use something that took a long time to load, such as iframes. I can't get iframes to work by themselves, in the following only w3schools works. What is going on?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This is a test</title>
</head>
<body>
<p>Hello.</p>
<p>
<iframe src="http://www.google.com"></iframe>
<iframe src="http://www.stackoverflow.com"></iframe>
<iframe src="http://www.w3schools.com"></iframe>
<iframe src="http://www.yahoo.com"></iframe>
<iframe src="http://www.reddit.com/"></iframe>
</p>
<p>Goodbye</p>
</body>
</html>
Are there any other easy ways to have something take a long time to load in a HTML document? I tried using large images but it's a nuisance to download many of them and they get cached after first time.
The reason for this is, that Google/Satckoverflow is sending an "X-Frame-Options: SAMEORIGIN" response header. (You can set this thing either in IIS or in Page Header) This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.
The X-Frame-Options response header