Ok - really dumb question alert:
Why do all the new web apps and services use iframes for adding content to pages?
They all do it - facebook, twitter, gmail, disqus etc etc.
The only reasons I can think of are:
- It prevents users from messing about with the behaviour and style of the elements inside it
- it stops the elements inside from messing up any markup already on the page
Are there any other reasons for this and what are the alternatives?
Besides your reason (which is a rather relevant one), iframes are used to perform cross-domain requests safely.
Tweeting by using Ajax to POST from your domain to twitter.com won't work — the browser just won't allow it.
using iframes, you're almost sure of the final visual aspect as it doesnt interefere with user css/js... and it isolate the widget from the website environnement.
It may be much more complicated to embed a custom javascript, due to cross domains restrictions also.
Another reason to use iframes when submitting content is that iframes allow you to have multicontent forms with ajax. For example images or videos and text.
Related
client push me to change the CSS styles of an external site which is included in an iframe. Is it possible to do that? I found topics from 2011 with a solution, but after I tried to do that with CSS, js, jquery - I think is not possible if the site is not hosted by the same domain.
It's still not possible for security reasons. In order to allow this, you'd need control of both sites, and even then, you'd be potentially opening yourself up to allowing XSS attacks on the target site. Your best bet would see if the target site has an API that you could pull data from and display on your site with whatever styling you want. That's a separate topic altogether though.
I want to create embedable widgets for a Rails app, that would allow users to interact with the app from external websites.
I was all set to try using iframes to achieve this. But then I found a couple of forum responses that seemed to suggested iframes are not the best way to achieve this, and instead to use JS to embed HTML elements. This surprised me - I thought iframes would be a clear winner simply because of the isolation of CSS and scripts.
So, what is the best way to embed (limited) app functionality in a third party website. This interaction will be limited to login and a single simple form. Is iframes of JS embed the best way to go? And as a side question, are there security issues to be aware of with either approach?
I think using iframes suck hard. It's just not the feeling of a whole website, it's like a website inside another, mostly the styles won't match, or you have a scrollbar or the responsive layout is not applying right. So here's a little pro/con list:
iframe PRO:
requests are not cross site origin (most likely more secure)
"sandbox" javascript (no conflicts)
iframe CON:
style guides
history not changing (e.g. if you do a submit a form with GET you cannot paste the URL and send it to a friend)
js PRO:
Full control about the navigation (you can override link clicks with $.load etc).
Ability of changing the browser history (history API, see MDN)
smooth handling of html components
style's are automatically inherited
js CON:
CORS see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Handle (override) events like link clicking, form submitting. (see Sending multipart/formdata with jQuery.ajax)
Sessions/cookies
I wrote a little rails plugin which allows you to embed your rails app as a js frame inside another (it's still really really beta): https://github.com/Elektron1c97/better_frame. The plugin handles most of the js problems like the link/form events and write to the browser history.
So.. If you need to run an app which should be really embed in a site like a store on another website I would use js embedding.
If you create a custom item to share like the soundcloud player you may want to use an iframe.
If you want third party sites to react to interactions with your widgets then you should absolutely use javascript. Although it is possible to pass messages between different domains through an iframe it is not the most convenient to use. See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
As for using javascript, you can simply ask your users to embed a javascript file that will render your widget. To bypass any CORS issues, your widget should interact with an API that supports JSONP responses.
Now I know there are a lot of resources about same origin policy, but I just want a straight up answer for my specific query as I am really struggling to understand.
I am using Facebook plugins on my website, these create iframes that are only visible in the DOM when I use chromes inspect element etc.
Is there a way that I can access these iFrames properties/attributes at all, or is it a resounding "NO CHANCE!". I am spending far too much time on this and I just need to get a final verdict.
Thanks!
Javascript doesn't see the iframe content. Chrome inspector just loads 2 different websites in the same time, yours and the plugins one, so you can play with both of them.
Just curious, how would you like to change it?
In general, JavaScript cannot access iframe content from outside of the iframe, unless the page domain and the iframe domain share the same protocol and host and port. In your case, this could possibly be done using a proxy server to load the iframe content from your domain.
http://en.wikipedia.org/wiki/Same_origin_policy
I am quite new to web application development and I need to know how would I make other sites use it.
My webapp basically gets a username and returns some data from my DB. This should be visible from other websites.
My options are:
iframe. The websites owners embed an iframe and they pass the userid in the querystring. I render a webpage with the data and is shown inside the iframe.
pros: easy to do, working already.
cons: the websites wont know the data returned, and they may like to know it.
javascript & div. They paste a div and some javascript code in their websites and the div content is updated with the data retrieved by the small javascript.
pros: the webside would be able to get the data.
cons: I could mess up with their website and I don't know wow would I run the javascript code appart from being triggered by a document ready, but I wouldn't like to add jquery libraries to their sites.
There must be better ways to integrate web applications than what I'm thinking. Could someone give me some advice?
Thanks
Iframes cannot communicate with pages that are on a different domain. If you want to inject content into someone else's page and still be able to interact with that page you need to include (or append) a JavaScript tag (that points to your code) to the hosting page, then use JavaScript to write your content into the hosting page.
Context Framework contains embedded mode support, where page components can be injected to other pages via Javascript. It does depend on jQuery but it can always be used in noConflict-mode. At current release the embedded pages must be on same domain so that same-origin-policy is not violated.
In the next release, embedded mode can be extended to use JSONP which enables embedding pages everywhere.
If what you really want is to expose the data, but not the visual content, then I'd consider exposing your data via JSONP. There are caveats to this approach, but it could work for you. There was an answer here a couple of days ago about using a Web Service, but this won't work directly from the client because of the browser's Same Origin policy. It's a shame that the poster of that answer deleted it rather than leave it here as he inadvertently highlighted some of the misconceptions about how browsers access remote content.
I know that, for security reasons, javascript can't read the contents of an iframe if it belongs to a different domain. This makes sense, given that the entire page could be an iframe with snooping scripts outside of the frame.
The question is - are there equal limitations in the other direction? Can javascript within an iframe (from a different domain) read and manipulate the dom in its parent window?
Thanks!
You can't.
This would be a security hole. Now that everyone is crazy adding facebook iframes to their sites, imagine if javascript from FB could interact with your page ;)
Anyway, i set up a small example, and got the same origin warning when i tried to get a parent's div from inside the iframe (which was in another domain)
If you want to use this in a two domains that you own (not trying to attack anyone) you can do that using ajax as described Here.