usersnap and the javascript magic behind the scenes - viennajs
DESCRIPTION
The Usersnap guys (@fdorfbauer and @josef_trauner) present at ViennaJS what they are doing behind the scenes with their widget and which problems can occur when you develop a widget which will be included in 3rd party sites! The example code is located in our github repo: https://github.com/usersnap/public/tree/master/misc/viennajsTRANSCRIPT
2014-05-28 Sektor5
Usersnap for developers and the Javascriptmagic we do behind the scenes
Who are we?
What is Usersnap?
The problem
Working on a web project can be hard
The problem
Communication is not always frictionless, due to differences in the background.
Are you talking about the logo?
What‘s a Logo?
What is this rainbow-shaped thing on the top of your page?
The solution
We unify communication between all parties involved in the process, including the end users.
Demo + How we serve your screenshot.
No
Inte
rweb
s?De
mo
Fallb
ack
Usersnap Widget
The annotation process of Usersnap is done by a small JavaScript snippet!
It’s embedded in 3rd party websites.
3rd Party Sites ;-)
Have you ever tried adding code in unkown 3rd party sites?• external libraries/scoping (jQuery, SVG,…)• overwrite CSS properties• Iframe sandboxing• transmitting data: Cross Origin Problem• overwrite JS defaults
external Libraries
• It can stop your javascript code.• OR it can stop the site which has
embedded your code -> NO GO.• You could probabily overwrite a used
library. -> showcase 0• Use your own static codebase.• Do not rely on any external CDN
Overwrite CSS properties
• You are not able to control every possible property!
• Never say: No one will use such properties!• We thought we could do that job ;-)
Overwrite CSS properties
showcase 1
Iframe Sandboxing
• Solution for the CSS problem.• No design restrictions anylonger.• Clean global scope.
showcase 2
Transmitting Data
• JsonP– small get requests (permissions, key
verification).• HTTP-Post
– Transfer data to the server.– Cross Origin Problem.– Important to deliver error messages
showcase 3
Transmitting Data
• Solution: iframe PostMessages– work with Cross Origin Policy
showcase 3B• Problem with PostMessage
– The website itself is using postMessages– again iframe Sandboxing
showcase 4
Overwrite Browser defaults
• don‘t trust in browser functions• example: custom JSON parser.• such errors are very hard to reproduce.
showcase 5
Summary
• Don‘t trust in third party code.• Use iframe sandboxing for secure
environment.• Good error checking! Your customer will
thank you!