leplatrem/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Presentation

View online
Education


Password Strength, xkcd #936
Don’t let hacker ruin your game. It’s time for a sit down with Betty.
TV Series Mr.Robot
Mention vengance (ex boy/girlfriend etc.)
https://howsecureismypassword.net shows time necessary to crack
Most common passwords of 2016


PasswordDay Pro Tip #1: If your password includes the word “password” it’s time to get a new password.


PasswordDay Pro Tip #4: If you’re a football fanatic, don’t wear your pride as your password. (Team names are super common.)


Tip of the day: Use passphrase NOT password. Hear it from Edward Snowden himself. https://t.co/c436XKpgNp #PrivacyMonth #advocate4privacy (https://twitter.com/MozillaIN/status/684743764712136704?s=03)

Yahoo


500 million Yahoo accounts hacked
More Than One Billion User Identities Were Stolen From Yahoo In 2013

Dropbox


Over 60 million account details stolen

Last.fm


43 million usernames and passwords

LinkedIn password breach


Login credentials for as many as 117 million LinkedIn accounts have been put up for sale online
Most common password was «123456»

Ashley Madison case


Cheat your partner with cheap password ?
Servers hacked


The leak contained a database of around 36 million usernames, with bcrypt-hashed passwords. There is no known way to crack all of these passwords before the heat death of the universe, especially assuming that some are truly random, but we can crack the worst ones.
Conveniently, the web is full of known-password lists that anyone can just download. The two we chose for this crack, which are widely available, are the so-called 500 worst passwords of all time (compiled in 2008) and the 14-million-strong password list from the rockyou hack.


Most common password on Ashley Madison was «123456»
Taking a closer look at cracked Ashley Madison passwords

Tutorials


Create secure passwords to keep your identity safe


How to Choose Strong Passwords (video)


Create a Password You Can Remember


7 Ways To Make Up Passwords That Are Both Secure & Memorable


Have numbers


Have upercase/lowercase


Have special characters


Does not belong to a dictionnary (as a whole)


No birth date, phone number, spouse name, pet name, kid name, login name...


Use a note (document, piece of paper, ...) where you have additional words to pick.
This is like home made 2-factor auth.


Privacy Basics: Passwords, Tracking, and Data Retention


Insecure passwords on MDN


Information Security Basics on MDN


Reading


Why the password has become almost completely useless


## index.html
<!DOCTYPE html><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type='text/css'>
body {
  font-family:'Helvetica';
  letter-spacing:-5px;
  background:#000;
  background-size:100%;
  color:#fff;
  margin:0;
  padding:0;
  font-weight:bold;
}

h1, h2, h3, p {
  margin:0;
}

em, a {
  font-style:normal;
  color:#8dbd0c;
}

.example {
  color:#8d8d8d;
}

a {
  background:#34d0e7;
  color:#000;
  text-decoration:none;
}

img {
  width:100%;
}

div {
  cursor:pointer;
  cursor:hand;
  position:absolute;
  top:0px;
  left:0px;
  padding:75px;
  line-height:97%;
}

div.center {
  text-align:center;
}

div.imageText {
  text-shadow:0px 0px 5px rgba(0,0,0,0.2);
}

