davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/13ced99f6dcec926bc25b7f500b.../index.html

index.html 34KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>De l’authentification sans mot de passe (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://blog.imirhil.fr/2015/11/25/password-otp.html">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   De l’authentification sans mot de passe (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://blog.imirhil.fr/2015/11/25/password-otp.html">Source originale du contenu</a></h3>

  463.     <p>Après avoir vu <a href="https://blog.imirhil.fr/2015/10/27/stockage-mot-passe.html">comment gérer proprement ses mots de passe</a>, allons un peu plus loin et regardons comment gérer de l’authentification sans mot de passe (ou presque) !</p>

  464. 

  465. <p>L’authentification a pour but de donner l’accès à une ressource protégée en vérifiant par une manière donnée que la personne qui cherche à obtenir l’accès est bien celle qu’elle dit être.

  466. Via un mot de passe ou une phrase de passe, on authentifie une personne par une chose qu’elle sait (son mot de passe).

  467. On pourrait aussi authentifier une personne par ce qu’elle détient, un petit objet physique dont on a la certitude qu’elle en est bien l’unique détentrice.

  468. On a de la chance, de tels objets existent.</p>

  469. 

  470. <p>La difficulté de conception de ces objets est d’arriver à trouver une méthode permettant de prouver qu’on est bien détenteur de l’objet à l’instant où on réalise l’authentification.

  471. On ne peut évidemment pas se baser sur des choses aussi simple qu’un numéro de série inscrit sur l’objet ou qu’il enverrait par un moyen ou par un autre, puisque qu’il suffirait de récupérer ce numéro une seule fois pour pouvoir s’authentifier sans avoir réellement l’objet sur soi.</p>

  472. 

  473. <p>La plupart des systèmes d’authentification de ce type repose donc classiquement sur des clefs de chiffrement (symétrique ou asymétrique) dont la clef privée va être en écriture seule sur l’objet, et dont personne ne pourra donc jamais avoir accès sinon le fabriquant (et généralement même pas son utilisateur).</p>

  474. 

  475. <h1 id="token-physique">Token physique</h1>

  476. 

  477. <h2 id="yubikey">Yubikey</h2>

  478. 

  479. <p>On va commencer par le plus utilisable en pratique, et le plus libre, <a href="https://www.yubico.com/products/yubikey-hardware/">Yubikey</a>.</p>

  480. 

  481. <p><img src="https://blog.imirhil.fr/assets/images/20151125/yubikey.png" alt="Yubikey" class="center" /></p>

  482. 

  483. <p>Une Yubikey est une petite clef USB qui simule un clavier USB.

  484. À l’intérieur se trouve une clef AES en écriture seule (pas de lecture possible de la clef), possédée aussi par Yubico (l’entreprise fabriquant la Yubikey).</p>

  485. 

  486. <p>À chaque appui sur le bouton de la clef, celle-ci va émettre une chaîne composée de son identifiant de clef, d’un compteur de session (s’incrémente à chaque branchement de la clef), d’un compteur d’horloge (s’incrémente 8× par seconde) et d’un compteur d’utilisation (s’incrémente à chaque appui sur le bouton).

  487. La chaîne complète est chiffrée avec la clef AES interne, et envoyée ainsi à l’application qui cherche à vous authentifier.</p>

  488. 

  489. <p>Votre application va alors contacter le serveur de Yubico et lui soumettre la chaîne chiffrée.

  490. Le serveur possédant lui aussi la clef privée, il peut déchiffrer les données et les vérifier.

  491. S’il est capable de déchiffrer les données et que l’identifiant d’utilisateur correspond bien à celui associé à la clef, on est en présence d’une clef valide.

  492. Si les valeurs de tous les compteurs sont bien strictement supérieures à celles de la dernière chaîne validée, on est en présence d’un nouveau identifiant et non d’un rejeu d’une chaîne interceptée.</p>

  493. 

  494. <p>La dernière propriété (la vérification des compteurs) est assez intéressante, puisque même si vous parvenez à subtiliser une clef et à lui faire générer des millions de chaînes pour ensuite la remettre à sa place sans que son propriétaire ne remarque son absence, la prochaine utilisation de la clef invalidera l’intégralité de toutes les chaînes enregistrées (compteur de session ou d’utilisation inférieur au compteur de la clef) !

  495. Vous pouvez même volontairement générer des clefs pour n’importe qui (au pif, une des miennes : <code class="highlighter-rouge">cccccccirlrfrvldfubllgjdjkbdgeejbuvcfcvfdurb</code>, que vous pouvez tester sur le <a href="https://demo.yubico.com/">serveur de démo</a> de Yubico), ça ne compromet pas votre sécurité (sauf à vous permettre de bruteforcer la clef AES 128 de la clef).</p>

  496. 

  497. <p>Une fois la vérification de la chaîne réalisée, le serveur Yubico répond à votre application (via du chiffrement asymétrique) si elle est valide ou non, et votre application autorise alors ou non l’accès à la ressource protégée.</p>

  498. 

  499. <p><a href="https://www.yubico.com/applications/">Pas mal d’applications</a> sont compatibles avec Yubikey. LUKS, PAM, LastPass, GitHub, DropBox, WordPress, Drupal, RoundCube, OwnCloud, j’en passe et des meilleurs.</p>

  500. 

  501. <p>Tous les logiciels nécessaires à l’intégration d’une Yubikey sont <a href="https://github.com/Yubico">libres</a> et <a href="https://packages.debian.org/jessie/yubikey-personalization">intégrés nativement</a> à la plupart des distributions GNU/Linux.

  502. Vous avez même tout le nécessaire pour monter votre propre serveur de validation si vous ne voulez plus dépendre de celui de Yubico.

  503. Attention tout de même, peu d’applications supportent un serveur personnalisé, en particulier les services que vous ne contrôlez pas directement (GitHub, DropBox…).</p>

  504. 

  505. <p>Autre intérêt d’une Yubikey : elle possède 2 entrées en interne, un appelé par un appui court (slot 1), l’autre par un long (slot 2).

  506. On peut donc utiliser une clef pour le serveur Yubico et l’autre pour son serveur personnel, ou encore une clef Yubico et un mot de passe standard classique (mais de 64 caractères aléatoires !!!

  507. À garder par contre bien précieusement et vous n’avez plus le droit de vous séparer de votre clef, quelqu’un y ayant accès peut obtenir votre mot de passe statique).</p>

  508. 

  509. <p>Cette clef ne coûtant que $25, ça en fait un excellent moyen d’authentification à pas trop cher.</p>

  510. 

  511. <p>Petit bémol pour les très geek. Comme cette clef émule un clavier USB, si vous utilisez une disposition de clavier peu conventionnelle (au pif, un bépo ou un dvorak), cette clef ne fonctionne plus (elle est prévue pour fonctionner en qwerty ou en azerty uniquement).

  512. En bidouillant un peu X.Org pour lui signaler que le périphérique USB de la clef doit être en qwerty, mais pas les autres, on peut arriver à utiliser une Yubikey sans trop de galère :</p>

  513. 

  514. <div class="highlighter-rouge"><pre class="highlight"><code>/etc/X11/xorg.conf.d/90-keyboard.conf

  515. Section "InputClass"

  516.     Identifier          "typematrix"

  517.     MatchIsKeyboard     "yes"

  518.     MatchVendor         "TypeMatrix.com"

  519.     MatchProduct        "USB Keyboard"

  520.     Option "XkbModel"   "tm2030USB-102"

  521.     Option "XkbLayout"  "fr,fr"

  522.     Option "XkbVariant" "bepo,"

  523.     Option "XkbOptions" "kpdl:kposs,grp:sclk_toggle,compose:lwin"

  524. EndSection

  525. 

  526. Section "InputClass"

  527.     Identifier          "yubikey"

  528.     MatchIsKeyboard     "yes"

  529.     MatchVendor         "Yubico"

  530.     MatchProduct        "Yubikey"

  531.     Option "XkbModel"   "pc101"

  532.     Option "XkbLayout"  "us"

  533.     Option "XkbVariant" "intl"

  534. EndSection

  535. </code></pre>

  536. </div>

  537. 

  538. <p>Malheureusement, ça ne fonctionne pas forcément sur toutes les configurations, en particulier sur les PC portables (ils ont des configurations USB matérielles tordues et le clavier du PC se retrouve généralement sur le même bus USB que la Yubikey)…

  539. Si vous n’avez pas de chance, vous devrez donc jongler avec le gestionnaire de disposition de clavier de votre environnement de bureau pour passer en qwerty à chaque utilisation de votre clef.</p>

  540. 

  541. <h2 id="totp--hotp">TOTP / HOTP</h2>

  542. 

  543. <p>Une autre solution basée sur un matériel physique dédié : les OTP c100 et c200 de chez <a href="http://www.ftsafe.com/product/otp">FTSafe</a></p>

  544. 

  545. <p><img src="https://blog.imirhil.fr/assets/images/20151125/ftsafe.png" alt="OTP FTSafe" class="center" /></p>

  546. 

  547. <p>Le principe est le même que pour les Yubikeys, une clef privée est embarquée à l’intérieur et ne peut en sortir.

  548. Cette clef privée vous est aussi communiquée sur un bout de papier (dans un envoi séparé physiquement et temporellement de celui du token physique lui-même !!!).

  549. Lorsqu’on appuie sur le bouton, l’écran affiche un numéro à 6 chiffres calculé à partir de la clef privée et d’un compteur (pour la version HOTP / « event based ») ou de l’heure (TOTP / « time based »).</p>

  550. 

  551. <p>Dans le cas d’un HOTP, chaque appui sur le bouton incrémente un compteur <code class="highlighter-rouge">C</code>, et la valeur affichée <code class="highlighter-rouge">V</code> est calculée en appliquant une <a href="https://fr.wikipedia.org/wiki/Keyed-Hash_Message_Authentication_Code">fonction de hachage HMAC</a> avec la clef privée <code class="highlighter-rouge">K</code> : <code class="highlighter-rouge">V = HMAC(K, C)</code>.

  552. Dans le cas de TOTP, on prend l’<a href="https://fr.wikipedia.org/wiki/Heure_Unix">heure courante UNIX</a> <code class="highlighter-rouge">T</code> ramenée à des tranches de <code class="highlighter-rouge">X</code> secondes (généralement 30s) et on calcule de même <code class="highlighter-rouge">V = HMAC(K, T/X)</code>.</p>

  553. 

  554. <p>Quand on veut s’authentifier la première fois auprès d’une ressource, il suffit de recopier sa clef privée et de saisir la valeur affichée et le serveur peut alors identifier votre valeur initiale de compteur (HOTP) ou d’horloge (TOTP).

  555. Pour chaque authentification suivante, on saisit uniquement la valeur affichée et le serveur est capable de faire le même calcul que le token.

  556. Si la valeur calculée est identique à celle fournit par l’utilisateur, on est bien en présence du token physique.<br />

  557. On retrouve la même propriété que pour les Yubikeys : une valeur récupérée à l’instant T n’est plus valable à l’instant T+1, subtiliser discrètement votre token pour en extraire quelques valeurs et le remettre en place ensuite est peine perdue.</p>

  558. 

  559. <p>Les horloges du serveur et du token (TOTP) ou du compteur (HOTP) ne sont pas forcément tout à fait identiques (décalage de l’horloge ou utilisateur qui s’est amusé à appuyer plusieurs fois sur le bouton), le serveur accepte donc une légère tolérance dans la valeur d’horloge et de compteur (en fait il calcule X valeurs et la valeur saisie par l’utilisateur doit être parmi ces X, avec généralement X = 4).<br />

  560. Les petits malins remarqueront qu’il faut donc un token HOTP par service (chaque authentification sur un service désynchroniserait le compteur côté serveur des autres services), alors qu’on peut réutiliser un token TOTP pour autant de service qu’on souhaite (à ceci prêt que tous les services auront accès à votre clef privée et pourraient donc s’authentifier ailleurs à votre place).</p>

  561. 

  562. <p>HOTP &amp; TOTP ont été normalisés par des RFC, respectivement <a href="https://tools.ietf.org/html/rfc4226">4226</a> et <a href="https://tools.ietf.org/html/rfc6238">6238</a>, ils ont donc pléthores d’implémentations disponibles et sont relativement assez intéropérables.

  563. On les trouve généralement dans les solutions de sécurité professionnelles, pour les administrateurs systèmes par exemple.</p>

  564. 

  565. <p>On trouve ces solutions pour quelques dizaines d’euros, ce qui en fait une solution accessible facilement.</p>

  566. 

  567. <h1 id="totp-sur-tlphone-mobile">TOTP sur téléphone mobile</h1>

  568. 

  569. <p>Des solutions existent pour faire du TOTP en version logicielle sur téléphone mobile, l’import de la clef privée se faisant via le scan d’un <a href="https://fr.wikipedia.org/wiki/QRcode">code QR</a>.

  570. On perd simplement la capacité du matériel à empêcher d’extraire votre clef privée (vous vous faites voler votre téléphone éteint ou verrouillé, on peut en extraire la clef quand même).</p>

  571. 

  572. <p>Cette solution est de plus en plus présente, poussée essentiellement par Google et sa solution <a href="https://fr.wikipedia.org/wiki/Google_Authenticator">Google Authenticator</a>.

  573. On peut utiliser <a href="https://f-droid.org/repository/browse/?fdid=org.fedorahosted.freeotp">FreeOTP</a> disponible sur le dépôt <a href="https://f-droid.org/">F-Droid</a> pour se connecter sur énormément de services (Amazon/Heroku, BitBucket/GitHub, Coinbase, Drupal/WordPress/Joomla, Facebook/Tumblr, Keepass/LastPass…).</p>

  574. 

  575. <p><img src="https://blog.imirhil.fr/assets/images/20151125/freeotp.png" alt="Free OTP" class="center" /></p>

  576. 

  577. <p>Le seul soucis que je rencontre est que, alors que je n’ai aucun problème à conserver mes Yubikeys sur moi en permanence, il m’est compliqué d’avoir mon téléphone toujours avec moi.

  578. Il est alors malheureusement compliqué de partager un secret entre plusieurs applications de gestion TOTP, par exemple pour pouvoir s’authentifier avec FreeOTP quand on a son téléphone à portée, mais aussi via <a href="https://gist.github.com/aeris/fd59fd49205cb085374c">la ligne de commande</a>, sauf à conserver le code QR d’origine dans un endroit fiable pour pouvoir l’insérer dans d’autres applications par la suite.</p>

  579. 

  580. <h1 id="certificat-x509">Certificat X.509</h1>

  581. 

  582. <p><a href="https://fr.wikipedia.org/wiki/X.509">X.509</a> est une norme bien compliquée que peu de monde aime toucher tellement elle est bordélique (en particulier parce que basée sur <a href="https://fr.wikipedia.org/wiki/ASN.1">ASN.1</a>, le seul langage plus facilement compréhensible par une machine que par un développeur…).

  583. Elle est essentiellement (non) connue du grand public pour son usage au cœur de <a href="https://fr.wikipedia.org/wiki/Transport_Layer_Security">TLS</a> et donc de <a href="https://fr.wikipedia.org/wiki/HyperText_Transfer_Protocol_Secure">HTTPS</a>.</p>

  584. 

  585. <p>Pour TLS/HTTPS, X.509 est utilisé principalement pour permettre au navigateur d’authentifier de manière (plus ou moins) forte le serveur en face, et ainsi de vous garantir (ou pas) que la machine sur laquelle vous allez saisir vos coordonnées bancaires est bien celle de votre banque (ou pas).

  586. Cette garantie vous est fournie par une des (trop) nombreuses autorités de certification <a href="https://mozillacaprogram.secure.force.com/CA/IncludedCACertificateReport">embarquées directement dans votre navigateur</a> : si l’une d’elles déclare que c’est bien le serveur de votre banque, alors c’est que c’est vrai et que c’est bien le serveur de votre banque.<br />

  587. En pratique, en plus de souvent être d’origine douteuse (Chine, USA, Turquie, France…), la majorité sinon la totalité des autorités de certification se sont faites trouer un jour et/ou ont émis de faux certificats, d’où l’ironie du paragraphe précédent.</p>

  588. 

  589. <p>X.509 permet de faire la vérification dans l’autre sens, et autorise ainsi au serveur de s’assurer de l’identité du client via un certificat client, tout comme le serveur de votre banque vous présente le sien.

  590. Cette possibilité est malheureusement trop peu utilisée, le seul exemple notable étant la tentative de l’administration fiscale française en 2009 qui s’est soldée par un cuisant échec face à la complexité technique engendrée…</p>

  591. 

  592. <p>L’énorme avantage de la solution du certificat X.509 personnel est que c’est la seule solution qui passe l’échelle.

  593. En effet, les solutions précédentes sont utilisables pour un petit groupe d’une dizaine de personnes, après la gestion devient trop complexe (révocation, perte, arrivée d’un petit nouveau…).

  594. X.509 étant basé sur une chaîne de confiance, on peut au contraire créer sa propre autorité de certification, gérée par sa propre <a href="https://fr.wikipedia.org/wiki/Infrastructure_à_clés_publiques">PKI</a>, et tout certificat émis par cette autorité est valide et reconnu comme tel par le système.

  595. On peut alors générer à la chaîne des pilées de certificat sans avoir à toucher à une ligne de configuration d’un des services, alors que les solutions précédentes demandaient une intervention manuelle à chaque ajout/retrait d’une personne.

  596. X.509 fournit aussi tous les outils pour gérer la révocation d’un certificat (perte, départ, compromission…).</p>

  597. 

  598. <p>Cette solution a aussi l’avantage d’être implémentée nativement dans tous les navigateurs web et dans la plupart des outils pouvant utiliser TLS (courriel, messagerie instantanée…).

  599. Par contre, elle reste mal comprise des utilisateurs, demande un peu de gestion régulière (renouveler les certificats chaque année…) et pose parfois des problèmes techniques (importer son certificat utilisateur sur X machines ou navigateurs, logiciels ne supportant pas ou mal ce mode de fonctionnement…).</p>

  600. 

  601. <h1 id="donnes-biomtriques">Données biométriques</h1>

  602. 

  603. <p>Empreintes digitales, oculaires, palmaires… Non, je rigole bien sûr !

  604. Ces solutions ne sont <strong>pas</strong> des solutions d’authentification, mais uniquement d’identification.</p>

  605. 

  606. <p>Une solution d’authentification doit pouvoir être révocable à tout moment en cas de compromission.

  607. Vous pouvez changer votre mot de passe ou révoquer votre Yubikey/C100/X.509, mais vous ne pouvez en aucun cas changer vos empreintes digitales ou votre fond d’œil.

  608. Et pourtant, faites confiance à un gus dans un garage pour vous <a href="http://rue89.nouvelobs.com/2014/12/28/pirater-empreinte-digitale-cette-photo-suffit-256786">pirater vos empreintes digitales</a> et ne sous-estimez jamais l’intelligence d’une <a href="https://i.imgur.com/iYENVxU.jpg">petite fille de 5 ans</a>.</p>

  609. 

  610. <p>Servez-vous des données biométriques tout au plus pour vous assurer de l’identité de votre utilisateur (en remplacement d’un login par exemple), mais certainement pas en remplacement d’un mot de passe !</p>

  611. 

  612. <p>De la même manière, ne protégez pas uniquement vos ressources critiques avec seulement un token, demandez aussi à votre utilisateur de saisir un mot de passe standard en supplément, ceci afin de parer au vol du token (ou au collègue qui aura lu ponctuellement un de vos OTP).

  613. Ce mot de passe a moins besoin de répondre aux critères standards d’un bon mot de passe (unicité, longueur, aléa…) puisqu’il vient en complément de la solution d’authentification forte.</p>

  614. 

  615. <p>Et en résumé, un bon mot de passe, c’est pas de mot de passe du tout (ou pas tout seul) !</p>

  616.   </article>

  617. </section>

  618. 

  619. 

  620. <nav id="jumpto">

  621.   <p>

  622.     <a href="/david/blog/">Accueil du blog</a> |

  623.     <a href="https://blog.imirhil.fr/2015/11/25/password-otp.html">Source originale</a> |

  624.     <a href="/david/stream/2019/">Accueil du flux</a>

  625.   </p>

  626. </nav>

  627. 

  628. <footer>

  629.   <div>

  630.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  631.     <p>

  632.       Bonjour/Hi!

  633.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  634.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  635.     </p>

  636.     <p>

  637.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  638.     </p>

  639.     

  640.     <p>

  641.       Voici quelques articles choisis :

  642.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  643.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  644.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  645.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  646.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  647.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  648.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  649.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  650.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  651.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  652.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  653.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  654.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  655.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  656.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  657.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  658.     </p>

  659.     <p>

  660.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  661.     </p>

  662.     <p>

  663.       Je ne traque pas ta navigation mais mon

  664.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  665.       conserve des logs d’accès.

  666.     </p>

  667.   </div>

  668. </footer>

  669. <script type="text/javascript">

  670.   ;(_ => {

  671.     const jumper = document.getElementById('jumper')

  672.     jumper.addEventListener('click', e => {

  673.       e.preventDefault()

  674.       const anchor = e.target.getAttribute('href')

  675.       const targetEl = document.getElementById(anchor.substring(1))

  676.       targetEl.scrollIntoView({behavior: 'smooth'})

  677.     })

  678.   })()

  679. </script>