I have a dillema of the way web widget apps should be implemented.
Scenario is that website A should present content of website B as a widget. Lets say that the widget content type is webshop, so all that a webshop can offer will be inside a widget. Items, cart, login, checkout, etc, but no redirection to other site. Window stays on Site A.
There is no interaction between websites. No data passed from one to another.
Technologies that will be used are .net Web API as server side, angular as js framework, and all will be implemented as single page app.
I see two scenarios.
Website B will be embeded in website A through iframe
All js, css, and initial html will be somehow embedded into website A and make calls to WebApi services.
I'm not clear how 2 should be done. Giving some bundles of JS, CSS, and HTML to Site A to implement is kind of overhead for both me and site A, and I see a lot of troubles there. Maybe it all should be injected dynamically somehow.
On the other side..iFrame...this seems like a right scenario for use of iframe, but is it?
Any thought is appreciated.
Related
I don't know if this is a PHP or JavaScript code, but what do you call this technique about changing web content? For an instance, the MDC Web demo site. It has an empty content if you view the source, but completely contains all elements if you inspect the page.
Regarding PHP, I think it is done with a PHP code in MDC Web's case, but how exactly? Is this a common technique? I wanna know this method coz it's useful in some cases where there's actually no need to reload the page, but able to change the content and URL.
This is called Single Page Applications (a.k.a SPA).
A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application more.
I've been learning about angularjs and have been very confused about how angular manages to change pages without refreshing and yet have a completely different view.
Are they actually changing the page URL or just hiding all the elements of on page and showing the other?
This video by CodeSchool explains it quite well.
AngularJS is just a tool that allows you to build single-page web applications with relative ease. What you are looking for is actually the definition of Single-Page Application:
Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.
Also, from http://www.johnpapa.net/:
A SPA is fully (or close) loaded on the initial page load, it’s key
resources are preloaded, and progressively downloads features as
required.
And, more specific to your particular question:
When a user clicks on a menu item, the SPA sees that url and
translates it to a View that should be displayed. If the view has not
been seen before, the application may make an HTTP request to retrieve
the HTML template for the view. Then it will compose the view, fill in
the template, and display the view in the appropriate location within
the shell. If the view has already been viewed once, the browser may
have cached it and the router will be smart enough not to make the
request. This is one way a SPA can reduce round-tripping to and from a
server, and thus improve performance.
Keep in mind that this behavior is attained with the use of JavaScript, and does NOT require any specific library or framework (such as AngularJS), although you will probably want to learn how to use one to facilitate the process.
I also recommend you check these resources:
http://johnpapa.net/building-single-page-apps-with-knockout-jquery-and-web-api-ndash-the-story-begins/
http://www.johnpapa.net/pageinspa/
If your url's are mapped with the $routeProvider, you can reload a controller invoking $route.reload().
I have a Ruby on rails web application that helps users to create their portfolio. Initially they choose a template and they have the ability to change the text of the chosen template. here I provide them with a specific fields like "headline", "description", "projects"... these fields are validated server side to not permit html code.
I have two other fields:
embed video code (from youtube, vimeo etc...)
Another field which allow addition of custom JavaScript.(maybe they want to add a popup script, or a tracking code or whatever).
When they finish editing the template, they click "publish" button and their portfolio can be seen on their sub-domain which is based on my app domain ex: user-subdomain.myapp.com/portfolio
My question is : can allowing users to put in custom JavaScript or embeding video code affect the security of my application? Am I vulnerable to XSS, Hijacking, or hacking? If I am, how do I fix those issues using Rails?
If they are entering JavaScript code which you will then store and include when showing a page to other users, then yes, it's a security hole. It means that they can do anything you can do on that page, in the context of someone else's user account; this could be used to steal information from other users, etc.
If only they will ever view the page with the embedded JavaScript, no, it doesn't make your page less secure; they coudl easily inject JavaScript into your page via bookmarklets or even just using the console.
I'm working on a web app which uses Backbone's HTML5 History option. In order to avoid having to code everything on the client and on the server, I'm using this method to route every request to index.html
I was wondering if there is a way to get Twitter Cards to work with this setup, as currently it can't read the page as everything is loaded in dynamically with Javascript.
I was thinking about using User Agents to detect whether it's the TwitterBot, and if it is, serving a static version of the page with the required meta-tags. Would this work?
Thanks.
Yes.
At one job we did this for all the SEO/search/facebook stuff etc.
We would sniff the user-agent, and if it was one of the following sniffers
Facebook Open Graph
Google
Bing
Twitter
Yandex
(a few others I can't remember)
we would redirect to a special page that was written to dump all the relevant data about the page for SEO purposes into a nicely formatted (but completely unstyled) page.
This allowed us to retain our google index position and proper facebook sharing even though our site was a total single-page app in backbone.
Yes, serving a specific page for Twitterbot with the right meta data markup will work.
You can test your results while developing using the card's preview tool.
https://dev.twitter.com/docs/cards/preview (with your static URL or just the tags).
I am about to build a web application and I want to allow other developers extend it with their own applications.
Should I do this with iFrames like Facebook?
Is this a good practice?
Are there other alternatives that let other developers extend my application (that is for the user it looks like it's from my application).
To be specific:
I want developers to be able to code applications that is embedded on my web application. Eg. if I have a file on my application they could provide a way for the users to interact with that file. Maybe a "preview" application that let the users preview the file.
Another application might draw a mindmap tree view of all the user's files.
What is the best way of doing this?
iFrame + Restful API on backend for data exchange?
Let them insert javascript on backend + frontend + html + css on my web application?
Other alternatives?
If you meant "embed" rather than "extend" and you just want people to drop a little box on a page and that's it, then an iframe should be fine.
However, if you want two-way communication or mashupability — rather than "opaque blob of HTML and hope for the best" communication — then a JavaScript or REST API might be a better call.
More specifics would make for an easier answer. If the functionality you need is on the level of an embedded ad or stackoverlflow flair then an iframe would work, if the functionality is more along the lines of a Google Map then an API of some sort would work better.
It depends on what you mean by "extend". When you use iFrames with 3rd parties, presumably vended from different domains than the host page, then you are constrained by cross-domain issues and cannot interact with the contents of those iFrames. If that's not an issue for you, then you can go ahead and try that strategy, but I can't see how merely adding iFrames without interopability is "extending" your web application.