notes {
    display:none;
}
/* normally not good, but ok in context of full screen directional navigation */
:focus {
    outline: 0;
}
</style><script type='text/javascript'>
window.onload = function() {
  var s = document.getElementsByTagName('div'), ti, i;
  for (i = 0; i < s.length; i++) s[i].setAttribute('tabindex', 0);
  if (!s.length) return;
  var big = window.big = { current: 0, forward: fwd, reverse: rev, go: go, length: s.length };
  function resize() {
    var w = window.innerWidth, h = window.innerHeight, e = s[big.current];
    e.style.fontSize = h + 'px';
    function pass(cinch, start) {
      for (var i = start; i > 0 && (e.offsetWidth > w || e.offsetHeight > h); i -= cinch) {
        e.style.fontSize = i + 'px';
      }
      return i + cinch;
    }
    pass(2, pass(5, pass(10, h - 2)));
    e.style.marginTop = (h - e.offsetHeight) / 2 + 'px';
  }
  function go(n) {
    big.current = n;
    var e = s[n], t = parseInt(e.getAttribute('data-timeToNext') || 0, 10),
      notes = e.getElementsByTagName('notes');
    document.body.className = e.getAttribute('data-bodyclass') || '';
    for (i = 0; i < s.length; i++) s[i].style.display = 'none';
    e.style.display = 'inline';
    e.focus();
    for (i = 0; typeof console === 'object' && i < notes.length; i++) console.log('%c%s: %s', 'padding:5px;font-family:serif;font-size:18px;line-height:150%;', n, notes[i].innerHTML.trim());
    if (e.firstChild && e.firstChild.nodeName === 'IMG') {
      document.body.style.backgroundImage = 'url("' + e.firstChild.src + '")';
      e.firstChild.style.display = 'none';
      if ('classList' in e) e.classList.add('imageText');
    } else {
      document.body.style.backgroundImage = '';
      document.body.style.backgroundColor = e.style.backgroundColor;
    }
    if (ti !== undefined) window.clearInterval(ti);
    if (t > 0) ti = window.setTimeout(fwd, t * 1000);
    resize();
    if (window.location.hash !== n) window.location.hash = n;
    document.title = e.textContent || e.innerText;
  }
  document.onclick = function() { go(++big.current % s.length); };
  function fwd() { go(Math.min(s.length - 1, ++big.current)); }
  function rev() { go(Math.max(0, --big.current)); }
  document.onkeydown = function(e) {
    if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
    if (e.which === 37 || e.which === 33 || e.which === 38) rev();
  };
  document.ontouchstart = function(e) {
    var x0 = e.changedTouches[0].pageX;
    document.ontouchend = function(e2) {
      var x1 = e2.changedTouches[0].pageX;
      if (x1 - x0 < 0) fwd();
      if (x1 - x0 > 0) rev();
    };
  };
  function parse_hash() {
    return Math.max(Math.min(s.length - 1,
      parseInt(window.location.hash.substring(1), 10)), 0);
  }
  if (window.location.hash) big.current = parse_hash() || big.current;
  window.onhashchange = function() {
    i = parse_hash();
    if (i !== big.current) go(i);
  };
  window.onresize = resize;
  go(big.current);
};
</script></head><body>
<div><em>Secure passwords</em> without headache</div>
<div>326 websites → <em>one</em> password 😱</div>
<div>Why ?</div>
<div><em>326</em> different passwords 😎</div>
<div>Only <em>one</em> recipe</div>
<div><strike>Password</strike> Passphrase</div>
<div class="example">Betahaus gracia quiche drilling !</div>
<div>Blend website name / URL</div>
<div><span style="color: red">☻</span>+<span style="color: yellow">☻</span>=<span style="color: #FF6600">☻</span></div>
<div><span style="color: #FF6600">☻</span> = ? </div>
<div><span style="color: #FF6600">☻</span>=<span style="color: #ff4900">☻</span>+<span style="color:#ff9200">☻</span>?</div>
<div><span style="color: #FF6600">☻</span>=<span style="color: #ff9200">☻</span>+<span style="color:#ff4900">☻</span>?</div>
<div><span style="color: #FF6600">☻</span>=<span style="color: #FF6600">☻</span>+<span style="color:#FF6600">☻</span>?</div>
<div>Simple rules → <em>creativity</em> 🐬</div>
<div>facebook.com <br/>→ 8 letters, 4 vowels, 4 consonants</div>
<div><em>8</em> Betahaus <em>4</em> gracia quiche drilling ! <em>4</em></div>
<div>amazon.com <br/>→ starts with vowel</div>
<div>6 B<em>E</em>t<em>A</em>h<em>AU</em>s 3 gr<em>A</em>c<em>IA</em> qu<em>I</em>ch<em>E</em> dr<em>I</em>ll<em>I</em>ng</span> ! 3</div>
<div>gmail.com <br/>→ a, i, o</div>
<div>5 Bethus 2 gr quche drllng ! 3</div>
<div>ebay<em>.fr</em> <br/>→ french, use <em>€</em> sign</div>
<div><em>One recipe</em> → infinity 🤓</div>
<div>Two-factor authentication</div>
<div>Receive code via SMS <span class="example">(Gmail etc.)</span></div>
<div><em>Extra word</em> from «cheat sheet»</em></div>
<div>Start <em>today</em>!</div>
</body>
</html>
	<!DOCTYPE html><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type='text/css'>
	body {
	font-family:'Helvetica';
	letter-spacing:-5px;
	background:#000;
	background-size:100%;
	color:#fff;
	margin:0;
	padding:0;
	font-weight:bold;
	}

	h1, h2, h3, p {
	margin:0;
	}

	em, a {
	font-style:normal;
	color:#8dbd0c;
	}

	.example {
	color:#8d8d8d;
	}

	a {
	background:#34d0e7;
	color:#000;
	text-decoration:none;
	}

	img {
	width:100%;
	}

	div {
	cursor:pointer;
	cursor:hand;
	position:absolute;
	top:0px;
	left:0px;
	padding:75px;
	line-height:97%;
	}

	div.center {
	text-align:center;
	}

	div.imageText {
	text-shadow:0px 0px 5px rgba(0,0,0,0.2);
	}

	notes {
	display:none;
	}
	/* normally not good, but ok in context of full screen directional navigation */
	:focus {
	outline: 0;
	}
	</style><script type='text/javascript'>
	window.onload = function() {
	var s = document.getElementsByTagName('div'), ti, i;
	for (i = 0; i < s.length; i++) s[i].setAttribute('tabindex', 0);
	if (!s.length) return;
	var big = window.big = { current: 0, forward: fwd, reverse: rev, go: go, length: s.length };
	function resize() {
	var w = window.innerWidth, h = window.innerHeight, e = s[big.current];
	e.style.fontSize = h + 'px';
	function pass(cinch, start) {
	for (var i = start; i > 0 && (e.offsetWidth > w \|\| e.offsetHeight > h); i -= cinch) {
	e.style.fontSize = i + 'px';
	}
	return i + cinch;
	}
	pass(2, pass(5, pass(10, h - 2)));
	e.style.marginTop = (h - e.offsetHeight) / 2 + 'px';
	}
	function go(n) {
	big.current = n;
	var e = s[n], t = parseInt(e.getAttribute('data-timeToNext') \|\| 0, 10),
	notes = e.getElementsByTagName('notes');
	document.body.className = e.getAttribute('data-bodyclass') \|\| '';
	for (i = 0; i < s.length; i++) s[i].style.display = 'none';
	e.style.display = 'inline';
	e.focus();
	for (i = 0; typeof console === 'object' && i < notes.length; i++) console.log('%c%s: %s', 'padding:5px;font-family:serif;font-size:18px;line-height:150%;', n, notes[i].innerHTML.trim());
	if (e.firstChild && e.firstChild.nodeName === 'IMG') {
	document.body.style.backgroundImage = 'url("' + e.firstChild.src + '")';
	e.firstChild.style.display = 'none';
	if ('classList' in e) e.classList.add('imageText');
	} else {
	document.body.style.backgroundImage = '';
	document.body.style.backgroundColor = e.style.backgroundColor;
	}
	if (ti !== undefined) window.clearInterval(ti);
	if (t > 0) ti = window.setTimeout(fwd, t * 1000);
	resize();
	if (window.location.hash !== n) window.location.hash = n;
	document.title = e.textContent \|\| e.innerText;
	}
	document.onclick = function() { go(++big.current % s.length); };
	function fwd() { go(Math.min(s.length - 1, ++big.current)); }
	function rev() { go(Math.max(0, --big.current)); }
	document.onkeydown = function(e) {
	if (e.which === 39 \|\| e.which === 34 \|\| e.which === 40) fwd();
	if (e.which === 37 \|\| e.which === 33 \|\| e.which === 38) rev();
	};
	document.ontouchstart = function(e) {
	var x0 = e.changedTouches[0].pageX;
	document.ontouchend = function(e2) {
	var x1 = e2.changedTouches[0].pageX;
	if (x1 - x0 < 0) fwd();
	if (x1 - x0 > 0) rev();
	};
	};
	function parse_hash() {
	return Math.max(Math.min(s.length - 1,
	parseInt(window.location.hash.substring(1), 10)), 0);
	}
	if (window.location.hash) big.current = parse_hash() \|\| big.current;
	window.onhashchange = function() {
	i = parse_hash();
	if (i !== big.current) go(i);
	};
	window.onresize = resize;
	go(big.current);
	};
	</script></head><body>
	<div><em>Secure passwords</em> without headache</div>
	<div>326 websites → <em>one</em> password 😱</div>
	<div>Why ?</div>
	<div><em>326</em> different passwords 😎</div>
	<div>Only <em>one</em> recipe</div>
	<div><strike>Password</strike> Passphrase</div>
	<div class="example">Betahaus gracia quiche drilling !</div>
	<div>Blend website name / URL</div>
	<div><span style="color: red">☻</span>+<span style="color: yellow">☻</span>=<span style="color: #FF6600">☻</span></div>
	<div><span style="color: #FF6600">☻</span> = ? </div>
	<div><span style="color: #FF6600">☻</span>=<span style="color: #ff4900">☻</span>+<span style="color:#ff9200">☻</span>?</div>
	<div><span style="color: #FF6600">☻</span>=<span style="color: #ff9200">☻</span>+<span style="color:#ff4900">☻</span>?</div>
	<div><span style="color: #FF6600">☻</span>=<span style="color: #FF6600">☻</span>+<span style="color:#FF6600">☻</span>?</div>
	<div>Simple rules → <em>creativity</em> 🐬</div>
	<div>facebook.com <br/>→ 8 letters, 4 vowels, 4 consonants</div>
	<div><em>8</em> Betahaus <em>4</em> gracia quiche drilling ! <em>4</em></div>
	<div>amazon.com <br/>→ starts with vowel</div>
	<div>6 B<em>E</em>t<em>A</em>h<em>AU</em>s 3 gr<em>A</em>c<em>IA</em> qu<em>I</em>ch<em>E</em> dr<em>I</em>ll<em>I</em>ng</span> ! 3</div>
	<div>gmail.com <br/>→ a, i, o</div>
	<div>5 Bethus 2 gr quche drllng ! 3</div>
	<div>ebay<em>.fr</em> <br/>→ french, use <em>€</em> sign</div>
	<div><em>One recipe</em> → infinity 🤓</div>
	<div>Two-factor authentication</div>
	<div>Receive code via SMS <span class="example">(Gmail etc.)</span></div>
	<div><em>Extra word</em> from «cheat sheet»</em></div>
	<div>Start <em>today</em>!</div>
	</body>
	</html>