presentations/ffsync-with-persona-2012-03-13/index.html

<!DOCTYPE html>

<meta charset="utf-8">
<title>Firefox Sync without the Sync Key - 2012-03-12</title>

<!-- Your Slides -->
<!-- One section is one slide -->

<section>
    <!-- This is the first slide -->
    <br />
    <div align="center"></div>
    <h1>Firefox Sync<br />without the Sync Key</h1>
    <br />
    <h5 align="center">Ben Adida</h5>
    <footer>13 March 2012</footer>
</section>

<section>
    <!-- This is the first slide -->
    <br />
    <div align="center"></div>
    <h1>My Firefox Everywhere</h1>
    <br />
    <h5 align="center">Ben Adida</h5>
    <footer>13 March 2012</footer>
</section>

<section>
<br /><br /><br /><br />
<h2>User Benefit<br />&amp; Control</h2>
</section>

<section>
<h2>this talk</h2>
<br />
<ul>
<li> features and threats</li>
<li> FF sync</li>
<li> assumption &amp; UX goal</li>
<li> Persona Options 1, 2, 3 and 4</li>
<li> a recommendation</li>
</ul>
</section>

<section>
<h2>My Firefox</h2>
<br /><br />
<div align="center">
<table border="1" width="90%">
<tr><th width="50%">Features</th><th>Threats</th></tr>
<tr>
<td style="padding-left: 10px;" valign="top">
sync<br />
standalone<br />
backup<br />
recover-by-email<br />
</td>
<td style="padding-left: 10px;" valign="top">
<strike>monetize data</strike><br />
server breach<br />
phishing
</td>
</tr>
</table>
</div>

</section>

<section>
<h2>Currently</h2>
<div align="center">
<img src="sync-v1.png" height="450px" />
</div>
</section>

<section>
<h2>Our current solution<br />is not being used much<br />
(and maybe not as intended)</h2>
<br/>
<ul>
<li> 0.9% of FF users<br />more than 1/2 have just one device</li>
<li> old device needed to set up new device</li>
<li> <em>not</em> a backup service, users expect it to be</li>
<li> "I’d save that and put it on my Dropbox"</li>
</ul>
</section>

<section>
<h2>Alternative UX</h2>

<div style="padding: 20px;" align="center">
<img width="80%" src="chrome-desktop-signin.png" />
</div>
</section>

<section>
<h2>Alternative UX</h2>

<div style="padding: 20px;" align="center">
<img width="30%" src="chrome-mobile-signin.png" style="border: 1px solid black" />
<img width="30%" src="chrome-mobile-pickemail.png" style="border: 1px solid black" />
<img width="30%" src="chrome-mobile-signedin.png" style="border: 1px solid black" />
</div>
</section>

<section>
<h2>Persona: we have accounts</h2>
<br />
<div align="center"><img width="60%" src="browserid.png" /></div>
</section>

<section>
<h2>Options</h2>
<br />
<ul style="list-style: none;">
<li> #0 &mdash; keep improving Sync UX</li>
<li> #1 &mdash; Persona authentication</li>
<li> #2 &mdash; Persona key wrapping</li>
<li> #3 &mdash; Persona key wrapping &amp; recovery</li>
<li> #4 &mdash; Persona selective key wrapping</li>
</ul>
</section>

<section>
<h2>Option #0<br />
Keep improving Sync UX</h2>
<br /><br />
<ul>
<li>sync, <strike>standalone</strike>, <strike>backup</strike>, <strike>recover-by-email</strike></li>
<li>resists: server breach, phishing</li>
</ul>
</section>

<section>
<h2>#1 &mdash; Persona authentication</h2>
<div align="center">
<img src="sync-option-1.png" height="350px" />
</div>
<ul>
<li>sync, standalone, backup, recover-by-email</li>
<li>resists: <strike>server breach</strike>, <strike>phishing</strike></li>
</ul>
</section>

<section>
<h2>#2 &mdash; Persona key wrapping</h2>
<div align="center">
<img src="sync-option-2.png" height="350px" />
</div>
<ul>
<li>sync, standalone, backup, <strike>recover-by-email</strike></li>
<li>resists: server breach, <strike>phishing</strike></li>
</ul>
</section>

