Firefox blocks the loading of HTML iframe - html

I want to load another page using HTML iframe but Firefox blocks it due to avoid security problems.
.
I've tried to chnage the "https" to "http" but it doesn't work.
The error shown by Firefox:
Firefox Can’t Open This Page
To protect your security, anouar.stencila.io will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.
This is the code used:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Reproducible Article</title>
</head>
<body>
<!-- The header of the file -->
<p>
<a
href="https://ojs3.josekarvalho.net/index.php/rp/article/view/87/176"
target="_blank"
>Link to HTML version</a
>
|
<a
href="https://ojs3.josekarvalho.net/index.php/rp/article/view/87/181"
target="_blank"
>Link to PDF version</a
>
</p>
<!-- The iframe to be shown - the link to the reproducible article allowfullscreen -->
<iframe
src="https://anouar.stencila.io/gentsch2020/"
frameborder="0"
style="position: absolute; top: 80px; left: 0; width: 100%; height: 100%"
scrolling="yes"
title="Reproducible Article"
></iframe>
</body>
</html>

The page https://anouar.stencila.io/gentsch2020/ is served with the following X-Frame-Options header:
x-frame-options: allow-from *.ojs3.josekarvalho.net
ALLOW-FROM isn't supported by any up to date browser, so it won't work. You either need to use SAMEORIGIN when possible or remove the header completely.
X-Frame-Options can be replaced with Content-Security-Policy: frame-ancestors <source>;, see MDN.

Related

embedd webpage into html document not working

I am trying to embedd a webpage from a cisco satellite device into a div tag of my webpage but I am getting the following problem
The page loads properly with the logon screen but as soon as I enter the login details it does not login byut instead stays on the login screen. I have tried both div and Iframe and both give me the same results. However when i access the device directly on IE or Chrome it works fine. The problem is only within my iframe or div.
My samle code is below however since you dont have access to the device you may not be able to see it working.. A shot in the dark here just asking you all to please give me some stuff to try out
<!<doctype html>
<html lang="en">
<body>
<div style="margin: 0 auto; width: 100%; height: 100%;">
<object type="text/html" data="http://192.168.10.107/"
style="width: 100%; height: 100%; margin: 1%;"> </object>
</div>
</body>
</html>
I also tried this with iframes as under but that also failed to work
<html>
<iframe src="http://192.168.10.107" sandbox ="allow-same-origin allow-scripts allow-popups allow-forms" width=100% height =100%></iframe>
</html>
Here I have a page that is like the one you want I guess.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyTitle</title>
</head>
<frameset rows="0,*" border="0">
<frame name="header" scrolling="no" noresize target="main">
<frame name="main" src="http://192.168.10.107/">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

SVG content is cut off when scrolling in Chrome Mobile

I have a set of simple SVG files in a scrollable DIV. You may see a demo here: http://www.ron2.byethost16.com/docviewertest.html This SVG list can be scrolled without problems in all major desktop browsers including Chrome and in some mobile browsers (Edge Mobile, Firefox Mobile and Android browser). However, in Chrome Mobile there is a problem: when scrolling it fast, some content on some SVG images is cut off and is not displayed, after a bit scrolling it may reappear but other content may disappear and so on (see these screenshots: http://imgur.com/a/rxZnK).
My HTML page code follows:
<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>Test</title>
<style type="text/css">
iframe {
width: 935px;
height: 1210px;
overflow:hidden;
}
</style>
</head>
<body>
<div style="overflow: auto; width: 100%; height: 100%;">
<iframe src="page1.svg"></iframe>
<iframe src="page2.svg"></iframe>
<iframe src="page3.svg"></iframe>
<iframe src="page4.svg"></iframe>
<iframe src="page5.svg"></iframe>
<iframe src="page6.svg"></iframe>
<iframe src="page7.svg"></iframe>
<iframe src="page8.svg"></iframe>
<iframe src="page9.svg"></iframe>
<iframe src="page10.svg"></iframe>
</div>
</body>
</html>
I suspect it is a bug in Chromium because I experience it not only in Chrome Mobile but in applications built with Crosswalk. Does anyone know how to overcome this problem or is it indeed a browser bug?

