I want to embed
http://www.yocast.tv/embed.php?s=dx123&width=1340&height=540&domain=cricketembed.com
in an iframe. However, that site produces too many popups. I want to put that in the iframe such that no popups happens. Is that possible... This is a third party domain and I have no control on it.
Add a sandbox attribute to the iframe. (Note: limited support).
<iframe ... sandbox="">
Leaving it as an empty string will disable most features, you can selectively add them using a space separated list of acceptable features. See the specification for available features.
You do not want to include allow-popups in that list. Firefox does not support allow-popups so you might not want to allow-scripts either.
Related
I'm trying to embed vimeo videos as iframes. I'm using the following code:
<iframe width="1140" height="570" src="https://player.vimeo.com/video/553469759?autoplay=1&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
It works fine when I paste it in a codepen or try it in firefox. It doesn't work in chrome for me though. When I inspect the iframe's HTML, I can see that vimeo adds a class no-fullscreen-support, it also added these classes though:
js-player-fullscreen
with-fullscreen
Figured it out on my end. It was due to the Permissions-Policy being set by Nginx in the header. In my instance of Nginx, it was originally set to this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
The culprit in this case was fullscreen=(self) -- it was telling Chrome that unless the code originated from the site, it shouldn't allow full screen. As Vimeo's iframe is being loaded from player.vimeo.com, Chrome saw that as a third party and wouldn't allow it. Removing that from the Permissions-Policy so it looked like this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()";
Resolved the problem. The button is showing fine now.
For those using Apache, it'd probably look like this:
Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"
The same principle applies, just remove fullscreen=(self).
You might also see it mentioned as Feature Policy, same thing, it's just called Permissions Policy now.
You can learn more about Permissions Policy here: https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md
From Vimeo Help Center:
The fullscreen button will be hidden from the player in scenarios where fullscreen mode cannot be activated. Here are some common causes:
First and foremost, check the Embed tab. Make sure the fullscreen button is toggled on under the Controls section
The iframe embed code is missing the fullscreen attributes: "mozallowfullscreen,""webkitallowfullscreen," and "allowfullscreen." If you’re pasting your embed code into another application, make sure these values are being retained.
The player iframe is contained within another iframe that is missing the fullscreen attributes. Browsers do not allow iframes to enter fullscreen if they are contained within other iframes without these fullscreen attributes. - Try inserting the player outside of the container iframe or adding "mozallowfullscreen," "webkitallowfullscreen," and "allowfullscreen" to the container iframe.
The iframe is contained within a frame. Frame elements cannot enter fullscreen, and neither can any iframes inside of them. We recommend removing all frame tags from your page’s source code.
If you're not sure if the above cases apply, please contact us, and we’ll investigate further. Be sure to include a link to the page where the video is embedded, so we can take a closer look at your page's source code.
You should add these tags to the element:
webkitallowfullscreen mozallowfullscreen allowfullscreen
what if you just download the video and upload it somewhere like github?
And then use the tag to embed the video?
<video src="protocol://someurl.domain/path" muted autoplay width="1140" height="570"></video>
If vimeo doesn't allow downloading you can always use third-party tools like savethevideo.com
So i just want to sandbox one html file in iframe and it works as long as there is just allow-scripts attribute, but as soon as I add allow-same-origin it stops to work because of this:
Notes about sandboxing:
When the embedded document has the same origin as the embedding page, it is strongly discouraged to use both allow-scripts and allow-same-origin, as that lets the embedded document remove the sandbox attribute — making it no more secure than not using the sandbox attribute at all.
Sandboxing is useless if the attacker can display content outside a sandboxed iframe — such as if the viewer opens the frame in a new tab. Such content should be also served from a separate origin to limit potential damage.
The sandbox attribute is unsupported in Internet Explorer 9 and earlier.From:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
Code of iframe:
<iframe src="index.html" sandbox='allow-scripts allow-same-origin'></frame>
I want allow-same-origin because I want to use same css in iframe as is in index.html.
Host the iframe on a different domain. This will keep the iframe secure when using sandbox="allow-scripts allow-same-origin".
But either way, CSS does NOT inherit in iframes. In fact, that's the whole purpose of iframes. And you can load the same CSS file in both pages, even without allow-same-origin set.
There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.
Could you help me understand Chrome implementation of HTML5 iframe sandbox attributes allow-same-origin and allow-top-navigation?
First question:
For example when i test allow-same-origin I do:
<iframe id='frm' src="file.html" sandbox="allow-same-origin"></iframe>
...
oIFrame = document.getElementById('frm');
var oDoc = (oIFrame.contentWindow || oIFrame.contentDocument);
if (oDoc.document) {
oDoc = oDoc.document;
oDoc.getElementById('foo').innerText = 'Hello man!';
...
Content of file.html:
...
<div id="foo">Hello</div>
...
alert(document.cookie);
...
and that's work only when i have additional attribute called allow-scripts so I have sandbox="allow-scripts allow-same-origin". Alone allow-same-origin doesnt't work and alone allow-scripts works great (scripts run but not API SOP related, its ok regard to HTML5 standard).
Standard of HTML5 says:
"First, it can be used to allow content from the same site to be sandboxed to disable scripting, while still allowing access to the DOM of the sandboxed content."
Am I misunderstand that or Chrome implementation is wrong?
Second question:
Standard of HTML5 says about allow-top-navigation:
"Second, it can be used to embed content from a third-party site, sandboxed to prevent that site from opening popup windows, etc, without preventing the embedded page from communicating back to its originating site, using the database APIs to store data, etc."
My popups in Chrome aren't blocked. How could I block them? I use just allow-top-navigation.
Cheers,
David
For the first question:
It appears this means that the parent page can still have access to the DOM of the sandboxed <iframe>, whilst scripts in the <iframe> itself are blocked from execution; so it's only parent -> iframe but not iframe -> parent
Second question:
Maybe I'm misunderstanding, but as the name allow-top-navigation implies this will allow rather than block the framed site from using things like top.location.replace().
I ran into an issue where one of my customer's browser does not support iFrames (rather his Outlook does not). Without using iFrames, how can i display another page's content inside Html? Original iFrames insert looked as following:
<iframe src="http://mybox:8081/blah/report.jsp" width="1000" height="420">
<p>Your browser does not support iframes.</p>
</iframe>
Please advise. Thank you.
You cannot without using an iFrame.
Your options are even more limited because you're working with an email client. HTML in email clients are very finicky.
It seems you are using an email client, which definitely doesn't support iFrames, but for reference, you can do this with jQuery on a website.
$(document).ready(function() {
$(".yourSelector").load("/pages/pageyouwanttoloadhtmlof.html");
});
Please note that .load will strip out scripts in most cases (there are uses that won't), and also note that you cannot load content from different domains than yours. (There are ways around this with things like jsonP, but that gets quite complicated, and you pretty much still have to control both domains.
You can use a DIV to display it, another page content should set using DIV's inner html property