4. What does our bookmarklet do?
• Check login state
• Rewrites the page
• Interactive UI
• Analyzes DOM & CSS
• Preview UI
• Transmits Data
• Reports back status
5. Some obvious challenges
• Fast hit detection elementFromPoint()
• Robustly render UI CSS sandboxing
• Secure API calls XDM + USTORE + HMAC
6. Some obvious challenges
• Fast hit detection elementFromPoint()
• Robustly render UI CSS sandboxing
• Secure API calls XDM + USTORE + HMAC
7. Safe but naïve hit detection method
1. Get positions and sizes of all possible hits.
2. On mouse hover, look for the “best” hit.
3. Factor in z-index, nesting, and sizes to
disambiguate.
Many problems: slow, imprecise, breaks on reflow.
8. Much better hit detection
• document.elementFromPoint()
• Does everything that we want.
• Will return an iframe if anywhere on an iframe.
• Can use the iframe’s document to find
elements nested (e.g., gmail).
9. Some obvious challenges
• Fast hit detection elementFromPoint()
• Robustly render UI CSS sandboxing
• Secure API calls XDM + USTORE + HMAC
10. Three steps
• Programmatically reset
(block, inline, input, li, table, tbody, tr, td)
• Use specific selectors and !important
(avoids having to write brittle CSS)
• Customize jQuery internals
(.style takes flag for important for animations)
12. Not perfect but good enough
Original Site Our CSS
Their CSS with
!important
Inline resets Our Custom
jQuery with
Our UI !important
13. Some obvious challenges
• Fast hit detection elementFromPoint()
• Robustly render UI CSS sandboxing
• Secure API calls XDM + USTORE + HMAC
14. API challenges
• Our code is running on a 3rd party page.
• We don’t want host page to be able to infer
user’s secret.
• We don’t want our API calls to be spoofed.
15. How we send a signed XDP
foo.com/
XDP.js
page clipboard.com
Clip data via HMAC with
easyXDM.js secret key
Client local storage in the
User’s browser Secret Key
clipboard.com domain
Promise token for asynch result check
19. Button attributes
data-start – CSS selector for first (or only)
element to be copied.
data-end – optional selector to specify range.
data-theme – light or dark (default)
style – restricted styles (position, display,
float, margin, top, right, bottom,
left)
21. Bookmarklets as applications
• Bookmarklets are one of the few methods for
creating in-browser mashups between services.
• There are a ton a gotchas around security,
safety, and performance.
• See http://clipboard.com/tools for embed
instructions and details.