I have implemented many third party apps where the vendor provides me a snippet of code that I just need to place on a page in the website.
What are some ways to do that? Specifically, can an angular2 application be injected in such a manner?
I am building an application and would like to provide the clients the script tag(s), along with validation credentials to place directly on their site and the site would load in the container element on the page and look as it was part of their site.
Suggestions?
This is frequently done with the iframe element. Check out this MDN article.
Related
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.
My boss told me that I've to fill an external HTML form loaded in an iframe in a Phonegap Application with Javascript, but I don't think that is possible for security reasons. But I've seen in the App Store apps like 1Password that can do what I want. 1Password fill external forms and execute the submit button. How can I do something like that? How 1password could avoid the security reasons?
With iOS 8, 1Password put together an app extension that developers embed in the app. Thus, 1Password can only fill out forms in apps that it's included in. It's able to fill out native and web views.
More information can be found here: https://blog.agilebits.com/2014/07/30/introducing-the-1password-app-extension-for-ios-8-apps/
If the PhoneGap app is your company's and you can modify the source, you may be able to manipulate the content in the iframe (depending of XSS protection). If the JavaScript is external to the app, you may be out of luck.
I'm new to Enyo and am trying to implement display interface for my website within an Enyo app.
Basically all that I want to display is the app's toolbar on the top of the page, and the rest of the page would simply display the contents of my website.
Considering that my website is already optimized for responsive display, how do I implement this without encountering Cross-Origin issues?
I think you'll want to embed your site's contents within an iFrame. You haven't said whether the app buttons will need to interact with your site's contents so you may run into some issues there.
You don't quite have enough detail for a better answer. What cross-origin problems do you predict? Where will you be deploying? Will you be pulling the site live or will you have a cached copy you distribute with the Enyo app?
I have an app which is embedded in a facebook page which happens to be an iframe.
There seems to be fb security concerns over usage of external javascript links. So I have replaced all my external links by either downloading them or some other tweak
For eg. js css libraries hosted at googleapis .
However I am facing a serious issue while removing the dependency of a 3rd party called 'Share This' which happens to be a plugin for share widgets of Social Websites like Fb,Twitter,Google Plus.
I have checked some other options like addthis.com but it again depends on importing external javascript which would be an issue again.
Share buttons of twitter and facebook given by them are HTML solution and would require share URL to be specified in advance but my share buttons will get the url to be shared dynamically after some process.
Is there any way which I could create Facebook , Twitter , Google Plus share buttons dynamically with custom url to share ( not the website page Url ).
Any help would be really appreciated ! :)
Cheers :)
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.