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

1. 2014-05-28 Sektor5
Usersnap for developers and the Javascript
magic we do behind the scenes

2. Who are we?

3. What is Usersnap?

4. The problem
Working on a web project can be hard

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.

7. Demo +
How we serve your screenshot.

8. NoInterwebs?
DemoFallback

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 ;-)

13. Overwrite CSS properties
showcase 1

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!