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.
11 Commits
1 Branch
Tree: ca13d848f6
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ca13d848f6'
${ noResults }
larlet-fr-david-cache/cache/f11fd87b74b7e887269b0e4f300.../index.html

index.html 40KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682 
  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>Let's talk about usernames (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://www.b-list.org/weblog/2018/feb/11/usernames/">

  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.   Let's talk about usernames (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://www.b-list.org/weblog/2018/feb/11/usernames/">Source originale du contenu</a></h3>

  463.     <p>A few weeks ago I released <a href="https://www.b-list.org/projects/django-registration/">django-registration</a> 2.4.1. The 2.4 series is the last in the django-registration 2.x line, and from here on out it’ll only get bugfixes. The <code>master</code> branch is now prepping for 3.0, which will remove a lot of the deprecated cruft that’s accumulated over the past decade of maintaining it, and try to focus on best practices for modern Django applications.</p>

  464. 

  465. <p>I’ll write more about that sometime soon, but right now I want to spend a little bit of time talking about a deceptively hard problem django-registration has to deal with: usernames. And while I could write this as one of those “falsehoods programmers believe about X” articles, my personal preference is to actually explain why this is trickier than people think, and offer some advice on how to deal with it, rather than just provide mockery with no useful context.</p>

  466. 

  467. <h2>Aside: the right way to do identity</h2>

  468. 

  469. <p>Usernames — as implemented by many sites and services, and by many popular frameworks (including Django) — are almost certainly not the right way to solve the problem they’re often used to solve. What we really want in terms of identifying users is some combination of:</p>

  470. 

  471. <ol>

  472. <li>System-level identifier, suitable for use as a target of foreign keys in our database</li>

  473. <li>Login identifier, suitable for use in performing a credential check</li>

  474. <li>Public identity, suitable for displaying to other users</li>

  475. </ol>

  476. 

  477. <p>Many systems ask the username to fulfill all three of these roles, which is probably wrong. A better approach is <a href="http://habitatchronicles.com/2008/10/the-tripartite-identity-pattern/">the tripartite identity pattern</a>, in which each identifier is distinct, and multiple login and/or public identifiers may be associated with a single system identifier.</p>

  478. 

  479. <p>Many of the problems and pains I’ve seen with people trying to build and scale account systems have come down to ignoring this pattern. An unfortunate number of hacks have been built on top of systems which <em>don’t</em> have this pattern, in order to make them look or sort-of act as if they do.</p>

  480. 

  481. <p>So if you’re building an account system from scratch today in 2018, I would suggest reading up on this pattern and using it as the basis of your implementation. The flexibility it will give you in the future is worth a little bit of work, and one of these days someone might even build a good generic reusable implementation of it (I’ve certainly given thought to doing this for Django, and may still do it one day).</p>

  482. 

  483. <p>For the rest of this post, though, I’ll be assuming that you’re using a more common implementation where a unique username serves as at least a system and login identifier, and probably also a public identifier. And by “username” I mean essentially any string identifier; you may be using usernames in the sense that, say, Reddit or Hacker News do, or you might be using email addresses, or you might be using some other unique string. But no matter what, you’re probably using <em>some</em> kind of single unique string for this, and that means you need to be aware of some issues.</p>

  484. 

  485. <h2>Uniqueness is harder than you think</h2>

  486. 

  487. <p>You might be thinking to yourself, how hard can this be? We can just create a unique column and we’re good to go! Here, let’s make a user table in Postgres:</p>

  488. 

  489. <div class="codehilite"><pre><span/><span class="k">CREATE</span> <span class="k">TABLE</span> <span class="n">accounts</span> <span class="p">(</span>

  490.     <span class="n">id</span> <span class="nb">SERIAL</span> <span class="k">PRIMARY</span> <span class="k">KEY</span><span class="p">,</span>

  491.     <span class="n">username</span> <span class="nb">TEXT</span> <span class="k">UNIQUE</span><span class="p">,</span>

  492.     <span class="n">password</span> <span class="nb">TEXT</span><span class="p">,</span>

  493.     <span class="n">email_address</span> <span class="nb">TEXT</span>

  494. <span class="p">);</span>

  495. </pre></div>

  496. 

  497. <p>There’s our user table, there’s our unique username column. Easy!</p>

  498. 

  499. <p>Well, it’s easy until we start thinking about case. If you’re registered as <code>john_doe</code>, what happens if I register as <code>JOHN_DOE</code>? It’s a different username, but could I cause people to think I’m you? Could I get people to accept friend requests or share sensitive information with me because they don’t realize case matters to a computer?</p>

  500. 

  501. <p>This is a simple thing that a lot of systems get wrong. In researching for this post, I discovered Django’s auth system doesn’t enforce case-insensitive uniqueness of usernames, despite getting quite a lot of other things generally right in its implementation. There is a ticket for making usernames case-insensitive, but it’s <span class="caps">WONTFIX</span> now because making usernames case-insensitive would be a massive backwards-compatibility break and nobody’s sure whether or how we could actually do it. I’ll probably look at enforcing it in django-registration 3.0, but I’m not sure it’ll be possible to do even there — any site with existing case-sensitive accounts that bolts on a case-insensitive solution is asking for trouble.</p>

  502. 

  503. <p>So if you’re going to build a system from scratch today, you should be doing case-insensitive uniqueness checks on usernames from day one; <code>john_doe</code>, <code>John_Doe</code>, and <code>JOHN_DOE</code> should all be the same username in your system, and once one of them is registered, none of the others should be available.</p>

  504. 

  505. <p>But that’s just the start; we live in a Unicode world, and determining if two usernames are the same in a Unicode world is more complex than just doing <code>username1 == username2</code>. For one thing, there are composed and decomposed forms which are distinct when compared as sequences of Unicode code points, but render on-screen as visually identical to each other. So now you need to talk about normalization, pick a normalization form, and then normalize every username to your chosen form <em>before</em> you do any uniqueness checks.</p>

  506. 

  507. <p>You also need to be considering non-<abbr title="American Standard Code for Information Interchange"><span class="caps">ASCII</span></abbr> when thinking about how to do your case-insensitive checks. Is <code>StraßburgJoe</code> the same user as <code>StrassburgJoe</code>? What answer you get will often depend on whether you do your check by normalizing to lowercase or uppercase. And then there are the different ways of decomposing Unicode; you can and will get different results for many strings depending on whether you use canonical equivalence or compatibility.</p>

  508. 

  509. <p>If all this is confusing — and it is, even if you’re a Unicode geek! — my recommendation is to follow <a href="http://www.unicode.org/reports/tr36/#Recommendations_General">the advice of Unicode Technical Report 36</a> and normalize usernames using <abbr title="Compatibility Decomposition, Canonical Composition"><span class="caps">NFKC</span></abbr>. If you’re using Django’s <code>UserCreationForm</code> or a subclass of it (django-registration uses subclasses of <code>UserCreationForm</code>), this is already done for you. If you’re using Python but not Django (or not using <code>UserCreationForm</code>), you can do this in one line using a helper from the standard library:</p>

  510. 

  511. <div class="codehilite"><pre><span/><span class="kn">import</span> <span class="nn">unicodedata</span>

  512. 

  513. <span class="n">username_normalized</span> <span class="o">=</span> <span class="n">unicodedata</span><span class="o">.</span><span class="n">normalize</span><span class="p">(</span><span class="s1">'NFKC'</span><span class="p">,</span> <span class="n">username</span><span class="p">)</span>

  514. 

  515. </pre></div>

  516. 

  517. <p>For other languages, look up a good Unicode library.</p>

  518. 

  519. <h2>No, really, uniqueness is harder than you think</h2>

  520. 

  521. <p>Unfortunately, that’s not the end of it. Case-insensitive uniqueness checks on normalized strings are a start, but won’t catch all the cases you probably need to catch. For example, consider the following username: <code>jane_doe</code>. Now consider another username: <code>jаne_doe</code>. Are these the same username?</p>

  522. 

  523. <p>In the tyepface I’m using as I write this, and in the typeface my blog uses, they <em>appear</em> to be. But to software, they’re very much <em>not</em> the same, and still aren’t the same after Unicode normalization and case-insensitive comparison (whether you go to upper- or lower-case doesn’t matter).</p>

  524. 

  525. <p>To see why, pay attention to the second code point. In one of the usernames above, it’s <code>U+0061 LATIN SMALL LETTER A</code>. But in the other, it’s <code>U+0430 CYRILLIC SMALL LETTER A</code>. And no amount of Unicode normalization or case insensitivity will make those be the same code point, even though they’re often visually indistinguishable.</p>

  526. 

  527. <p>This is the basis of the homograph attack, which first gained widespread notoriety in the context of <a href="https://en.wikipedia.org/wiki/IDN_homograph_attack">internationalized domain names</a>. And solving it requires a bit more work.</p>

  528. 

  529. <p>For network host names, one solution is to represent names in <a href="https://en.wikipedia.org/wiki/Punycode">Punycode</a>, which is designed to head off precisely this issue, and also provides a way to represent a non-<abbr title="American Standard Code for Information Interchange"><span class="caps">ASCII</span></abbr> name using only <abbr title="American Standard Code for Information Interchange"><span class="caps">ASCII</span></abbr> characters. Returning to our example usernames above, this makes the distinction between the two obvious. If you want to try it yourself, it’s a one-liner in Python. Here it is on the version which includes the Cyrillic ‘а’:</p>

  530. 

  531. <div class="codehilite"><pre><span/><span class="gp">&gt;&gt;&gt; </span><span class="s1">'jаne_doe'</span><span class="o">.</span><span class="n">encode</span><span class="p">(</span><span class="s1">'punycode'</span><span class="p">)</span>

  532. <span class="go">b'jne_doe-2fg'</span>

  533. </pre></div>

  534. 

  535. <p>(if you have difficulty copy/pasting the non-<abbr title="American Standard Code for Information Interchange"><span class="caps">ASCII</span></abbr> character, you can also express it in a string literal as <code>j\u0430ne_doe</code>)</p>

  536. 

  537. <p>But this isn’t a real solution for usernames; sure, you could use Punycode representation whenever you display a name, but it will break display of a lot of perfectly legitimate non-<abbr title="American Standard Code for Information Interchange"><span class="caps">ASCII</span></abbr> names, and what you probably really <em>want</em> is to reject the above username during your signup process. How can you do that?</p>

  538. 

  539. <p>Well, this time we open our hymnals to <a href="http://www.unicode.org/reports/tr39/">Unicode Technical Report 39</a>, and begin reading sections 4 and 5. Sets of code points which are distinct (even after normalization) but visually identical or at least confusingly similar when rendered for display are called (appropriately) “confusables”, and Unicode does provide mechanisms for detecting the presence of such code points.</p>

  540. 

  541. <p>The example username we’ve been looking at here is what Unicode terms a “mixed-script confusable”, and this is what we probably want to detect. In other words: an all-Latin username containing confusables is probably fine, and an all-Cyrillic username containing confusables is probably fine, but a username containing mostly Latin plus one Cyrillic code point which happens to be confusable with a Latin one… is not.</p>

  542. 

  543. <p>Unfortunately, Python doesn’t provide the necessary access to the full set of Unicode properties and tables in the standard library to be able to do this. But a helpful developer named Victor Felder has written <a href="http://confusable-homoglyphs.readthedocs.io/en/latest/index.html">a library which provides what we need</a>, and released it under an open-source license. Using the <code>confusable_homoglyphs</code> library, we can detect the problem:</p>

  544. 

  545. <div class="codehilite"><pre><span/><span class="gp">&gt;&gt;&gt; </span><span class="kn">from</span> <span class="nn">confusable_homoglyphs</span> <span class="kn">import</span> <span class="n">confusables</span>

  546. <span class="gp">&gt;&gt;&gt; </span><span class="n">s1</span> <span class="o">=</span> <span class="s1">'jane_doe'</span>

  547. <span class="gp">&gt;&gt;&gt; </span><span class="n">s2</span> <span class="o">=</span> <span class="s1">'j</span><span class="se">\u0430</span><span class="s1">ne_doe'</span>

  548. <span class="gp">&gt;&gt;&gt; </span><span class="nb">bool</span><span class="p">(</span><span class="n">confusables</span><span class="o">.</span><span class="n">is_dangerous</span><span class="p">(</span><span class="n">s1</span><span class="p">))</span>

  549. <span class="go">False</span>

  550. <span class="gp">&gt;&gt;&gt; </span><span class="nb">bool</span><span class="p">(</span><span class="n">confusables</span><span class="o">.</span><span class="n">is_dangerous</span><span class="p">(</span><span class="n">s2</span><span class="p">))</span>

  551. <span class="go">True</span>

  552. </pre></div>

  553. 

  554. <p>The actual output of <a href="http://confusable-homoglyphs.readthedocs.io/en/latest/apidocumentation.html#confusable_homoglyphs.confusables.is_dangerous">is_dangerous()</a>, for the second username, is a data structure containing detailed information about the potential problems, but what we care about is that it detects a mixed-script string containing code points which are confusable, and that’s what we want.</p>

  555. 

  556. <p>Django allows non-<abbr title="American Standard Code for Information Interchange"><span class="caps">ASCII</span></abbr> in usernames, but does not check for homograph problems. Since version 2.3, though, django-registration has had a dependency on <code>confusable_homoglyphs</code>, and has used its <code>is_dangerous()</code> function as part of the validation for usernames and email addresses. If you need to do user signups in Django (or generally in Python), and can’t or don’t want to use django-registration, I encourage you to make use of <code>confusable_homoglyphs</code> in the same way..</p>

  557. 

  558. <h2>Have I mentioned that uniqueness is hard?</h2>

  559. 

  560. <p>Once we’re dealing with Unicode confusables, it’s worth also asking whether we should deal with <em>single-script</em> confusables. For example, <code>paypal</code> and <code>paypa1</code>, which (depending on your choice of typeface) may be difficult to distinguish from one another. So far, everything I’ve suggested is good general-purpose advice, but this is starting to get into things which are specific to particular languages, scripts or geographic regions, and should only be done with care and with the potential tradeoffs in mind (forbidding confusable Latin characters may end up with a higher false-positive rate than you’d like, for example). But it is something worth thinking about. The same goes for usernames which are distinct but still very similar to each other; you can check this at the database level in a variety of ways — Postgres, for example, ships with support for <a href="https://en.wikipedia.org/wiki/Soundex">Soundex</a> and <a href="https://en.wikipedia.org/wiki/Metaphone">Metaphone</a>, as well as <a href="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance</a> and <a href="https://www.postgresql.org/docs/9.6/static/pgtrgm.html">trigram fuzzy matching</a> — but again it’s going to be something you do on a case-by-case basis, rather than just something you should generally always do.</p>

  561. 

  562. <p>There is one more uniqueness issue I want to mention, though, and it primarily affects email addresses, which often get used as usernames these days (especially in services which rely on a third-party identity provider and use OAuth or similar protocols). So assume you’ve got a case for enforcing uniqueness of email addresses. How many distinct email addresses are listed below?</p>

  563. 

  564. <ul>

  565. <li><code>johndoe@example.com</code></li>

  566. <li><code>johndoe+yoursite@example.com</code></li>

  567. <li><code>john.doe@example.com</code></li>

  568. </ul>

  569. 

  570. <p>The answer is “it depends”. Most <abbr title="Mail Transfer Agents">MTAs</abbr> have long ignored anything after a <code>+</code> in the local-part when determining recipient identity, which in turn has led to many people using text after a <code>+</code> as a sort of <em>ad hoc</em> tagging and filtering system. And Gmail famously ignores dot (<code>.</code>) characters in the local-part, including in their custom-domain offerings, so it’s impossible without doing <abbr title="Domain Name System"><span class="caps">DNS</span></abbr> lookups to figure out whether someone’s mail provider actually thinks <code>johndoe</code> and <code>john.doe</code> are distinct.</p>

  571. 

  572. <p>So if you’re enforcing unique email addresses, or using email addresses as a user identifier, you need to be aware of this and you probably need to strip all dot characters from the local-part, along with <code>+</code> and any text after it, before doing your uniqueness check. Currently django-registration doesn’t do this, but I have plans to add it in the 3.x series.</p>

  573. 

  574. <p>Also, for dealing with Unicode confusables in email addresses: apply that check to the local-part and the domain <em>separately</em>. People don’t always have control over the script used for the domain, and shouldn’t be punished for choosing something that causes the local-part to be in a single script distinct from the domain; as long as neither the local-part nor the domain, considered in isolation, are mixed-script confusable, the address is probably <span class="caps">OK</span> (and this is what django-registration’s validator does).</p>

  575. 

  576. <p>There are a lot of other concerns you can have about usernames which are too similar to each other to be considered “distinct”, but once you deal with case-insensitivity, normalization, and confusables, you start getting into diminishing-returns territory pretty quickly, especially since many rules start being language-, script-, or region-specific. That doesn’t mean you shouldn’t think about them, just that it’s difficult to give general-purpose advice.</p>

  577. 

  578. <p>So let’s switch things up a bit and consider a different category of problem.</p>

  579. 

  580. <h2>You should have reservations about some names</h2>

  581. 

  582. <p>Many sites use the username as more than just a field in the login form. Some will create a profile page for each user, and put the username in the <abbr title="Uniform Resource Locator"><span class="caps">URL</span></abbr>. Some might create email addresses for each user. Some might create subdomains. So here are some questions:</p>

  583. 

  584. <ul>

  585. <li>If your site puts the username in the <abbr title="Uniform Resource Locator"><span class="caps">URL</span></abbr> of the user’s profile page, what would happen if I created a user named <code>login</code>? If I were to populate my profile with the text “Our log-in page has moved, please click here to log in”, with a link to my credential-harvesting site, how many of your users do you think I could fool?</li>

  586. <li>If your site creates email addresses from usernames, what happens if I sign up as a user named <code>webmaster</code> or <code>postmaster</code>? Will I get email directed to those addresses for your domain? Could I potentially obtain an <abbr title="Secure Sockets Layer"><span class="caps">SSL</span></abbr> certificate for your domain with the right username and auto-created email address?</li>

  587. <li>If your site creates subdomains from usernames, what happens if I sign up as a user named <code>www</code>? Or <code>smtp</code> or <code>mail</code>?</li>

  588. </ul>

  589. 

  590. <p>If you think these are just silly hypotheticals, well, <a href="http://www.theregister.co.uk/2011/04/11/state_of_ssl_analysis/">some of them have actually happened</a>. And not just once, but <a href="https://www.tivi.fi/Kaikki_uutiset/2015-03-18/A-Finnish-man-created-this-simple-email-account---and-received-Microsofts-security-certificate-3217662.html">multiple times</a>. No really, <a href="https://twitter.com/EdOverflow/status/954093588362809345">these things have happened multiple times</a>.</p>

  591. 

  592. <p>You can — and should — be taking some precautions to ensure that, say, an auto-created subdomain for a user account doesn’t conflict with a pre-existing subdomain you’re actually using or that has a special meaning, or that auto-created email addresses can’t clash with important/pre-existing ones.</p>

  593. 

  594. <p>But to really be careful, you should probably also just disallow certain usernames from being registered. I first saw this suggestion — and a list of names to reserve, and the first two articles linked above — in <a href="https://ldpreload.com/blog/names-to-reserve">this blog post by Geoffrey Thomas</a>. Since version 2.1, django-registration has shipped a list of reserved names, and the list has grown with each release; it’s now around a hundred items.</p>

  595. 

  596. <p><a href="https://github.com/ubernostrum/django-registration/blob/1d7d0f01a24b916977016c1d66823a5e4a33f2a0/registration/validators.py#L25">The list in django-registration</a> breaks names down into a few categories, which lets you compose subsets of them based on your needs (the default validator combines all of them, but lets you override with your own preferred set of reserved names):</p>

  597. 

  598. <ul>

  599. <li>Hostnames used for autodiscovery/autoconfig of some well-known services</li>

  600. <li>Hostnames associated with common protocols</li>

  601. <li>Email addresses used by certificate authorities to verify domain ownership</li>

  602. <li>Email addresses listed in <a href="https://tools.ietf.org/html/rfc2142"><span class="caps">RFC</span> 2142</a> that don’t appear in any other subset of reserved names</li>

  603. <li>Common no-reply email addresses</li>

  604. <li>Strings which match sensitive filenames (like cross-domain access policies)</li>

  605. <li>A laundry list of other potentially-sensitive names like <code>contact</code> and <code>login</code></li>

  606. </ul>

  607. 

  608. <p>The validator in django-registration will also reject any username which begins with <code>.well-known</code>, to protect anything which uses the <a href="https://tools.ietf.org/html/rfc5785"><span class="caps">RFC</span> 5785</a> system for “well-known locations”.</p>

  609. 

  610. <p>As with confusables in usernames, I encourage you to copy from and improve on django-registration’s list, which in turn is based on and expanded from Geoffrey Thomas’ list.</p>

  611. 

  612. <h2>It’s a start</h2>

  613. 

  614. <p>The ideas above are not an exhaustive list of all the things you could or should do to validate usernames in sites and services you build, because if I started trying to write an exhaustive list, I’d be here forever. They are, though, a good baseline of things you can do, and I’d recommend you do most or all of them. And hopefully this has provided a good introduction to the lurking complexity of something as seemingly “simple” as user accounts with usernames.</p>

  615. 

  616. <p>As I’ve mentioned, Django and/or django-registration already do most of these, and the ones that they don’t are likely to be added at least to django-registration in 3.0; Django itself may not be able to adopt some of them soon, if ever, due to stronger backwards-compatibility concerns. All the code is open source (<abbr title="Berkeley Software Distribution"><span class="caps">BSD</span></abbr> license) and so you should feel free to copy, adapt or improve it.</p>

  617. 

  618. <p>And if there’s something important I’ve missed, please feel free to let me know about it; you can file a bug or pull request to <a href="https://github.com/ubernostrum/django-registration">django-registration on GitHub</a>, or just <a href="https://www.b-list.org/contact/">get in touch with me directly</a>.</p>

  619.   </article>

  620. </section>

  621. 

  622. 

  623. <nav id="jumpto">

  624.   <p>

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

  626.     <a href="https://www.b-list.org/weblog/2018/feb/11/usernames/">Source originale</a> |

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

  628.   </p>

  629. </nav>

  630. 

  631. <footer>

  632.   <div>

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

  634.     <p>

  635.       Bonjour/Hi!

  636.       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>

  637.       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>).

  638.     </p>

  639.     <p>

  640.       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>.

  641.     </p>

  642.     

  643.     <p>

  644.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  661.     </p>

  662.     <p>

  663.       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>.

  664.     </p>

  665.     <p>

  666.       Je ne traque pas ta navigation mais mon

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

  668.       conserve des logs d’accès.

  669.     </p>

  670.   </div>

  671. </footer>

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

  673.   ;(_ => {

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

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

  676.       e.preventDefault()

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

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

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

  680.     })

  681.   })()

  682. </script>