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/viennajs
5. 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?
6. The solution
We unify communication between all parties
involved in the process, including the end users.
9. Usersnap Widget
The annotation process of Usersnap is done
by a small JavaScript snippet!
It’s embedded in 3rd party websites.
10. 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
11. 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
12. 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 ;-)
14. Iframe Sandboxing
• Solution for the CSS problem.
• No design restrictions anylonger.
• Clean global scope.
showcase 2
15. 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
16. 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
17. Overwrite Browser defaults
• don‘t trust in browser functions
• example: custom JSON parser.
• such errors are very hard to reproduce.
showcase 5
18. Summary
• Don‘t trust in third party code.
• Use iframe sandboxing for secure
environment.
• Good error checking! Your customer will
thank you!