SlideShare una empresa de Scribd logo
1 de 18
Descargar para leer sin conexión
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?
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.
NoInterwebs?
DemoFallback
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!

Más contenido relacionado

La actualidad más candente

Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...
Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...
Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...
ResellerClub
 
$PENK->{'YAPC::Tiny'};
$PENK->{'YAPC::Tiny'};$PENK->{'YAPC::Tiny'};
$PENK->{'YAPC::Tiny'};
Ping-Hsun Chen
 
Pagelet in action
Pagelet in actionPagelet in action
Pagelet in action
Pu Shiming
 
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Corey Clark, Ph.D.
 

La actualidad más candente (20)

NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN Stack
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stack
 
SGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page InterfaceSGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page Interface
 
Get MEAN! Node.js and the MEAN stack
Get MEAN!  Node.js and the MEAN stackGet MEAN!  Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
 
Performace optimizations and frontend happiness
Performace optimizations and frontend happinessPerformace optimizations and frontend happiness
Performace optimizations and frontend happiness
 
Next generation frontend tooling
Next generation frontend toolingNext generation frontend tooling
Next generation frontend tooling
 
MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013MEAN Stack - Google Developers Live 10/03/2013
MEAN Stack - Google Developers Live 10/03/2013
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
 
Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...
Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...
Ctrl+F5 Ahmedabad, 2017 - BOOST THE PERFORMANCE OF WORDPRESS WEBSITES by Prat...
 
$PENK->{'YAPC::Tiny'};
$PENK->{'YAPC::Tiny'};$PENK->{'YAPC::Tiny'};
$PENK->{'YAPC::Tiny'};
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stack
 
Pagelet in action
Pagelet in actionPagelet in action
Pagelet in action
 
WebSockets and Java
WebSockets and JavaWebSockets and Java
WebSockets and Java
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 
Angular js introduction
Angular js introductionAngular js introduction
Angular js introduction
 
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
 
Mern stack developement
Mern stack developementMern stack developement
Mern stack developement
 
Intro to Knockout.JS for Salesforce1
Intro to Knockout.JS for Salesforce1Intro to Knockout.JS for Salesforce1
Intro to Knockout.JS for Salesforce1
 

Similar a Usersnap and the javascript magic behind the scenes - ViennaJS

Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012
Volkan Özçelik
 
Web development tips and tricks
Web development tips and tricksWeb development tips and tricks
Web development tips and tricks
maxo_64
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
Avi Kedar
 

Similar a Usersnap and the javascript magic behind the scenes - ViennaJS (20)

External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1) External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1)
 
External JavaScript Widget Development Best Practices
External JavaScript Widget Development Best PracticesExternal JavaScript Widget Development Best Practices
External JavaScript Widget Development Best Practices
 
Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012Java scriptwidgetdevelopmentjstanbul2012
Java scriptwidgetdevelopmentjstanbul2012
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Web development tips and tricks
Web development tips and tricksWeb development tips and tricks
Web development tips and tricks
 
Javascript for Wep Apps
Javascript for Wep AppsJavascript for Wep Apps
Javascript for Wep Apps
 
Jinx - Malware 2.0
Jinx - Malware 2.0Jinx - Malware 2.0
Jinx - Malware 2.0
 
Badneedles
BadneedlesBadneedles
Badneedles
 
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
 
Sahi Principles and Architecture
Sahi Principles and ArchitectureSahi Principles and Architecture
Sahi Principles and Architecture
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
 
Angular SEO
Angular SEO Angular SEO
Angular SEO
 
CNIT 129S: Ch 12: Attacking Users: Cross-Site Scripting
CNIT 129S: Ch 12: Attacking Users: Cross-Site ScriptingCNIT 129S: Ch 12: Attacking Users: Cross-Site Scripting
CNIT 129S: Ch 12: Attacking Users: Cross-Site Scripting
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
 
Do you lose sleep at night?
Do you lose sleep at night?Do you lose sleep at night?
Do you lose sleep at night?
 
Here Be Dragons – Advanced JavaScript Debugging
Here Be Dragons – Advanced JavaScript DebuggingHere Be Dragons – Advanced JavaScript Debugging
Here Be Dragons – Advanced JavaScript Debugging
 