iFrame in IE11 - background messed up

I'm trying to iframe this site http://interimincomemodel.com/reps/eugeny/fastsuccess/ into this one http://interimincomemodel.info/fastsuccess/
When I open index.htm on my PC with IE11 the iframe just looks like the original site.
But when I upload it on the server, the background is messed up in IE11: background image is not fit to screen, headlines are not highlighted, email boxes are not rounded.
Also when trying to iframe this website
interimincomemodel.com/reps/eugeny/
into
interimincomemodel.info
the video player controls bar in the iframe is much larger and the last button "play full screen" goes outwards and can't be clicked. It happens in every browser.
I'm using this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Interim Income Model</title>
<style media="screen" type="text/css">
body {
margin: 0;
padding 0;
overflow:hidden
}
</style>
</head>
<body>
<iframe src="http://interimincomemodel.com/reps/eugeny/" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="auto" frameborder="0" marginheight="9px" marginwidth="100%" height="100%" width="100%"></iframe>
</body>
</html>
What can be causing the issues?
Thanks

Responsive IFrame to display content from External Document

I have an iframe to display the content of a .htm file, which is present in another location. The document loads perfectly while on a desktop browser.
But while on a mobile version, the content of the document is not displayed completely.
I am looking for a responsive iframe for both mobile and desktop views.
HTML
<iframe
id="ifrm"
src="URL.htm"
width="100%"
frameborder="0"
scrolling="no"
height="1450px"
style="padding-top: 0px; float: left;" target="_blank"
/>
I referred these links, but unfortunately they didn't help:
Full-screen iframe with a height of 100%
Scale iFrame css width 100% like an image
Demo with bootstrap website in iframe
Make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1" />
in <head> of your document.
Try like this LINK
HTML:
<div class="iframe">
<iframe src="http://a.rgbimg.com/cache1wZTwK/users/m/mi/micromoth/600/oIejAt8.jpg" frameborder="0"></iframe>
</div>
CSS:
.iframe {
position:relative;
}
iframe, object, embed {
max-width: 100%;
min-width: 100%;
}

Facebook Tab - Vimeo iframe video stopped working

I made an app in Facebook that has some simple html including an iframe containing a vimeo video. This app has worked fine for the last year or so, but all of the sudden the video doesn't show up. I've double checked the code of the page (made a stand-alone html page of it and it worked fine)
Does anybody know if Facebook has changed their policy on iframes or embedded video? If so any suggestions?
Here is a link to the app (on Facebook): https://www.facebook.com/LastFrontierHeli/app_367384316627957
And here is the code for the app:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome</title>
<style type="text/css">
<!--
.container {
height: 810px;
width: 841px;
}
-->
</style>
</head>
<body>
<div class="container">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_header.jpg" alt="header" />
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_vid_left.jpg" alt="vid left" />
<iframe src="http://player.vimeo.com/video/30746400?byline=0&portrait=0" width="658" height="370" frameborder="0"></iframe>
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_vid_right.jpg" alt="vid right" />
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_content.jpg" alt="content" /><a href="http://www.lastfrontierheli.com" target="_blank">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_button_website.jpg" alt="website button" border="0" /></a>
<a href="http://www.facebook.com/LastFrontierHeli" target="_parent">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_button_facebook.jpg" alt="facebook button" border="0" /></a>
</div>
</body>
Any help would be greatly appreciated!
To find out what's wrong Iv'e just used Chrome Developer tools,
and under Console you could see this line:
[blocked] The page at https://367384316627957.iframehost.com/966373?signed_request=incxTmuyY3_vzi…NlciI6eyJjb3VudHJ5IjoiaWwiLCJsb2NhbGUiOiJlbl9VUyIsImFnZSI6eyJtaW4iOjIxfX19 ran insecure content from http://player.vimeo.com/video/30746400?byline=0&portrait=0.
So incase you didn't know - facebook requires all data to be encrypted (served via SSL).
just change your iframe from http://player.vimeo.. to http*s*://player.vimeo
and it should work fine.