I'm building a similar solution to twitter's widget.
I was wondering if there is any way to allow others to change the style of the content within my iframe?
I know the same-origin policy exists, however I wonder if there is any header notice that I could emit with the iframe content to allow browsers ignoring the policy?
What about solution, when link to CSS file will be passed through URL parameter or (better solution in my opinion), create URL parameter for every customizable item like this?
?bgcolor=000000&fontcolor=ffffff
To your question about ignoring SOP, look at Cross-origin resource sharing:
HTTP access control (CORS)
Cross-Origin Resource Sharing
Related
I am integrating wikipedia articles dynamically via iframe to my web application. The ?printable=yes parameter hides the menu, example:
https://en.wikipedia.org/wiki/Albert_Einstein?printable=yes
Now my question is if Wikipedia supports further styling which can be linked? I know you can create a Wikipedia account and overwrite styles for that logged-in user, but how would I apply this custom style (via URL parameter for example) for other users. Is that possible?
If not, do you know of any trick to style a cross origin iframe? Or which Wiki API would query the full text and images via a JSON endpoint?
No, that's not possible to add a custom style for anonymous users, like what you can do for logged in by adding styles to a User:MyName/common.js page.
But you can specify a script using ?useskin= parameter, like https://en.wikipedia.org/wiki/Albert_Einstein?useskin=timeless.
I want to allow some websites to embed an iframe with a page from my domain. However, I don't want anybody to be able to use the iframe content without my permissions. How can I allow only domains of my choice to be able to embed the iframe with the page's content?
I know vimeo does this, and allows video owners to block the video on certain websites that they don't find appropriate.
I want server side ASP.NET solution, because Javascript code can be altered. However if it can be done using javascript code and its secure, It's ok.
From what I've seen, I need to pass the referrer in some way, but in a way that can be manually altered by other website owners to include the iframe themselves and it would work on their website too, without a permission.
Since it will be a standalone page as you mentioned in the comments, you can do this by inspecting the referer property.
Request.UrlReferrer
See that it contains the domain that you want to allow. This property is available when an embedder puts your page in the IFRAME's SRC attribute and the page loads for the first time.
If the user clicks on a link inside the IFRAME, it is not guaranteed to pass the containing page as a referrer.
If you want to allow multiple linked pages inside the IFRAME to allow a specific domain, then you will need to stick to a JavaScript based solution.
Note however that neither method is completely foolproof.
If I create a widget and embed it in an <iframe> on a site that is from a different domain, how much data about the parent page can the widget read?
Obviously there's no DOM access, but is there any access to other information, such as whether the parent page has a parent, or what the url of the parent page is?
Normally the content of an iframe served from a different domain cannot access the parent in any way. It's like loading the page in a different browser tab.
However, even if served from a different domain, there is a possible man-in-the-middle attack which wil allow access to the parent DOM. This is easier than it sounds -- anyone who has administrative control over a public WiFi access point could carry out this attack (think Starbucks, hotels, airports.)
It is possible to protect against this attack using the HTML5 iframe sandbox attribute -- see below.
The man-in-the-middle attack works as follows. Suppose your page loads off http://yoursite.com and the iframe goes to http://badsite.org
first http://badsite.org redirects to http://yoursite.com/badpage
This is the step that requires a man-in-the-middle attack. The attacker must either be able to get between the user and yoursite.com, or control the answers to your DNS lookup. The goal is to serve the content of http://yoursite.com/badpage from the attacker's site, not your actual site.
The attacker can then serve whatever malicious code they like from the (fake) http://yoursite.org/badpage. Because this is in the same domain as the main page, it will have access to the parent DOM.
The HTML5 iframe sandbox attribute seems to be the way to avoid this. You can read the spec, but the best description might be here.
This seems to be supported on Chrome, IE10, FireFox, Safari.
The spec says that if the "allow-same-origin" attribute is not set, "the content is treated as being from a unique origin." This should prevent your child iframe from accessing any part of the parent's DOM, no matter what the browser thinks the URL is.
Sandbox also lets you disable scripts, pop-ups, the ability to change the top level URL, and other things.
I did a little google search, and it turns out that normally you cannot access the internal guts of the Iframe if the the content is another domain (same origin policy), however there's an article here which can give you some ways around that.
I have to use an embedded search engine in my website which it has it's own style.Now i would like to change just the back-color of table which is presenting in my website. Can you please let me know if this is possible or not?
I already tried adding some style to the header of my page but the link still following the style from original stylesheet.
Thanks
That's not possible if the embedded page isn't served by the same domain (including port).
That's a security restriction.
If you want this kind of interaction, you'll need to have some control of the server of the embedded page in order to set permissions : https://developer.mozilla.org/en/http_access_control
Another (rogue) solution is to fetch the page server-side and to embed it directly in your page.
I'm trying to post to the login form of an application on another subdomain of my site. It's a third party app that I don't have source access to.
I know that you can't access most features of a cross-domain iframe because of same origin policy. All I need to access, however, is the URL that's been redirected to (via JavaScript) within the iframe. It has a session token that I want to pass through.
That seems like something that might be safe enough to be allowed, but I haven't found a way to do it yet. I'm using jQuery, and I've tried $('iframe').contents(), but I seem to have no permissions at all on that object. I've also checked $('iframe').attr('src'), but it remains as the pre-redirect URL. Is there another way?
No, you don't have access to any properties within an iframe. You only have access to the outer positioning and styling properties.
This is why frames are such a pain to work with. I usually only use them if I don't care what is done within them.
Can you not do a server-side authentication and token passing? Instead of having the client do the authentication, can you not do that on your server? You may need to do some extra work to create the HTTP request and parse the response, but you avoid any iframe issues.
Bottom line is iframes probably aren't the best to rely on(especially when it comes to cross-browser functionality) for important things like authentication.
Try this example (method 2) in which the author sets up another iframe inside the first, loading a page at the original domain.
The inner page is allowed to call javascript on the outer parent, since they are loaded in the same domain.
Simply load the inner page with appropriate parameters, which can be passed on to the parent.