A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 68KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721
  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>Web et vie privée - Stéphane Bortzmeyer (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. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://www.april.org/web-et-vie-privee-stephane-bortzmeyer">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Web et vie privée - Stéphane Bortzmeyer (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://www.april.org/web-et-vie-privee-stephane-bortzmeyer">Source originale du contenu</a></h3>
  445. <p>Bonsoir.<br/>
  446. Comme le thème c’est apéro discussion, ce n’est pas moi qui vais causer pendant deux heures, je vous rassure, mais on m’a demandé de faire une introduction un peu au problème. Le problème Web et vie privée est très vaste, on en a beaucoup parlé. À part si vous avez vécu dans une grotte les dix dernières années, vous en avez forcément entendu parler à la télé, dans les journaux, dans les discussions. Le problème est aussi très compliqué, il y a beaucoup d’aspects. Donc pour qu’il y ait une discussion je dirais intelligente – parce que mon idée c’est que le citoyen ordinaire, même s’il n’est pas informaticien, doit pouvoir participer à cette discussion qui concerne tout le monde – il faut quand même connaître deux-trois trucs. Mon idée était de présenter quelques points importants qu’il faut avoir en tête quand on discute Web et vie privée.</p>
  447. <h3>Un état des lieux.</h3>
  448. <p>Un truc important c’est qu’aujourd’hui tout le monde utilise le Web. J’ai eu en pendant les années précédentes pas mal de gens qui me disaient « oui, mais tout ça n’intéresse de toutes façons qu’une poignée de gens ; c’est marginal l’utilisation d’Internet », des choses comme ça. Aujourd’hui ce n’est clairement plus le cas : tout le monde utilise Internet sauf vraiment des ermites très isolés et donc tout le monde est concerné par les conséquences que ça peut avoir. J’en vois qui rigolent parce qu’ils n’utilisent pas Internet, mais ils sont rares ! Ça ne fait plus grand monde aujourd’hui.</p>
  449. <p>Souvent on n’a pas vraiment le choix sauf à être exclu. Si on n’est pas sur le groupe Facebook, eh bien les copains ne nous invitent pas ou ils ne pensent pas à nous inviter quand il y a une sortie. Si on n’a pas accès au Web, on ne peut pas lire les petites annonces. Il y a de plus en plus de choses qui ne sont accessibles que en ligne et pas seulement des choses utilitaires genre déclarer ses revenus, des choses comme ça, mais simplement des relations sociales de base.</p>
  450. <p>Il y a un contraste entre le fait que tout le monde est sur Internet, toutes les activités humaines ont migré sur Internet ou sont sur Internet, et le peu de connaissances des gens là-dessus. Des fois on me dit « oui mais c’est normal, c’est technique, il ne faut pas que tout le monde soit technicien ; il n’y a pas de raison que madame Michu connaisse Internet et tout ça » et en fait, je ne suis pas d’accord. D’abord ça m’agace toujours quand on dit madame Michu, comme si monsieur Michu était plus compétent ; il ne l’est pas ! Et surtout, quand quelque chose a une telle place dans la vie et structure notre société à ce point, il faut vraiment que tous les citoyens puissent y comprendre suffisamment quelque chose pour voir les enjeux qu’il y a derrière.<br/>
  451. Aujourd’hui ce n’est pas tellement le cas. Tout le monde sait qu’il y a des problèmes de vie privée sur le Web, on en a beaucoup parlé, mais les détails sont peu connus.</p>
  452. <p>D’une manière générale, ce n’est pas seulement le Web. Contrastant avec la place de l’informatique dans nos vies, il y a un angle de ce qu’on peut appeler la littératie numérique, c’est-à-dire ce que le ministre appelle l’illectronisme ; il vient de lancer un grand plan avec plein de millions d’euros pour lutter contre l’illectronisme. Je n’aime pas tellement le terme, surtout parce qu’il faut faire une différence entre les gens qui ne savent pas du tout se servir d’ordinateur – c’est quand même une minorité aujourd’hui – et les gens qui savent s’en servir mais ne sont pas à l’aise, sont paumés, ne comprennent pas les enjeux ou ce qu’il y a derrière et ça c’est beaucoup plus fréquent et c’est beaucoup plus ça le problème. Donc plus un problème d’absence de littératie qu’un vrai problème d’illectronisme.</p>
  453. <h3>C’est quoi la littératie numérique ?</h3>
  454. <p>Tout le monde aujourd’hui, tout le monde peut-être pas mais vraiment beaucoup de gens savent se servir d’un ordinateur : j’échange des mails et des photos avec ma maman qui est à la retraite à la campagne, donc c’est vraiment quelque chose de très répandu aujourd’hui. Tout le monde utilise Internet, forcé — de toutes façons ce n’est pas forcément un choix, mais c’est comme ça —, mais mal souvent, avec plein de problèmes. Le ministre, dans son discours pour le plan pour de la lutte contre l’illectronisme, disait qu’il y a des gens qui ne savent pas, quand ils envoient une réponse à une offre d'emploi, mettre une pièce jointe à leur mail. C’est un des problèmes, mais ce n’est pas seul ; ça, à la limite, c’est une compétence technique qui leur manque, ça peut s’acquérir. Plus embêtant c’est le côté mauvaise pratique ; c’est-à-dire que les gens arrivent à faire leurs tâches sur Internet, ce qu’ils ont envie de faire ils arrivent à le faire — échanger des photos avec les copains ou avec les enfants, envoyer le CV —, mais mal et donc avec notamment des tas de conséquences pour la sécurité.<br/>
  455. Par exemple, ils ont des problèmes avec les méthodes de sécurité compliquées, donc ils coupent toutes les solutions de sécurité, au moins comme ça, ça fonctionne ! Des choses comme ça et c’est plutôt ça le problème.</p>
  456. <p>Pour moi, la littératie numérique ce n’est pas seulement savoir faire des tâches, c’est aussi comprendre ce qui se passe derrière l’écran, ce qu’on voit pas. Pas mal de gens ont peur de ça en disant « oui mais derrière c’est de la technique, c’est pour informaticiens et tout ça ».<br/>
  457. D’abord, les informaticiens professionnels ne savent pas forcément mieux. Quelqu’un, par exemple, qui fait des sites web professionnellement, dont c’est le métier, souvent n’a pas plus d’idées de ce qui se passe derrière l’écran que l’utilisateur ordinaire et, de toutes façons, il y a des choses qu’on peut comprendre derrière même si on n’est pas technicien, même si on n’est pas informaticien ; on peut comprendre des choses ! Il n’y a pas besoin, par exemple, d’être biologiste pour participer à des discussions ou des réflexions citoyennes sur des problèmes comme l’écologie. Il n’y a pas besoin d’être climatologue pour comprendre les problèmes liés au réchauffement planétaire et à ce qu’il faut faire ; ça concerne tous les citoyens, même ceux qui ne sont pas climatologues, biologistes, etc. Donc c’est un peu pareil pour l’informatique.</p>
  458. <p>Par exemple, un truc tout bête, je suis toujours étonné du nombre de gens qui font une confiance aveugle aux classements que font Google et Facebook. Google et Facebook ne présentent pas une vision neutre de l’information ; ils mettent un ordre. Par exemple Google classe les résultats de son moteur de recherche. D’un côté c’est bien, c’est ce qu’on lui demande, mais de l’autre côté, un classement n’est jamais neutre ; il y a toujours des choix qui ont été faits derrière, des choix qui ont été faits par Google et qui s’appliquent, après, aux gens. Beaucoup de gens croient que c’est, quelque part, un truc qui tombe du ciel et sur lequel il faut s’aligner, une sorte de révélation divine sur laquelle il faut s’aligner. Ça ne l’est pas ! C’est au point même qu’il y a des demandes, maintenant, de changer, enfin de faire des choses. Je me souviens qu’il y avait eu un débat quand il y avait une organisation contre les droits des femmes qui avait un faux site sur l’information sur l’IVG et qui s’était retrouvé, à un moment, en première place des résultats de Google quand on tapait IVG dans pas mal de conditions. Il y avait des gens qui s’étaient indignés en disant « il faudrait faire quelque chose ». Le problème c’est plutôt qu’il faut arrêter de croire que le premier résultat de Google est le bon. Il faut comprendre que ce classement n’est pas innocent.</p>
  459. <p>Facebook aussi. Facebook ne vous propose pas de manière neutre ce que tous vos contacts, tous les gens avec qui vous êtes amis, ont fait. Facebook fait un choix dans tout ça et présente ce qui lui semble intéressant selon ses critères. Des fois ça colle bien, mais c’est quand même un choix qui est fait pour vous.</p>
  460. <p>Bien sûr, aussi, le problème de qu’est-ce qu’ils font de nos données. Tous ces gens-là récoltent des données, qu’est-ce qu’ils en font ? Eh bien ça, ça ne se voit pas.</p>
  461. <p>La littératie numérique permet aussi de pouvoir critiquer les gens qui essaient de vous rassurer. Par exemple quand dans une réunion on parle d’un fichier, il y a toujours un monsieur sérieux, costard-cravate, qui explique « ne vous inquiétez pas ! Tout est anonymisé ». J’ai vu ça quand j’étais délégué de parents d’élèves, chaque fois qu’on parlait de fichage des élèves, il y avait toujours un monsieur sérieux du rectorat qui disait « c’est anonymisé ». La littératie numérique aide à comprendre que c’est pipeau, cette phrase ne veut rien dire, c’est vraiment un truc pipeau pour rassurer facilement.<br/>
  462. De même quand un ministre ou un autre dit « ce système est parfaitement sécurisé » ou quand un site web vous dit « votre vie privée est importante pour nous », il faut savoir que tout ça est pipeau. Le coup de la sécurité est un bon exemple. Il y avait un type important au ministère de la justice en Inde qui, pour justifier la base de données de tous les citoyens indiens, avait dit « c’est sécurisé ; c’est protégé par un mur de cinq mètres de haut ! » Il avait dit ça. Les informaticiens dans la salle ne seront pas surpris d’apprendre qu’un mois après la base a été piratée et que toutes les données ont fuité.</p>
  463. <p>La littératie numérique sert aussi à comprendre, à s’inquiéter quand il y a des arguments politiques qui se déguisent derrière la technique. Utiliser des mots techniques compliqués c’est souvent une façon de dissimuler des choix politiques. Quand, en plus, on mêle ça avec le terrorisme c’est parfait ! On dit par exemple « les terroristes cryptent donc il faut interdire le <em>cryptement</em> » ou des choses comme ça. Il y a pas mal de ministres qui ont fait ça, un qui n'est pas loin d’ici, Jean-Jacques Urvoas [Garde des Sceaux de 2016 à 2017, NdT], qui tenait des discours comme ça quand il était ministre, que le chiffrement c’est mauvais, et c’est après qu’on s’est aperçu que pour communiquer des informations qu’avait la justice sur un copain à lui il utilisait une messagerie chiffrée avec le copain en question pour justement que ça ne soit pas détecté.</p>
  464. <p>En fait l’un des buts de la littératie numérique c’est de comprendre que certaines décisions, certaines opinions, ont l’air techniques comme ça parce qu’il y a des mots techniques dedans, mais sont en fait, derrière, de la politique.</p>
  465. <h3>Le numérique a quand même quelques particularités.</h3>
  466. <p>Quand je dis « c’est de la politique tout ça », ça ne veut pas dire que c’est de la politique comme d’habitude et donc on peut se passer complètement d’apprendre ou de comprendre le numérique. Non, parce qu’il y a quand même des particularités du numérique.</p>
  467. <p>Je le répète, les vrais problèmes sont politiques. Le problème que j’ai avec Google c’est que c’est une entreprise capitaliste. Le fait qu’il soit dans le numérique ne change rien ; ça ne les rend pas meilleurs ou pires.</p>
  468. <p>Les particularités du numérique, il y en a une première qu’on oublie souvent c’est que dans le numérique tout est copiable facilement. Ça, c’est un changement considérable. Pensez par exemple à une police d’autrefois qui faisait des fiches sur les suspects. C’étaient des fiches en carton qu’on mettait dans une boîte à chaussures ou équivalent. Simplement copier un fichier, par exemple quand la police à Quimper avait fait un fichier et voulait le faire connaître à ses collègues à Brest, était un gros travail, très consommateur de ressources humaines.<br/>
  469. Ce n’est pas que la police à l’époque était plus respectueuse des libertés, mais c’est que, en pratique, copier ces informations avait un réel coût en temps humain, en travail, qui rendait difficile de le faire. Même les régimes les plus dictatoriaux ne pouvaient pas le faire.<br/>
  470. Au contraire, dans le numérique, copier c’est trivial, c’est facile, c’est fait pour. Vous avez un fichier qui est constitué à Quimper, vous le copiez à toutes les polices de France sans problème et ça ne coûte quasiment rien. Idem pour des données qu’on peut avoir. C’est facile pour un ordinateur de tout enregistrer : c’est son métier ; c’est ce qu’il fait le mieux.</p>
  471. <p>Donc ça c’est une particularité du numérique qui donne des pouvoirs considérables que l’on n’avait pas avant. Malheureusement ça ne les donne pas aux citoyens, ça les donne aux entreprises et à l’État et ils n’en font pas toujours un bon usage.</p>
  472. <p>Un exemple typique c’est qu’avant le numérique, de toutes façons un éditeur de livres qui avait envie de savoir ce que faisaient les gens avec le livre ne pouvait pas ; c’était matériellement impossible ; il aurait fallu qu’il envoie un détective privé derrière chaque lecteur pour le suivre et pour regarder ce qu’il faisait. C’était évidemment inenvisageable.<br/>
  473. Aujourd’hui par contre, un appareil de lecture comme le Kindle d’Amazon sait exactement à quelle page vous en êtes — pour un ordinateur comme le Kindle ce n’est rien — et le transmet à Amazon qui peut donc renvoyer l’information à l’éditeur à des fins soit commerciales, soit moins sympathiques. On peut savoir, par exemple, qui a acheté un bouquin et ne l’a pas terminé ou, au contraire, qui l’a dévoré avec intérêt, et c’est une information dont on voit bien qu’elle peut avoir des conséquences pour la vie privée. Et ce genre d’opération ne coûte rien avec le numérique. C’est pour ça que c’est si répandu, c’est que ça ne coûte rien ; les gens disent « puisque c’est si facile à faire on va le faire », alors qu’avant il aurait fallu réfléchir pour le faire.</p>
  474. <p>Et puis tout est cherchable. On dispose de techniques permettant de chercher dans des grandes quantités d’informations, ce qui casse pas mal de modèles de sécurité qu’on avait. Par exemple beaucoup de gens se disent « d’accord, Google ce n’est pas joli ce qu’ils font, mais enfin mes messages c’est une goutte d’eau au milieu de l’océan de messages qu’il y a dans Gmail, donc mes messages à moi sont perdus dans la masse. » Cette idée de se perdre dans la masse marchait très bien avant le numérique, effectivement. Elle ne marche plus maintenant parce qu’on a des techniques de recherche qui font que l’aiguille n’est plus en sécurité dans la botte de foin ; on peut la trouver.<br/>
  475. Ces changements entraînent une différence qualitative. Des fois il y a des gens qui disent « oui, mais ce n’est pas grave la surveillance, de toutes façons dans le petit village autrefois où tout le monde était heureux, tout le monde était sympa, tout le monde connaissait tout le monde, il n’y avait pas de vie privée, c’était très bien ». L’argument est très mauvais. Une des raisons pour lesquelles il est très mauvais c’est qu’à l’époque les possibilités de traitement et de recherche étaient limitées au petit village, justement. Alors que maintenant elles s’étendent à toute la planète et qu’elles ont donc complètement changé les choses. Des opérations qui étaient inoffensives avant deviennent difficiles [Des opérations qui étaient difficiles avant deviennent triviales, Note de l'orateur].</p>
  476. <p>Pour reprendre l’exemple de la lecture du livre, avant on pouvait se dire « de toutes façons quelqu’un peut le voir le livre qu’on est en train de lire à la terrasse du café ». Sauf que maintenant, on peut regarder non pas la personne qui se trouve être à côté de nous à la terrasse du café, mais potentiellement toute la planète.</p>
  477. <p>Idem si vous participez à une manifestation. Vous pouvez aller à une manifestation et tomber sur votre patron qui dira « tiens je ne savais pas que tu étais à la CGT ! », des trucs comme ça. Ça peut arriver mais c’est rare. Alors que maintenant, avec le numérique, il y a des possibilités de recherche massive de tous les gens qui étaient à la manifestation ou tous les gens qu’on a croisés. Donc ça change vraiment qualitativement les choses.</p>
  478. <h3>Nos réflexes de sécurité</h3>
  479. <p>Les réflexes de sécurité qu’on a face à ça ne sont plus adaptés. L’être humain est apparu tel qu’il est, en gros, à la louche, il y a trois millions d’années quelque part dans la savane africaine où il avait certains problèmes de sécurité : éviter de se faire bouffer par un lion, des trucs comme ça, donc on a développé tout un tas d’habitudes et de réflexes qui viennent de ce monde-là. Les changements qu’on a eus depuis la révolution industrielle et encore plus depuis le numérique ont été trop rapides pour qu’on s’adapte. Nos réflexes de sécurité restent inadaptés.<br/>
  480. Par exemple, une des raisons pour lesquelles beaucoup de gens mettent des informations très personnelles sur Facebook, bien qu’ils savent de manière théorique que c’est dangereux, c’est parce que, typiquement, ils sont dans leur chambre au moment où ils le font, donc dans un espace sécurisé, fermé, où ils se sentent à l’aise.</p>
  481. <p>Je me souviens d’un article de psychologie qui expliquait qu’en fait, si on veut améliorer la protection de la vie privée sur Facebook, il faudra imposer que quand on est sur Facebook, les hauts-parleurs du PC diffusent en permanence des bruits de hall de gare ou de terrasse de café pour que les gens comprennent que ce qu’ils font sur Facebook c’est public ou que ça a un gros potentiel à l’être en tout cas.<br/>
  482. Nos réflexes d’intimité et de sécurité ne sont pas complètement rationnels d’où la nécessité d’avoir un support comme ces bruits de foule autour pour qu’on perçoive qu’on est, en fait, en public.</p>
  483. <p>De nos jours, ces réflexes ne sont plus du tout adaptés et ils reposent souvent sur des suppositions fausses. C’est pour ça que c’est important de développer la littératie numérique pour mieux comprendre. Par exemple le raisonnement : si je ne vois pas l’adversaire il ne me voit pas non plus.<br/>
  484. Rappelez-vous le petit village dont on parlait où il n’y avait pas de vie privée, où tout le monde connaissait tout le monde : c’était symétrique. Si le garde-champêtre me voit quand je sors bourré du bistrot, quand lui sort bourré du bistrot, je le vois aussi. Et s’il ne me voit pas, je sais qu’il ne peut pas savoir par d’autres moyens ce qu’il y a. Alors qu’avec le numérique on est espionné sans s’en rendre compte. Vous ne vous rendez pas compte que votre Kindle est en train de signaler à Amazon ce que vous êtes en train de lire.<br/>
  485. Donc le réflexe : si je ne le vois pas il ne me voit pas, était vrai dans la savane africaine et tout notre cerveau, tout notre appareil nerveux, tous nos réflexes sont basés là-dessus alors que ce n’est plus vrai.<br/>
  486. De même des trucs du genre : le prédateur ne peut pas nous attaquer tous, donc si on est en groupe très nombreux ; c’est la technique du gnou dans la savane, il dit que le lion ne pourra pas les bouffer tous. Avec le numérique ce n’est plus vrai. Il est possible de surveiller beaucoup de monde.</p>
  487. <p>Je ne sais pas si vous avez vu le film <em>La Vie des autres</em> qui se passe dans l’ancienne Allemagne de l’Est où il y a un personnage qui est policier qui écoute des gens. À l’époque, l’écoute était manuelle, c’est-à-dire qu’il fallait un policier pour écouter, il fallait des tas de magnétophones avec des bandes magnétiques et un policier pour les écouter après. Donc le gouvernement est allemand ne pouvait pas écouter tout le monde, pas parce qu’il avait des scrupules ou qu’il était retenu par les droits de l’homme ou des choses comme ça, parce qu’il ne pouvait pas, tout simplement.</p>
  488. <p>Donc le raisonnement : le gouvernement si puissant qu’il soit, si totalitaire qu’il soit, ne peut pas nous surveiller tous était vrai dans l’ancienne Allemagne de l’Est ; il n’est plus vrai aujourd’hui.</p>
  489. <h3>Pratiques réelles, les GAFA</h3>
  490. <p>Dans les pratiques réelles, qu’est-ce qu’ils font ?<br/>
  491. On avait parlé des possibilités un peu théoriques du numérique. Qu’est-ce que font réellement les gros acteurs de l’Internet, ceux qu’on appelle les GAFA, ceux qui sont sur les affiches de La Quadrature du Net : « Apple sait où est ta mère », « Facebook contrôle ce que tu peux lire » et tout ça ? Eh bien ils enregistrent tout parce que c’est trivial, parce que c’est facile, parce que c’est un réflexe. Combien de fois dans des réunions où on parle de fichiers, de données et tout ça, on fait la liste des données à récolter et puis il y a quelqu’un autour de la table qui dit « on va aussi récolter celles-là puisque ça ne coûte pas très cher en place et on a de la place sur les disques. » Chaque fois il faut leur dire « mais ce n’est pas parce que c’est facile qu’il faut le faire ! Il faut se poser des questions quand même ! »<br/> <br/>
  492. Notez que le RGPD a mis ça explicitement par écrit mais ça aurait dû être un réflexe, de toutes façons.</p>
  493. <p>La réalité c’est qu’ils enregistrent tout et pas uniquement parce que c’est facile mais parce que c’est aussi leur seul moyen de gagner leur vie. Quel utilisateur de Facebook a payé Facebook en argent ? A pris un contrat, un abonnement ? Aucun ! Gmail quasiment pareil. Il y a des Google Apps pour entreprise mais c’est très peu utilisé. La plupart des utilisateurs de ces GAFA ne les ont pas payés. Amazon c’est un cas un peu différent. Mais pour Google et Facebook on ne les paye pas. Donc comment ils gagnent leur vie ? Ce sont des boîtes commerciales, à but lucratif ; comment ils gagnent leur vie ? La seule façon c’est d’exploiter les données, pas forcément de les vendre, parce qu’en général, au contraire, ils aiment bien les garder pour eux, mais par exemple en s’en servant pour vendre de la publicité plus ciblée, qui se vend plus cher que la publicité non ciblée.</p>
  494. <p>Donc le truc toujours à se demander c’est : si c’est gratuit comment ils font pour vivre ?<br/>
  495. Il y a des tas de solutions. Les logiciels libres – il y a une install-partie demain – sont la plupart du temps gratuits pour les utilisateurs parce que derrière il y a un modèle de développement fondé sur l’entraide et le bénévolat – tous les développeurs ne sont pas bénévoles –, mais l’entraide et le partage, donc c’est pour ça qu’ils sont gratuits pour la plupart des gens. Mais Google et Facebook, comment ils font ? Eh bien en exploitant les données, donc ils sont obligés de les garder.</p>
  496. <p>La publicité veut des données et elle veut tout connaître. Si on veut augmenter le niveau de sécurité chez les gens quand ils envisagent de s’inscrire sur Facebook, ce ne sont pas les conditions générales d’utilisation qu’il faut leur faire lire, elles sont incompréhensibles, c’est plutôt qu’ils assistent à une réunion entre les commerciaux de Facebook et les gens des agences de publicité pour voir comment Facebook vend ses utilisateurs, littéralement, comme du temps de cerveau disponible.</p>
  497. <p>Il y a quand même des fois où ils vendent des données. L’affaire Cambridge Analytica est une affaire récente où Facebook s’est fait prendre la main dans le sac. Ils avaient vendu des données à une boîte qui s’appelle Cambridge Analytica dont le rôle est spécialisé dans la publicité politique ciblée : reconnaître les particularités des gens et leur envoyer les publicités politiques au moment d’une élection qui correspondent pile à ce qu’ils veulent. Et le tout sans l'autorisation des utilisateurs, évidemment, sinon ce n’est pas drôle.</p>
  498. <h3>Tout le monde s’y met</h3>
  499. <p>Mais il n’y a pas que les GAFA et il n’y a pas que les États-Unis. Comme c’est facile de surveiller tout le monde le fait. Par exemple en France les journaux, y compris des journaux qui s’indignent dans des éditoriaux pour dire « oh les GAFA ils sont méchants ! Oh Google ne paye ses impôts, il viole les lois françaises, il pique nos données, oh que ce n’est pas bien ! », eh bien ces journaux qui font ça, leur site web est bourré des mouchards, c’est-à-dire de dispositifs qui permettent de suivre à la trace les utilisateurs d’une visite sur l’autre, comme les fameux cookies. Des fois il y a un avertissement du genre « si vous continuez ça veut dire que vous acceptez nos cookies ». Dans certains cas très rares il y a possibilité de débrayer ça, en général possibilité délibérément rendue compliquée. Mais dans beaucoup de cas il n’y a tout simplement pas de possibilité de débrayer.</p>
  500. <p>Donc le problème n’est pas limité aux GAFA et un des inconvénients du numérique c’est que ça démocratise la surveillance. Avant il fallait une police politique riche et dotée de forts moyens ; aujourd’hui pas mal d’entreprises peuvent jouer avec leur petit Google, leur petit Facebook et récolter plein de données sur leurs utilisateurs.</p>
  501. <p>J’ai cité les sites web, mais c’est bien pire pour les applications sur smartphone. Une application sur smartphone a accès à bien plus d’informations qu’un site web pour des raisons techniques qu’on n’a pas le temps de voir ici, mais qui font que ce n’est pas par hasard que beaucoup par exemple d’organes de presse vous encouragent fortement à chaque visite à télécharger l’application. L’application leur envoie plus de données que la simple visite du site web.</p>
  502. <p>Le problème est largement répandu et ne peut pas se résoudre uniquement en tapant sur Google et Facebook, même s’ils le méritent.</p>
  503. <h3>Et l’État ?</h3>
  504. <p>Ah la, la, l’État ! L’État ce n’est pas mieux. Aux États-Unis, par exemple, ce sont deux lois successives — il y en a eu d’autres, mais ce sont deux étapes importantes — qui donnent à peu près tous les droits de surveillance à la police sur les données numériques récoltées. Par exemple Google peut promettre « nous ne communiqueront vos données à personne ». Ils peuvent promettre ce qu’ils veulent ! Aux États-Unis, ils sont obligés de suivre la loi et la loi dit « si le FBI le demande gentiment, vous donnez tout ». Il n’y a pas tellement de possibilités… Il y a quelques contraintes dans le <em>PATRIOT Act</em>, encore moins dans le <em>CLOUD Act</em>, il y a quelques règles et quelques contraintes, mais de toutes façons elles ne sont pas respectées. C’est ce qu’ont montré par exemple les révélations de Snowden. Un des trucs que ça montrait, ce n’est seulement que les espions espionnaient ; on le savait bien que les espions espionnaient ! C’était que même les règles théoriques qui limitaient un peu les pouvoirs des sociétés de surveillance n’étaient pas respectées.<br/>
  505. Donc méfiance quand vous lirez des promesses du genre « nous nous engageons à ne pas communiquer vos données, nous nous engageons à ne pas les garder », tout ça ; comme le disait un fameux politique français « les promesses n’engagent que ceux qui y croient » !</p>
  506. <p>En France, par exemple, la loi renseignement de 2015 ou la loi de programmation militaire de 2018 et d’autres aussi dans le lot étendent beaucoup les possibilités, là aussi. De toutes façons, la surveillance se faisait déjà par les services de l’État de manière illégale. Ce n’est pas moi qui l’invente : dans l’exposé des motifs de la loi renseignement de 2015 il y a écrit : on récolte des données depuis des années de manière illégale, ça nous met mal à l’aise, il faudrait donc légaliser ça. C’est écrit comme ça. C’est : nos agences de renseignement sont gênées par le fait que ce qu’elles récoltent n’est pas légal, alors il faudrait faire quelque chose, donc on va le rendre légal.<br/>
  507. C’est ce qui était écrit dans l’exposé des motifs de la loi renseignement : il y avait une insécurité juridique ; sous-entendu on risquait d’avoir un procès.</p>
  508. <h3>Solutions ?</h3>
  509. <p>Les solutions pour ça ?<br/>
  510. Là, malheureusement, c’est compliqué. Fondamentalement, et je dis ça surtout pour les informaticiens présents dans la salle, le problème est politique. Il n’y a pas de solutions purement techniques aux problèmes politiques. La technique peut aider, elle peut fournir des outils, elle peut permettre d’appuyer des solutions politiques, mais en soi elle ne va pas résoudre des problèmes. Surtout que souvent les techniques évoluent tout le temps, c’est compliqué, ce n’est pas facile à faire. Et puis moi j’ai un problème un peu plus de fond, un peu plus politique qu’on verra après.</p>
  511. <p>Autant c’est vrai que le problème est politique, n’est pas technique, d’un autre côté c’est utile de comprendre la technique pour comprendre ce qui se passe, pour résister au baratin, pour ne pas croire les gens qui vont vous raconter « non, non, les données sont anonymisées, ne vous inquiétez pas ! » C’est donc utile d’avoir une compréhension technique minimum.</p>
  512. <p>Quand j’avais dit que le problème était politique, un exemple qui va dans la bonne direction, qui est évidemment très insuffisant mais qui va dans la bonne direction, c’est le RGPD<a class="see-footnote" id="footnoteref1_kqt3rlm" title=" RGPD - Règlement général sur la protection des données" href="#footnote1_kqt3rlm">1</a>, Règlement général de protection des données, qui est un règlement européen, qui est entré en vigueur en mai 2018 donc très récemment et qui, en gros, étend les protections qu’il y avait déjà en France avec la loi Informatique et Libertés ; il les étend un peu et surtout il les généralise à toute l’Europe. Pour les Français il n’y a pas beaucoup de changement, mais pour des pays d’Europe de l’Est, notamment, ça a fait un gros changement ; ils n’avaient même pas d’autorité de protection des données avant.</p>
  513. <p>Parmi les principes importants du RGPD il y a par exemple cette obligation de minimiser : récolter le moins d’informations possibles et seulement celles dont on a besoin. Ça c’est une des règles qui est le plus violée. J’ai réservé un hôtel récemment, pas celui-ci mais à un autre endroit, où, au moment de la réservation, dans le formulaire, on demande des tas de choses qu’il n’y a pas à demander, y compris la date de naissance ; qu’est-ce qu’ils ont à faire de la date de naissance ! Je suis vacataire dans des universités, je remplis un dossier, on me demande ma date de naissance, homme ou femme ? Qu’est-ce qu’ils en ont à faire homme ou femme ? Ou alors c’est pour dire qu’il y a certains enseignements qui ne peuvent être assurés que par des hommes peut-être ? Non, ce n’est pas possible ! C’est un exemple de « dans le doute on récolte plein de données ». Et ça, le RGPD dit explicitement que c’est mal.</p>
  514. <p>Après c’est comme toutes les lois, c’est bien d’avoir une bonne loi, mais évidemment ça ne veut pas dire qu’elle va être appliquée. Déjà la loi Informatique et Libertés date d’il y a 40 ans et elle est encore massivement violée par les entreprises françaises. Alors qu’elle date de 40 ans ! Donc le RGPD, ce n’est pas gagné ! Oui ?</p>
  515. <p><b>Public : </b>Je me suis retrouvé à Lyon pour louer une chambre d’hôtel à minuit et le truc c’est qu’ils demandaient ma carte identité et je ne l’avais pas sur moi ; ils étaient prêts à me faire dormir dehors parce que je n’avais pas ma carte d’identité. Il n'y avait pas de lieu pour pouvoir dormir. Et le motif c’était que je sois connu au cas où je sois un terroriste ou, je n'en sais rien !</p>
  516. <p><b>Stéphane Bortzmeyer : </b>Je ne suis pas un juriste. Je trouve ça scandaleux, je ne sais pas si c’est légal ou pas, je ne suis pas juriste donc il y a un doute là-dessus. Comme souvent avec la loi c’est aussi beaucoup une question de rapport de forces. Un des problèmes c’est que les gens donnent trop facilement leurs données quand on demande ; ils devraient à chaque fois faire des histoires, mais je sais que c’est fatigant. Je sais qu’à chaque fois que je remplis une fiche ou que je remplis un formulaire je fais des histoires, je proteste, je dis « appelez-moi le directeur je refuse de remplir ce truc-là ». Effectivement, au bout d’un moment c’est fatigant, on ne va pas faire ça à chaque fois, mais c’est quand même ça qu’il faudrait faire, et si c’était fait plus souvent il y aurait moins de récolte de données injustifiée. Mais c’est évidemment difficile surtout avec des arguments effectivement massues : quand on dit « c’est pour lutter contre le terrorisme et puis si vous ne voulez pas remplir ça, ça veut dire que vous êtes pour le terrorisme ? » C’est évidemment difficile de lutter contre ça.</p>
  517. <p><b>Public : </b>Si, par exemple, je ne veux plus apparaître sur Internet donc je supprime mon Facebook. On ne peut pas forcément le supprimer. Le Facebook on ne peut pas le supprimer à fond ; il reste visible à vie et c’est impossible de ne plus apparaître sur Internet, sur rien du tout !</p>
  518. <p><b>Stéphane Bortzmeyer : </b>C’est difficile en tout cas. C’est difficile ! Ça c’est un point important c’est : qu’est-ce que peut faire le citoyen individuel, qu’est-ce que peut faire l’utilisateur ou l’utilisatrice, quelles sont ses possibilités d’action ? Alors il y en a et il n’y en a pas. C’est compliqué.</p>
  519. <h3>Et l’utilisateurice, que peut-ielle faire ?</h3>
  520. <p>D’abord il y a un problème de fond, c’est que quand on dit aux gens « vous devriez faire ceci, vous devriez refuser les conditions de Facebook, vous devriez ne pas mettre les données, etc. », ça a un petit côté de blâmer les victimes. C’est-à-dire que c’est logique de demander aux gens de faire attention, mais attention ! Il ne faudrait pas laisser entendre que si, par contre, ils ont donné des données à Facebook, Facebook a le droit d’en faire ce qu’il veut. Ça serait un peu blâmer les victimes pour ce qui leur arrive.<br/>
  521. Parce qu'actuellement, effectivement et vous l’avez bien dit, prendre toutes les précautions nécessaires c’est un peu ce que fait un agent secret en territoire ennemi. Ce n’est pas normal ; ce n’est pas normal que le citoyen, pour avoir une vie privée, soit obligé de prendre autant de précautions qu’un agent secret en territoire ennemi, avec ce que ça nécessite d’efforts, de compétences, de ne jamais faire une erreur. Effectivement, le vrai problème c’est que c’est facile de diminuer 90 % des données personnelles, mais les 10 % restant c’est assez dur et peuvent suffire dans certains cas. Et puis il y a des fois où on n’a pas le choix, tout simplement parce que, par exemple, ce sont les autres qui vous y mettent.<br/>
  522. Un exemple typique de Facebook. On peut dire « je n’ai même pas de compte Facebook, je n’y mets rien », mais on va à une soirée, les copains prennent une photo, la mettent sur Facebook et pouf ! on se retrouve sur Facebook. Et si en plus, dans la légende, ils rajoutent les noms des gens : là il y avait Pierre, Paul, Jacques, Mohammed et tout ça, à ce moment-là on est fiché par des copains.<br/>
  523. Un autre exemple typique : si vous n’avez pas de compte Gmail, donc vous n’avez jamais accepté les conditions d’utilisation de Gmail, vous allez avoir forcément plein de correspondants chez Gmail, à moins que vous refusiez de leur écrire mais là, on rentre dans un problème social, donc Gmail va avoir une partie de votre courrier alors même que vous n’avez pas de compte Gmail.</p>
  524. <p>C’est pour ça que autant je suis d’accord pour dire qu’il faut expliquer aux gens les dangers et les inciter à mettre moins de données, à faire attention, autant il ne faut pas reposer uniquement là-dessus parce que ça revient à dire aux gens « c’est de votre faute s’il y a des problèmes ; c’est de votre faute si vous êtes fiché, vous n’avez pas pris assez de précautions », alors que même un informaticien compétent, expert en sécurité, a le plus grand mal à faire ça ; à fortiori l’utilisateur ordinaire. Parce qu’il faut le faire tout le temps, il faut y penser tout le temps ; c’est une charge mentale importante.</p>
  525. <p>D’un autre côté il faut quand même se protéger, ce n’est pas tout ou rien, il faut quand même se protéger, ce que l’ANSSI [Agence nationale de la sécurité des systèmes d’information] appelle l’hygiène numérique ; j'aime bien ce terme parce que ça ressemble effectivement à l’hygiène traditionnelle, c’est une contrainte et une contrainte qu’il faut faire souvent : se laver les mains tout le temps, des trucs comme ça, prendre un bain tous les jours, ce genre de choses, changer de vêtements ; c’est de l’hygiène de base qui est contraignante, mais qu’on a tous intégrée donc on n’y pense plus ; la plupart d’entre nous le font instinctivement, on s’est fait taper dessus quand on était petits et maintenant c’est complètement intégré, on le fait sans y penser.</p>
  526. <p>C’est un peu le genre de choses qu’il faudra faire aussi pour le numérique sachant que c’est plus compliqué pour le numérique, donc c’est plus difficile de le faire. On peut se lever le matin complètement endormi et prendre une douche, se savonner sans même vraiment y penser ; pour le numérique c’est plus difficile !</p>
  527. <p>C’est pour ça que le problème n’est pas uniquement chez l’utilisateur. C’est-à-dire que je suis d’accord que c’est intéressant de chercher les solutions que peuvent déployer les utilisateurs. Il y en a une que je vous dis tout de suite, je ne répéterais pas à la télé, peut-être, parce que ce n’est peut-être pas toujours légal mais c’est une bonne solution : mentez ! Quand on demande des informations sur un formulaire sur Internet, mentez ! Date de naissance : 1er janvier 70. Pays de naissance : Afghanistan et ce que vous voulez ; c’est le premier de la liste c’est pour ça que c’est un bon exemple. Ça peut être un exemple qui attire l’attention mais si justement tout le monde l’utilise ! Ces conseils sont tirés d’observations de vrais fichiers. Quand vous regardez un vrai fichier d’un formulaire en ligne où il n’y avait pas vraiment de vérifications, la proportion de gens nés en Afghanistan est assez dingue, parce qu’en fait c’est le premier pays de la liste.<br/>
  528. Mentir est une bonne solution. Ça peut être illégal dans certains cas, mais dans l’état actuel de la protection des données personnelles c’est souvent une bonne solution.</p>
  529. <h3>Lire les CGU ne sert à rien</h3>
  530. <p>Il y a des gens qui disent, par exemple c’est le discours de Facebook, « oui mais les gens ont accepté les CGU, les codes de conduite, les conditions d’utilisation, les termes du contrat, les trucs comme ça, ils les ont acceptés. »<br/>
  531. Le seul problème c’est que, d’abord, elles sont délibérément incompréhensibles : c’est long, c’est compliqué avec des formules juridiques qu’on ne comprend pas.<br/>
  532. Elles sont asymétriques. Même si vous les lisez soigneusement, dites-vous bien qu’en face il y a 500 avocats super-compétents qui les ont écrites pour vous tromper et vous, en les lisant, vous n’avez aucune chance de détecter les pièges que ces 500 juristes ont mis.</p>
  533. <p>Elles sont léonines au point d’être illégales. Par exemple, il y a une jurisprudence là-dessus, dans les conditions d’utilisation de Facebook, il y a écrit que le seul tribunal compétent c’est celui de l’État de Californie. Vachement pratique si on est français ! Il y a eu un jugement en France qui était lié à l’affaire de <em>L’Origine du monde</em> où un tribunal français a décidé que ces conditions étant inacceptables, elles étaient nulles. C’est un point important du droit des contrats en France, qu’il n’y a malheureusement pas aux États-Unis, qui est que les contrats léonins, c’est-à-dire complètement délirants, sont nuls et donc on peut signer ce qu’on veut, ça n’a aucune valeur. Évidemment il faut passer par un tribunal, faire un procès à Facebook, tout ça est compliqué, mais ça illustre le fait que ces CGU ne valent rien. Des fois il y a des gens qui disent « ce que tu as fait ce n’est pas bien parce que c’est contraire aux conditions d’utilisation que tu as signées ». Non ! Que j’ai été forcé de signer, qui étaient incompréhensibles et qui étaient de toutes façons illégales. Donc je n’ai aucun scrupule à les violer.<br/>
  534. Et puis, de toutes façons, ces conditions d’utilisation sont moins fortes que la loi. C’est-à-dire que dans les conditions d’utilisation Facebook vous met des obligations, mais il y a aussi des promesses du genre « on ne communiquera pas vos données à l’extérieur ». Même si Facebook était honnête en écrivant ça, et je suis sûr qu’ils ne le sont pas, mais même s’ils étaient honnêtes, ça pèse moins lourd que la loi. Si la loi des États-Unis leur impose de passer ces données, eh bien ils le feront. Ils peuvent difficilement désobéir à la loi de leur pays. Donc ces promesses ne valent rien et souvent elles sont mensongères.</p>
  535. <p>Un cas typique c’était Ashley Madison, un site de rencontres qui se positionnait explicitement sur le marché de la rencontre extraconjugale. Leur base de données a été piratée et publiée, ce qui est quand même assez gênant pour des gens. Et on s’est aperçu, à ce moment-là, que dans Ashley Madison il y avait une possibilité de supprimer son compte et on payait pour ça ; il fallait payer pour supprimer son compte. Alors qu’on payait pour un abonnement, il fallait payer pour la suppression du compte et on s’est aperçu avec la base de données qui a fuité que non seulement on payait pour supprimer son compte mais qu’il n’était pas supprimé. Et il n’y a eu aucune sanction. Aucun dirigeant de Ashley Madison n’a été mis en prison pour dix ans alors que c’était largement mérité ! Un tel mensonge, normalement ! On raconte souvent qu’aux États-Unis le mensonge c’est très grave et c’est très lourdement puni ! Baratin ! Il n’y a eu aucune sanctionnée contre les dirigeants de Ashley Madison ! Même après que le mensonge a été clairement établi.</p>
  536. <h3>Un peu d’hygiène numérique</h3>
  537. <p>Un peu d’hygiène numérique pour terminer, mais forcément ces conseils sont très sommaires. En plus, je voudrais quand même laisser du temps pour la discussion. Donc ne prenez pas ça comme un mode d’emploi à appliquer aveuglément, c’est plutôt pour donner une idée du genre de précautions qu’il faut prendre et malheureusement ça évolue tout le temps en plus.</p>
  538. <p>D’une manière générale préférer des outils qui sont décentralisés et associatifs plutôt que les GAFA.<br/>
  539. Brigitte a cité par exemple le réseau Mastodon<a class="see-footnote" id="footnoteref2_165k1xf" title="Mastodon" href="#footnote2_165k1xf">2</a> qui a ses défauts aussi ; c’est un truc d’humains et les humains ont tous des défauts, mais au moins il est géré par ses utilisateurs et il n’est pas lié à une boîte commerciale qui doit faire du fric avec. Ou les outils de Framasoft. Framasoft<a class="see-footnote" id="footnoteref3_jbb35jf" title="Framasoft - association d’éducation populaire" href="#footnote3_jbb35jf">3</a> est une association qui met à disposition des gens un certain nombre de services en ligne qui sont sur une base non commerciale et en utilisant des logiciels libres. En plus, c’est le seul opérateur de services qui dit « nous conseillons aux gens de ne pas utiliser non services », parce que le but est d’éviter qu’ils deviennent eux-mêmes un petit Google, donc ils encouragent les gens à créer leurs propres outils, leurs propres services et à leur faire concurrence.</p>
  540. <p>Les logiciels libres évidemment ont un avantage. C’est une condition nécessaire mais pas suffisante comme disent les mathématiciens. On peut faire des systèmes de surveillance et d’espionnage avec du logiciel libre mais c’est plus difficile. C’est pour ça qu’en général il faut privilégier les logiciels libres. Une machine par exemple Windows 10, vous la sortez du carton, vous l’allumez, vous regardez le trafic réseau qui passe, qu’elle échange avec l’extérieur ; avant même qu’elle ait fini de démarrer, que vous ayez une chance de taper votre nom, elle a déjà communiqué avec une dizaine de machines sur le réseau. Pour leur dire quoi ? Eh bien on ne sait pas ! Ça donne une idée du genre de danger qu’il y avec des logiciels dont on ne peut pas même pas examiner ce qu’ils font.</p>
  541. <p>Et si vous utilisez un GAFA, comme Google, Facebook, parce que, comme on l’a dit, c’est difficile des fois d'y couper complètement, eh bien ne lui donnez pas trop d’informations. Les conditions d’utilisation de Facebook, si vous ne les avez pas lues je les lis pour vous, il y a écrit que vous devez utiliser votre vrai nom, que vous ne pouvez pas utiliser un pseudonyme. Ignorez ça ! Ignorez ça, mettez un pseudonyme et qu’ils fassent un procès s’ils osent ! Ce genre de conditions d’utilisation est inacceptable.</p>
  542. <p>Rappelez que tout ce que vous faites connecté à Facebook ou à Gmail est enregistré. Donc ça oblige à faire un peu attention. Je n’aime pas donner ce conseil, parce que je n’aime pas dire aux gens restreignez-vous, ne dites pas ce que vous pensez ; c’est embêtant, mais c’est sans doute nécessaire dans l’état actuel de la collecte d’informations.<br/>
  543. Récemment, je ne sais plus dans quelle affaire, dans quel fait divers sordide, un des suspects a été arrêté. Un des éléments contre lui c’est qu’on avait regardé l’historique de son ordinateur et qu’il avait tapé dans Google « comment faire disparaître un cadavre ». C’était resté dans son ordinateur, donc on pouvait y accéder, mais même s’il avait complètement vidé son disque dur et son historique, ça restait dans la mémoire de Google qui pouvait communiquer ce genre d’information. En l’occurrence, c’est bien que ce type ait été arrêté, mais ça donne une idée de tout ce qui est enregistré et conservé.</p>
  544. <p>Et puis bien sûr, autant que possible utiliser le chiffrement des données, par exemple pour envoyer des messages courts, un système comme Signal qui chiffre les données entre votre smartphone et celui du correspondant est préférable à un système comme Telegram qui fait tout passer en clair ou d’autres systèmes, ou comme l’ancien WhatsApp. Maintenant WhatsApp est chiffré mais c’est un chiffrement assez contestable.<br/>
  545. Le chiffrement n’est pas une solution magique il ne résout pas tous les problèmes comme l’a découvert monsieur Urvoas quand le téléphone de son correspondant a été saisi, analysé et que tous les messages y étaient. Donc même s’ils étaient chiffrés en transit, ça n’empêchait pas de les lire sur le téléphone du correspondant ; néanmoins ça protège quand même contre pas mal d’attaques.</p>
  546. <p><b>Public : </b>Le fait que le site de sa messagerie soit sécurisé, que les données ne circulent pas en clair sur le réseau, ce n’est pas suffisant en fait ?</p>
  547. <p><b>Stéphane Bortzmeyer : </b>Rien n’est suffisant. C’est pour ça que je disais que le problème fondamental est politique. Je ne voudrais pas qu’on rentre trop dans des détails techniques qui larguent tout le monde ici. C’est clair qu’on ne peut pas donner ici, ce n’est pas le but, on ne peut pas dans cet atelier, dans cet apéro discussion, rentrer dans des détails de problèmes techniques.<br/>
  548. Il faut bien faire attention à ne pas se laisser entraîner par un goût de l’absolu, genre « ce n’est pas parfait » parce que le résultat, si on fait ça, c’est que les gens finiront par dire « ce n’est pas parfait donc je ne fais rien ». C’est très important, au contraire, de dire aux gens qu’on peut agir, qu’on peut faire quelque chose, sans illusions, mais au moins on peut faire quelque chose même si ce n’est pas parfait.</p>
  549. <p><b>Public : </b>Parce qu’avec le chiffrement je sais que mon émail ne circule pas en clair sur le réseau, en théorie, mais en réalité il est lisible par le service de messagerie.</p>
  550. <p><b>Stéphane Bortzmeyer : </b>Oui. Mais le mieux est l’ennemi du bien. Attention ! Surtout en sécurité, le mieux est vraiment l’ennemi du bien. Ne rien faire parce qu’on ne peut pas faire parfaitement ce n’est pas une bonne stratégie. Il faut déjà boucher le maximum de trous même si on sait bien qu’on ne les bouchera pas tous.</p>
  551. <p><b>Public : </b>Parce que là quand vous dites messagerie avec chiffrement, ça veut dire que moi-même je chiffre mon e-mail avant de l’envoyer ?</p>
  552. <p><b>Stéphane Bortzmeyer : </b>Ça peut être intégré dans le logiciel. C’est vrai qu’au point de vue du courrier électronique on n’a pas de solution absolument géniale. Moi je le fais, mais on n’a pas de solution absolument géniale. Pour la messagerie instantanée, on en a des beaucoup plus pratiques. Silence pour les SMS et Signal pour les communications sur Internet, par exemple ils chiffrent. Quand je dis c’est vous qui le faites, ce n’est pas vous qui faites des calculs mathématiques de tête ; le logiciel le fait pour vous. Donc c’est non-coûteux pour les utilisateurs ; le coût pour l’utilisateur est infime.</p>
  553. <p><b>Public : </b>Ça veut dire que la méthode c’est d’utiliser une application qui chiffre l’émail et non pas d’aller directement sur le site web de la messagerie ?</p>
  554. <p><b>Stéphane Bortzmeyer : </b>Là vraiment, désolé, mais on rentre dans des trucs trop compliqués. Si on veut avoir une discussion ici sur des sujets accessibles à tout le monde je suggère de passer ça à plus tard.</p>
  555. <p><b>Public : </b>D’accord.</p>
  556. <p><b>Stéphane Bortzmeyer : </b>Et puis bien sûr un bloqueur de publicité ; ça a plusieurs avantages, plein d’avantages. D’abord ça va aller beaucoup plus vite, tout va se charger beaucoup plus vite, c’est vraiment génial.<br/>
  557. La publicité est à la fois une des raisons pour lesquelles il y a le capitalisme de surveillance parce qu’elle a besoin de données et c’est elle-même un de ses outils parce que les publicités, en plus, intègrent tout un tas de systèmes de mouchards qui permettent de suivre les gens à la trace d’un endroit sur l’autre. Par exemple, sur les applications sur smartphone, le projet Exodus Privacy<a class="see-footnote" id="footnoteref4_pk71lo2" title="Exodus Privacy" href="#footnote4_pk71lo2">4</a> analyse un grand nombre d’applications et publie les résultats montrant le nombre de systèmes de surveillance, plus exactement de systèmes de mouchards qui existent sur l’application et c’est assez effrayant, y compris pour des applications qui sont faites par des services publics. Quand je disais qu’il n’y a pas que les GAFA ! L’application de Météo-France informe de vos visites Google, Facebook, Twitter et une demi-douzaine d’autres organisations dont des réseaux de publicité. Et c’est Météo-France, un service public ! Donc vous pouvez imaginer ce que c’est pour les boîtes commerciales. Donc le bloqueur de publicité c’est vraiment un outil recommandé.</p>
  558. <p>J’ai fait court et c’est pour ça que je ne suis pas rentré dans trop de détails techniques pour laisser la place à la discussion.</p>
  559. </article>
  560. </section>
  561. <nav id="jumpto">
  562. <p>
  563. <a href="/david/blog/">Accueil du blog</a> |
  564. <a href="https://www.april.org/web-et-vie-privee-stephane-bortzmeyer">Source originale</a> |
  565. <a href="/david/stream/2019/">Accueil du flux</a>
  566. </p>
  567. </nav>
  568. <footer>
  569. <div>
  570. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  571. <p>
  572. Bonjour/Hi!
  573. 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>
  574. 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>).
  575. </p>
  576. <p>
  577. 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>.
  578. </p>
  579. <p>
  580. Voici quelques articles choisis :
  581. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  582. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  583. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  584. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  585. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  586. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  587. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  588. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  589. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  590. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  591. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  592. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  593. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  594. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  595. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  596. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  597. </p>
  598. <p>
  599. 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>.
  600. </p>
  601. <p>
  602. Je ne traque pas ta navigation mais mon
  603. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  604. conserve des logs d’accès.
  605. </p>
  606. </div>
  607. </footer>
  608. <script type="text/javascript">
  609. ;(_ => {
  610. const jumper = document.getElementById('jumper')
  611. jumper.addEventListener('click', e => {
  612. e.preventDefault()
  613. const anchor = e.target.getAttribute('href')
  614. const targetEl = document.getElementById(anchor.substring(1))
  615. targetEl.scrollIntoView({behavior: 'smooth'})
  616. })
  617. })()
  618. </script>