I have the following iframe definition :
<iframe id="super-frame"
sandbox="allow-same-origin allow-scripts
allow-forms allow-top-navigation
allow-pointer-lock
allow-top-navigation-by-user-activation">
</iframe>
Basically, I just want to block all "alert" popups from the iframe while allowing everything else.
THE ISSUE:
The page from mydomain.com/abc/page1.html loads mydomain.com/abc/page2.html into the iframe noted above. Then, whenever links with target of _parent are clicked in page2.html to go to say page3.html page4.html etc, Chrome browser does not allow this to happen saying it is cross origin!
So, not sure what the issue is with the definition of iframe. If anyone has come across similar situation and know of a fix, please let me know. Note that this is on latest chrome version on mac.
Thank You.
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
I am currently trying to place https://phishingquiz.withgoogle.com/ into an iframe.
It works correctly within Chrome, but seems to just say loading when viewing it in IE.
I have included the code below:
<iframe src="https://phishingquiz.withgoogle.com/" allow-same-origin allow-
scripts allow-popups allow-forms allow-pointer-lock width="1200"
height="900">
</iframe>
I am currently running version 11.0.9600.19236
Above is what Chrome displays, which is correct.
Above is what IE displays, which is wrong.
I have tried to using the sandbox attribute to allow-javascript, which i presume it might be coded in that, but still no luck.
Would any one have any ideas?
I'm imbedding an infusionsoft form in a wix page. Wix automatically puts it in an iframe. This is a landing page.
If I access the form directly, by entering its url in chrome's url field, it works perfectly, meaning 1) the name and email address is transmitted to infusionsoft and 2) the page goes to the thank you page.
If I access the form via the wix page, the form simply disappears when I click the submit button, and the page stays the same.
For iframe, wix blocks (according to their help page) browser API's, <embed>, <object>, <applet>, other plugins, and automatic triggers like playing a video. It allows allow-same-origin (re-enables third-party site scripts/content), allow-forms (re-enables form submission), allow-popups (re-enables popups), allow-scripts (re-enables custom Javascript), allow-pointer-lock (re-enables grabbing the cursor), and allow-top-navigation (re-enables changing parent frame window.location). I added all of these to the iframe tag, and it still doesn't work.
I thought that maybe the target page is showing through the frame, and it just looks blank, but that's not happening, because the thank you page has a picture background.
The only other thing I can think of is that because I have all the attributes in the iframe tag, it's not working because they're somehow conflicting with each other. So I systematically tried various combinations, but that strategy might not be effective if there really are conflicts.
It seems like I would definitely need the attributes allow-same-origin, allow-forms and allow-top-navigation, but I'm not sure.
Any ideas? ---- I'm out of ideas.
Here's the form accessed directly using it's url. This works the way it's supposed to, by going to the thank you page. If you test it, no worries, the site's not live. Use the name "test" and the email test#test.com:
https://[id].infusionsoft.com/app/form/web-form-submitted1
Here's the wix landing page:
https://[id].wixsite.com/squeeze
Here's the HTML I entered into the code field that is used to imbed content in an iframe on a wix page:
<html>
<body>
<iframe src="https://[id].infusionsoft.com/app/form/web-form-submitted1"
height="175" target="https://[id].wixsite.com/squeeze/thank-you"
sandbox="allow-forms allow-same-origin allow-top-navigation allow-popups
allow-scripts allow-pointer-lock" scrolling="no" style="overflow:hidden"
frameborder="0">
</iframe>
</body>
</html>
Problem:
I have a html file which calls another html file through an iframe with sandbox. The inner file contains iframe given by soundcloud to embed. Now this soundcloud widget does not work.
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width= "100%" height="450" src= "inneriframe.html" sandbox></iframe>
</body>
</html>
And the inneriframe.html contains iframe I got from soundcloud.com inneriframe.html is:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/36700916&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" ></iframe>
</body>
</html>
Observations:
1. It works for some files and does not work for others.
2. It works on firefox and not on chrome.
3. If we disable flash player from chrome plugins, it works.
Possible reasons:
Perhaps for some files soundcloud first check if flash player is available, run it through flash player else through HTML5. In such cases it finds that flash player is available and hence tries through it but sandbox restricts flash player and hence it does not work.
For other files perhaps soundcloud directly runs through HTML5. Also since chrome implements sandbox most strictly, hence it is a problem in chrome only.
Working embedding:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/211417319&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Non-working embedding:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/216846955&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Kindly help me in:
1. resolving issue, if there is some way.
2. to differentiate files which works and which does not work and why?
Regarding the Chrome/Flash issue, I think what may be happening is you may have some conflicting Flash updates in Chrome. Chrome by default has Flash integrated and each update to Chrome also adds the most recent version of Flash. If you've installed Flash separately, it could also be installed for Chrome, so the two versions might be in conflict with each other. You need to disable one/ the second instance of Flash - that's why disabling the plugin in Chrome works. I would recommend however, that you ensure that your version of Chrome is up to date and/or that you update your flash plugin by doing the following:
In the address bar [of Chrome] type chrome://components, then under "pepper_flash," click 'Check for update'. That may work. So it is not a general issue, it will vary from machine to machine. A pain, i know.
Regarding the some-play some-don't issue, this is a known FF-soundcloud issue. Apparently if you enter Firefox 'Safe mode' all the tracks will play. (you can enter Safe mode by clicking the menu icon, then help and select Restart with Add-ons Disabled then select Start in Safe Mode (don't Refresh Firefox) ).
Hope this helps!
Rachel
So I'm doing some work on a site to make it compatible for IE8 (Client request, don't ask). Now the website contains some videos in iframe tags which are displaying blank in IE8.
According to Blank iFrame in IE I have to write 'position:relative' in order to show the video. Below is my full tag:
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/whatever" frameborder="0" style="position:relative;" ></iframe>
This however, doesnt seem to work. Even with position:relative it still shows as blank.
The above 'Blank iFrame in IE' question is a number of years old so I'm wondering has there been any changes sinse HTML5 in how this should operate? Or should the code still work and I'm doing it wrong?
Now my IE8 working well after figure this out.. Firstly i have an experience like you do such as blank content.
So here the few step to fix this.
Try installing shockwave player.
After that on menu setting click tools > manage add ons
and enable it the shockwave flash object
Let me know the result. Regards.