<section>
<h2>wait, how does that work?</h2>
<div align="center">
<img src="keywrapping-userkey.png" height="450px" />
</div>
</section>

<section>
<h2>and then the data?</h2>
<div align="center">
<img src="keywrapping-sync.png" height="450px" />
</div>
</section>

<section>
<h2>#3 &mdash; key wrapping &amp; recovery</h2>
<div align="center">
<img src="sync-option-3.png" height="350px" />
</div>
<ul>
<li>sync, standalone, backup, recover-by-email</li>
<li>resists: (partial) server breach, <strike>phishing</strike></li>
</ul>
</section>

<section>
<h2>#4 &mdash; selective key wrapping</h2>
<br />
<h4>Most Data: recoverable</h4>
<ul>
<li>sync, standalone, backup, recover-by-email</li>
<li>resists: <strike>server breach</strike>, <strike>phishing</strike></li>
</ul>
<br />
<h4>Sensitive Data: key-wrapped</h4>
<ul>
<li>sync, standalone, backup, <strike>recover-by-email</strike></li>
<li>resists: server breach, <strike>phishing</strike></li>
</ul>
</section>

<section>
<h2>Opinion:<br />selective key wrapping</h2>
<br />
<ul>
<li> just sync is not enough</li>
<li> bookmarks, apps, add-ons lower value than<br />most Web accounts that are easily phishable</li>
<li> not sure how to do key recovery yet</li>
<li> clearing web passwords because of<br />Persona reset is good balance</li>
</ul>
</section>

<section>
  <h2>Summary</h2>
  <br />
  <ul>
    <li> user benefit</li>
    <li> features: sync, standalone, backup, recovery</li>
    <li> different user data, different threat model</li>
    <li> no strict security/usability continuum,<br />but some clear tradeoffs</li>
    <li> are we making our users safer?</li>
  </ul>
</section>


<!-- Your Style -->
<!-- Define the style of you presentation -->

<!-- Maybe a font from http://www.google.com/webfonts ? -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>