FITC - Here Be Dragons: Advanced JavaScript Debugging
FITC - Here Be Dragons: Advanced JavaScript DebuggingFITC - Here Be Dragons: Advanced JavaScript Debugging
FITC - Here Be Dragons: Advanced JavaScript Debugging
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 

Más de Usersnap

Bug Reporting Time Machine for AngularJS
Bug Reporting Time Machine for AngularJSBug Reporting Time Machine for AngularJS
Bug Reporting Time Machine for AngularJS
Usersnap
 
141104 usersnap angular js_jt
141104 usersnap angular js_jt141104 usersnap angular js_jt
141104 usersnap angular js_jt
Usersnap
 
What is Usersnap
What is UsersnapWhat is Usersnap
What is Usersnap
Usersnap
 

Más de Usersnap (17)

Why your voice of customer program should guide your product development
Why your voice of customer program should guide your product developmentWhy your voice of customer program should guide your product development
Why your voice of customer program should guide your product development
 
Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017
Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017
Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017
 
What is Usersnap? An Introduction to bug tracking.
What is Usersnap? An Introduction to bug tracking.What is Usersnap? An Introduction to bug tracking.
What is Usersnap? An Introduction to bug tracking.
 
Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...
Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...
Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...
 
Kundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen Türe
Kundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen TüreKundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen Türe
Kundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen Türe
 
Wie effizientes Bug Tracking Ihre Conversion-Rates verbessert
Wie effizientes Bug Tracking Ihre Conversion-Rates verbessertWie effizientes Bug Tracking Ihre Conversion-Rates verbessert
Wie effizientes Bug Tracking Ihre Conversion-Rates verbessert
 
5 Types of USER ACCEPTANCE TESTING (UAT)
5 Types of USER ACCEPTANCE TESTING (UAT)5 Types of USER ACCEPTANCE TESTING (UAT)
5 Types of USER ACCEPTANCE TESTING (UAT)
 
Fundamentals On Building A Reliable Cloud Infrastructure For Your SaaS Business
Fundamentals On Building A Reliable Cloud Infrastructure For Your SaaS BusinessFundamentals On Building A Reliable Cloud Infrastructure For Your SaaS Business
Fundamentals On Building A Reliable Cloud Infrastructure For Your SaaS Business
 
Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!
 
5 Essential Tips For Improving Your Website Mockups & Prototypes!
5 Essential Tips For Improving Your Website Mockups & Prototypes!5 Essential Tips For Improving Your Website Mockups & Prototypes!
5 Essential Tips For Improving Your Website Mockups & Prototypes!
 
A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...
A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...
A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...
 
20+ fantastic web development newsletters for developers & designers
20+ fantastic web development newsletters for developers & designers20+ fantastic web development newsletters for developers & designers
20+ fantastic web development newsletters for developers & designers
 
23 Amazing Lessons Learned From Interviewing The World's Top Developers!
23 Amazing Lessons Learned From Interviewing The World's Top Developers!23 Amazing Lessons Learned From Interviewing The World's Top Developers!
23 Amazing Lessons Learned From Interviewing The World's Top Developers!
 
An Overview of User Acceptance Testing (UAT)
An Overview of User Acceptance Testing (UAT)An Overview of User Acceptance Testing (UAT)
An Overview of User Acceptance Testing (UAT)
 
Bug Reporting Time Machine for AngularJS
Bug Reporting Time Machine for AngularJSBug Reporting Time Machine for AngularJS
Bug Reporting Time Machine for AngularJS
 
141104 usersnap angular js_jt
141104 usersnap angular js_jt141104 usersnap angular js_jt
141104 usersnap angular js_jt
 
What is Usersnap
What is UsersnapWhat is Usersnap
What is Usersnap
 

Último

TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
 

Último (20)

Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdfThe Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
 
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
 
ManageIQ - Sprint 236 Review - Slide Deck
ManageIQ - Sprint 236 Review - Slide DeckManageIQ - Sprint 236 Review - Slide Deck
ManageIQ - Sprint 236 Review - Slide Deck
 

Usersnap and the javascript magic behind the scenes - ViennaJS