I have an iframe.
I want to prevent access from the parent document into the iframe from css selectors and other manipulation.
How can I secure it?
You could kill a goat under the light of a full moon inside a pentagram made of salt. If you did that, css or js wouldn't be able to affect the contents of an iframe.
They wouldn't affect them if you didn't either.
You have to explicitly allow sites to interact with the contents of an iframe, either by setting up an api like this, or by setting up cors headers to allow interaction. According to other answers on this site, if the iframe and parent have the same domain, cors rules don't apply, so changes can be made. If you are embedding an iframe from your site on your site, you should probably trust your own code.
If you are asking how to prevent users from using the developer tools to mess around with your iframe contents, you can't. There are all sorts of things that website designers have tried to do to keep me from looking at their source. I've never found one that can keep me out.
Related
I'm looking for the best way to keep a WebRTC video stream + the stream controls (hang up, mute etc.) loaded and active, even if the user navigates to another subpage through the navigation menu.
I thought of the following way, however I don't know if this is the most practical one or if there's a better solution to this nowadays: I'd simply make a wrapper with the navigation menu and put an iFrame where currently the content is. The video stream itself would go in the menu bar itself (it's a sidebar which is wide enough to do something like this), when the user clicks on a menu item, the iFrame src is replaced with the new URL.
Is this the right way to do this? If so however, since I haven't used iFrames that much so far, I have a few more concerns:
Are there any drawbacks as for browser features when using iFrame? For example, I know that Chrome asks you to put several features into the allow attribute of the iFrame, for example when using the camera, microphone or location of the user. Is there anything I absolutely cannot do in iFrames?
Do iFrames share the (PHP) session and cookies with the "main" wrapper, or are those separate sessions?
And probably my biggest concern: How could the JavaScript codes of the wrapper and the iFrames communicate with each other? For example, how could I send a hangup-signal to the video stream in the wrapper from within the iFrame?
Thanks for any hints!
Iframes could work.
Are there any drawbacks as for browser features when using iFrame?
The main issue is that you don't really get control over the presentation of the page while that iframe loads. Users may see a brief moment of solid white, for example, while the previous page is torn down and replaced.
Is there anything I absolutely cannot do in iFrames?
Iframes are pretty flexible. Just keep in mind that they have their own JavaScript context so there is some extra code you need to write to shuffle data back and forth.
Do iFrames share the (PHP) session and cookies with the "main" wrapper
Yes
How could the JavaScript codes of the wrapper and the iFrames communicate with each other?
You can actually access the Document object for the iframe from the outer iframe. (Assuming they're on the same origin, of course.)
const iframe = document.querySlector('iframe');
iframe.contentDocument.querySelector('body').whateveryouwant
Probably the best way though is to use the postMessage API. This allows you send data back and forth as-needed, in a nice isolated way.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
My website offers rich content to users. I often subscribe to third party vendors whose content I embed in my pages. How can I safely embed external domain's content on my webpage in an iframe without worrying that they won't be able to bust out of frame. They won't do it purposely (without risking their clientage/reputation). However, since they almost always are small shops, they become a juicy targets for an attacker who wants to deface/redirect my website.
I am not asking how can I prevent an iframe to access parent frame's DOM, which I know it can't. I am asking how can we prevent an iframe to stop doing something like the following (which doesn't require access to parent's DOM):
top.location=url
Is there a header (something similar/opposite to X-Frame-Options) which I can use on my parent page to ensure that the iframes I embed can't bust out? Remember, I can't ask vendors to add headers/scripts to their pages. They never purposely want to do nefarious things to my page. The scenario I am trying to cover is the one when they get hacked.
As noted in the comments, sandbox attribute can prevent the script inside the iframe to access the windows top.href, location.href and similar methods. This will do what I want to achieve.
From w3schools:
When the sandbox attribute is present, and it will:
prevent the content to navigate its top-level browsing context
My apologies if this has been asked in a different way elsewhere.
I have a web app that features a form users can embed on their websites via iframe. I am trying to make the content of the iframe responsive. I am familiar with how to edit content using media queries, but I am at a lost for how to use media queries that respond to the iframe's parent window. Is this possible?
Also - yes, I am aware of the Same Origin Policy, and no, I won't have access to end users' websites (to add javascript to the parent frame).
EDIT Media queries using max-device-width and min-device-width on the iframe'd content work, which I for sometime reason had overlooked. They were an easy fix.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.
I have to include an external whitelabel site within an iframe on my page. There are numerous pages on the external site and they vary considerably in height.
I need to adjust the height of my iframe to accommodate this.
I can get the height of the first page loaded into the iframe (using PHP), but no way of getting subsequent page heights because no way of knowing what the url/location changes to in the iframe.
As this is an external url in the iframe the usual security limitations apply, therefore ALL solutions must come from the parent frame. Solution must be workable on FF and IE at least.
The only think I can think of is to test whether the scrollbars are visible on the iframe, but this is seemingly impossible in these circumstances.
If anyone can prove me wrong, or has any other javascript/ajax/php cross-browser solution I'd love to hear it.
It is not possible to do this because of the browser's security model. If it was possible, that would be a security problem and would have to be fixed.
Although letting the embedding site know the height of a third party webpage when embedded in the page seems harmless, this can leak information to the embedding site that the browser's user wants to keep private. For example, http://www.facebook.com/ renders differently depending on whether or not you are logged in, so if my website can work out the height of <iframe src="http://www.facebook.com/"> then I can work out whether or not you are a facebook user, something you probably don't want me to know.
The information leakage would be similar to the infamous CSS History Leak in that it would reveal information about the user's relationship with the third-party site just by "linking" to that site (in this case with an iframe instead of a link). Browser vendors had to plug the CSS History Leak, so I suspect if you could work out the height of a third party site rendered in an iframe in any browser, the vendor would have to fix that too.
The information leaked would be anything that can be inferred from the height of a page when rendered for a user using their cookies (which the browser will send even though rendering in an iframe inside a different domain's page). The specific risks depend entirely on the nature of the embedded site being "attacked". E.g. I could get an idea of how much stackoverflow activity someone visiting my site has by getting the height of https://stackoverflow.com/reputation which is different for different users.