<style>
  html { background-color: black; }
  body {background-color: white;}
  /* A section is a slide. It's size is 800x600, and this will never change */
  section {
      /* The font from Google */
      font-family: 'Open Sans', arial, serif;
      font-size: 2em;
  }
  h1, h2, h3 {
      margin-top: 30px;
      text-align: center;
  }
  h4 {
  margin-left: 50px;
  }
  ul {
      margin-left: 120px;
  }
  li {
      padding-bottom: 10px;
  }
  a { color: #FF0066; } a:hover {text-decoration: underline;}
  footer { position: absolute; bottom: 50px; right: 50px; }

  /* Transition effect */
  /* Feel free to change the transition effect for original
     animations. See here:
     https://developer.mozilla.org/en/CSS/CSS_transitions
     How to use CSS3 Transitions: */
  section {
      -moz-transition: left 400ms linear 0s;
      -webkit-transition: left 400ms linear 0s;
      -ms-transition: left 400ms linear 0s;
      transition: left 400ms linear 0s;
  }

  /* Before */
  section { left: -150%; }
  /* Now */
  section[aria-selected] { left: 0; }
  /* After */
  section[aria-selected] ~ section { left: +150% }
</style>

<style>
pre {
  font-family: Courier;
  font-size: 0.9em;
  margin-left:20px;
  border: 2px solid #888;
  background: lightyellow;
  padding: 15px;
  margin-right: 20px;
}
</style>


<!-- {{{{ *****************  DZSlides CORE 2.0b1 *************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->

<!-- This block of code is not supposed to be edited, but if you want to change the behavior of the slides, feel free to hack it ;) -->

<!-- Default Style -->
<style>
  * { margin: 0; padding: 0; }
  details {display: none;}
  body {
    width: 800px; height: 600px;
    margin-left: -400px; margin-top: -300px;
    position: absolute; top: 50%; left: 50%;
    overflow: hidden;
  }
  html {
    overflow: hidden;
  }
  section {
    position: absolute;
    pointer-events: none;
    width: 100%; height: 100%;
  }
  section[aria-selected] { pointer-events: auto;}
  body {display: none}
  body.loaded {display: block}
</style>

<script>
  var friendWindows = [];
  var idx = 1;
  var slides;

  /* main() */

  window.onload = function() {
    slides = document.querySelectorAll("body > section");
    onhashchange();
    setSlide();
    document.body.className = "loaded";
    setupTouchEvents();
    onresize();
  }

  /* Handle keys */

  window.onkeydown = function(e) {
    // Don't intercept keyboard shortcuts
    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
      return;
    }
    if ( e.keyCode == 37 // left arrow
      || e.keyCode == 38 // up arrow
      || e.keyCode == 33 // page up
    ) {
      e.preventDefault();
      back();
    }
    if ( e.keyCode == 39 // right arrow
      || e.keyCode == 40 // down arrow
      || e.keyCode == 34 // page down
    ) {
      e.preventDefault();
      forward();
    }

    if ( e.keyCode == 32) { // space
        e.preventDefault();
        toggleContent();
    }
  }

  /* Touch Events */

  function setupTouchEvents() {
    var orgX, newX;
    var tracking = false;

    var body = document.body;
    body.addEventListener("touchstart", start, false);
    body.addEventListener("touchmove", move, false);

    function start(e) {
      e.preventDefault();
      tracking = true;
      orgX = e.changedTouches[0].pageX;
    }

    function move(e) {
      if (!tracking) return;
      newX = e.changedTouches[0].pageX;
      if (orgX - newX > 100) {
        tracking = false;
        forward();
      } else {
        if (orgX - newX < -100) {
          tracking = false;
          back();
        }
      }
    }
  }

  /* Adapt the size of the slides to the window */

  window.onresize = function() {
    var sx = document.body.clientWidth / window.innerWidth;
    var sy = document.body.clientHeight / window.innerHeight;
    var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
    document.body.style.MozTransform = transform;
    document.body.style.WebkitTransform = transform;
    document.body.style.OTransform = transform;
    document.body.style.msTransform = transform;
    document.body.style.transform = transform;
  }
  function getDetails(idx) {
    var s = document.querySelector("section:nth-of-type("+ idx +")");
    var d = s.querySelector("details");
    return d?d.innerHTML:"";
  }
  window.onmessage = function(e) {
    msg = e.data;
    win = e.source;
    if (msg === "register") {
      friendWindows.push(win);
      win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), "*");
      win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
      return;
    }
    if (msg === "back") back();
    if (msg === "forward") forward();
    if (msg === "toggleContent") toggleContent();
    // setSlide(42)
    var r = /setSlide\((\d+)\)/.exec(msg);
    if (r) {
        idx = r[1];
        setSlide();
    }
  }

  /* If a Video is present in this new slide, play it.
     If a Video is present in the previous slide, stop it. */

  function toggleContent() {
    var s = document.querySelector("section[aria-selected]");
    if (s) {
        var video = s.querySelector("video");
        if (video) {
            if (video.ended || video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
    }
  }

  /* If the user change the slide number in the URL bar, jump
     to this slide. */

  window.onhashchange = function(e) {
    var newidx = ~~window.location.hash.split("#")[1];
    if (!newidx) newidx = 1;
    if (newidx == idx) return;
    idx = newidx;
    setSlide();
  }

  /* Slide controls */

  function back() {
    if (idx == 1) return;
    idx--;
    setSlide();
  }
  function forward() {
    if (idx >= slides.length) return;
    idx++;
    setSlide();
  }
  function setSlide() {
    var old = document.querySelector("section[aria-selected]");
    var next = document.querySelector("section:nth-of-type("+ idx +")");
    if (old) {
      old.removeAttribute("aria-selected");
      var video = old.querySelector("video");
      if (video) { video.pause(); }
    }
    if (next) {
      next.setAttribute("aria-selected", "true");
      var video = next.querySelector("video");
      if (video) { video.play(); }
    } else {
      console.warn("No such slide: " + idx);
      idx = 0;
      for (var i = 0; i < slides.length; i++) {
          if (slides[i].hasAttribute("aria-selected")) {
              idx = i + 1;
          }
      }
    }
    window.location.hash = idx;
    for (var i = 0; i < friendWindows.length; i++) {
        friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), "*");
    }
  }
</script>
<!-- vim: set fdm=marker: }}} -->