2014-05-28 Sektor5
Usersnap for developers and the Javascript
magic 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...
The solution
We unify communication between all parties
involved in the process, including the end users.
Demo +
How we serve your screenshot.
NoInterwebs?
DemoFallback
Usersnap Widget
The annotation process of Usersnap is done
by a small JavaScript snippet!
It’s embedded in 3rd party websi...
3rd Party Sites ;-)
Have you ever tried adding code in unkown
3rd party sites?
• external libraries/scoping (jQuery, SVG,…...
external Libraries
• It can stop your javascript code.
• OR it can stop the site which has
embedded your code -> NO GO.
• ...
Overwrite CSS properties
• You are not able to control every possible
property!
• Never say: No one will use such properti...
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....
Transmitting Data
• Solution: iframe PostMessages
– work with Cross Origin Policy
showcase 3B
• Problem with PostMessage
–...
Overwrite Browser defaults
• don‘t trust in browser functions
• example: custom JSON parser.
• such errors are very hard t...
Summary
• Don‘t trust in third party code.
• Use iframe sandboxing for secure
environment.
• Good error checking! Your cus...
Upcoming SlideShare
Loading in …5
×

Usersnap and the javascript magic behind the scenes - ViennaJS

748 views

Published on

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

Published in: Software
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
748
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Usersnap and the javascript magic behind the scenes - ViennaJS

  1. 1. 2014-05-28 Sektor5 Usersnap for developers and the Javascript magic we do behind the scenes
  2. 2. Who are we?
  3. 3. What is Usersnap?
  4. 4. The problem Working on a web project can be hard
  5. 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. 6. The solution We unify communication between all parties involved in the process, including the end users.
  7. 7. Demo + How we serve your screenshot.
  8. 8. NoInterwebs? DemoFallback
  9. 9. Usersnap Widget The annotation process of Usersnap is done by a small JavaScript snippet! It’s embedded in 3rd party websites.
  10. 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. 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. 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. 13. Overwrite CSS properties showcase 1
  14. 14. Iframe Sandboxing • Solution for the CSS problem. • No design restrictions anylonger. • Clean global scope. showcase 2
  15. 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. 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. 17. Overwrite Browser defaults • don‘t trust in browser functions • example: custom JSON parser. • such errors are very hard to reproduce. showcase 5
  18. 18. Summary • Don‘t trust in third party code. • Use iframe sandboxing for secure environment. • Good error checking! Your customer will thank you!

×