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.

index.html 39KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803
  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>Censure administrative du Web en France, un premier regard technique (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="http://www.bortzmeyer.org/censure-francaise.html">
  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. Censure administrative du Web en France, un premier regard technique (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="http://www.bortzmeyer.org/censure-francaise.html">Source originale du contenu</a></h3>
  445. <div class="para"><p>Prenons l'exemple de <code>http://islamic-news.info/</code>
  446. dont, je suppose, d'après son nom de domaine, qu'il s'agit d'un site
  447. de propagande <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Islamisme" title="Consultez l'article &quot;Islamisme&quot; de l'encyclopédie libre Wikipedia">intégriste</a></b> (je n'ai pas pu le
  448. consulter, pas à cause de la censure française, facile à contourner,
  449. mais parce qu'il semble en panne). Si on essaie de le consulter depuis
  450. un <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Fournisseur%20d'acc%C3%A8s%20%C3%A0%20Internet" title="Consultez l'article &quot;Fournisseur d'accès à Internet&quot; de l'encyclopédie libre Wikipedia">FAI</a></b> français typique, on obtient à la place
  451. une page Web avec une main rouge menaçante (une référence historique
  452. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/La%20Main%20rouge%20(groupe%20arm%C3%A9)" title="Consultez l'article &quot;La Main rouge (groupe armé)&quot; de l'encyclopédie libre Wikipedia">très
  453. malencontreuse</a></b>, pour une décision étatique, il aurait mieux valu utiliser une
  454. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Main%20de%20justice" title="Consultez l'article &quot;Main de justice&quot; de l'encyclopédie libre Wikipedia">main de justice</a></b>) et un texte TOUT EN
  455. MAJUSCULES « VOUS AVEZ ÉTÉ REDIRIGÉ
  456. VERS CE SITE OFFICIEL
  457. CAR VOTRE ORDINATEUR
  458. ALLAIT SE CONNECTER
  459. À UNE PAGE DONT
  460. LE CONTENU PROVOQUE
  461. À DES ACTES
  462. DE TERRORISME
  463. OU FAIT PUBLIQUEMENT
  464. L'APOLOGIE
  465. D'ACTES DE TERRORISME ». Comment est-ce réalisé ?</p></div>
  466. <div class="para"><p>Les différents textes officiels sur ces mesures de censure
  467. n'imposaient pas aux FAI une technique particulière mais les
  468. conditions de mise en œuvre (liste noire de <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Nom%20de%20domaine" title="Consultez l'article &quot;Nom de domaine&quot; de l'encyclopédie libre Wikipedia">noms de
  469. domaine</a></b> « Les adresses électroniques figurant sur la liste [noire] comportent soit un nom de domaine (DNS), soit un nom d'hôte caractérisé par un nom de domaine précédé d'un nom de serveur », obligation de rediriger vers « CE SITE OFFICIEL »
  470. situé au <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Minist%C3%A8re%20de%20l'Int%C3%A9rieur%20(France)" title="Consultez l'article &quot;Ministère de l'Intérieur (France)&quot; de l'encyclopédie libre Wikipedia">ministère de l'Intérieur</a></b>), fait que la
  471. solution la plus simple est de mettre en place un résolveur <a href="dns-menteur.html" title="Consultez ce blog à propos de &quot;dns-menteur&quot;">DNS menteur</a>. Ce résolveur est la machine
  472. qui répond normalement aux requêtes <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Domain%20Name%20System" title="Consultez l'article &quot;Domain Name System&quot; de l'encyclopédie libre Wikipedia">DNS</a></b> de
  473. l'utilisateur, en lui donnant l'<b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/adresse%20IP" title="Consultez l'article &quot;adresse IP&quot; de l'encyclopédie libre Wikipedia">adresse IP</a></b> du
  474. serveur à contacter. (Au passage, une explication plus grand public du
  475. DNS avait été faite <a href="http://owni.fr/2012/07/05/internet-par-la-racine/">par Andréa
  476. Fradin</a>.)
  477. Essayons avec <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Dig%20(programme%20informatique)" title="Consultez l'article &quot;Dig (programme informatique)&quot; de l'encyclopédie libre Wikipedia">dig</a></b> depuis une machine au
  478. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Japon" title="Consultez l'article &quot;Japon&quot; de l'encyclopédie libre Wikipedia">Japon</a></b>, pour voir la vraie adresse IP :
  479. </p><pre>
  480. % dig +short A islamic-news.info
  481. 37.59.14.72
  482. </pre><p>
  483. Et depuis un FAI français (<b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Free%20(entreprise)" title="Consultez l'article &quot;Free (entreprise)&quot; de l'encyclopédie libre Wikipedia">Free</a></b>, mais on verra
  484. plus loin qu'il n'est pas le seul) :
  485. </p><pre>
  486. % dig +short A islamic-news.info
  487. 90.85.16.52
  488. </pre><p>
  489. L'adresse obtenue est différente, il y a bien un résolveur DNS menteur. Si on utilise un résolveur DNS
  490. public comme <a href="google-dns.html" title="Consultez ce blog à propos de &quot;google-dns&quot;">Google Public DNS</a>, on a
  491. également la vraie adresse IP :
  492. </p><pre>
  493. % dig @8.8.4.4 +short A islamic-news.info
  494. 37.59.14.72
  495. </pre><p>
  496. Est-ce bien ce trompeur <code>90.85.16.52</code> qui est le
  497. site officiel servant la « main rouge » ? Testons-le en
  498. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Hypertext%20Transfer%20Protocol" title="Consultez l'article &quot;Hypertext Transfer Protocol&quot; de l'encyclopédie libre Wikipedia">HTTP</a></b>. Il y a plusieurs méthodes pour cela mais
  499. j'ai utilisé une des plus simples, mettre dans mon fichier local
  500. <code>/etc/hosts</code> l'adresse de ce site pour un nom
  501. bidon :
  502. </p><pre>
  503. % cat /etc/hosts
  504. ...
  505. 90.85.16.52 front-liberation-potamocheres.example
  506. </pre><p>
  507. Et, en visitant
  508. <code>http://front-liberation-potamocheres.example/</code>,
  509. j'ai bien la page à la main rouge. On peut bien sûr tester
  510. directement <code>http://90.85.16.52/</code> mais des astuces
  511. techniques utilisées par le ministère font que cela ne marche pas
  512. toujours si le champ <code>Host:</code> indique une adresse IP, et qu'on récupère parfois un 403
  513. <i class="foreign" xml:lang="en">Forbidden</i>. Si vous ne voulez pas modifier votre
  514. <code>/etc/hosts</code> comme moi, vous pouvez vous servir des
  515. noms créés par Pierre Beyssac, <code><a href="http://interieur0.eu.org/"><code>http://interieur0.eu.org/</code></a></code>, <code><a href="http://interieur1.eu.org/"><code>http://interieur1.eu.org/</code></a></code> ou <code><a href="http://interieur2.eu.org/"><code>http://interieur2.eu.org/</code></a></code>.</p></div>
  516. <div class="para"><p>Si vous voulez tester avec d'autres
  517. noms de domaine censurés, vous pouvez essayer
  518. <code>jihadmin.com</code>,
  519. <code>is0lamnation.blogspot.fr</code>,
  520. <code>mujahida89.wordpress.com</code>, ou
  521. <code>alhayatmedia.wordpress.com</code> (sans que j'en
  522. recommande leur contenu, œuvre des crapules intégristes !).</p></div>
  523. <div class="para"><p>Notez que cela veut dire que le ministère de l'Intérieur est au
  524. courant de mon intérêt pour <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Potamoch%C3%A8re" title="Consultez l'article &quot;Potamochère&quot; de l'encyclopédie libre Wikipedia">cet
  525. animal</a></b> : avec ce système, l'utilisateur est redirigé,
  526. <b class="emphasis">à son insu</b>, vers un
  527. serveur Web du ministère de l'Intérieur, qui aura accès, via le champ HTTP
  528. <code>Host:</code> (<a href="7230.html" class="rfc" title="Consultez l'analyse du RFC 7230">RFC 7230</a>, section 5.4) au nom originellement demandé. Lourde responsabilité pour le FAI
  529. qui, en configurant son résolveur DNS pour rediriger, fait cette
  530. redirection, il envoie ses clients vers un site qui saura si on aime
  531. les potamochères, le djihad ou les photos pédophiles.</p></div>
  532. <div class="para"><p>Voici, vue avec <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Wireshark" title="Consultez l'article &quot;Wireshark&quot; de l'encyclopédie libre Wikipedia">tshark</a></b>, la
  533. requête HTTP qu'envoie votre machine au serveur géré par le ministère
  534. de l'Intérieur, où on voit bien le champ <code>Host</code> :
  535. </p><pre>
  536. Internet Protocol Version 4, Src: 192.168.2.1 (192.168.2.1), Dst: 90.85.16.52 (90.85.16.52)
  537. Transmission Control Protocol, Src Port: 56532 (56532), Dst Port: http (80), Seq: 450, Ack: 311, Len: 468
  538. Hypertext Transfer Protocol
  539. GET / HTTP/1.0\r\n
  540. Host: front-liberation-potamocheres.example\r\n
  541. User-Agent: Mozilla/5.0 (X11; Linux i686; rv:31.0) Gecko/20100101 Firefox/31.0 Iceweasel/31.4.0\r\n
  542. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8\r\n
  543. Accept-Language: en-US,en;q=0.5\r\n
  544. Accept-Encoding: gzip, deflate\r\n
  545. Pragma: no-cache\r\n
  546. Connection: keep-alive\r\n
  547. \r\n
  548. [Full request URI: http://front-liberation-potamocheres.example/]
  549. </pre><p>
  550. On voit également que <b class="emphasis">votre</b> adresse IP source
  551. apparait mais on y voit moins (c'est dans le reste de la connexion)
  552. que votre navigateur Web envoie également bien d'autres informations
  553. qui peuvent vous identifier, et qui sont peut-être également
  554. journalisées. (Voir le <a href="https://panopticlick.eff.org/">Panopticlick</a> pour une
  555. impressionnante démonstration.)
  556. Donc, ce « SITE OFFICIEL » part d'une bonne intention (rendre la
  557. censure explicite, comme <a href="censure-a-dubai.html" title="Consultez ce blog à propos de &quot;censure-a-dubai&quot;">à Dubaï</a>)
  558. mais a des conséquences très dangereuses. Pour s'amuser un peu, dans
  559. ce monde de brutes, on peut d'ailleurs utiliser cette propriété pour
  560. envoyer un message bien senti à ceux qui lisent ces <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Historique%20(informatique)" title="Consultez l'article &quot;Historique (informatique)&quot; de l'encyclopédie libre Wikipedia">journaux</a></b>, avec
  561. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/cURL" title="Consultez l'article &quot;cURL&quot; de l'encyclopédie libre Wikipedia">curl</a></b> (attention, cela se fera avec
  562. <b class="emphasis">votre</b> <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/adresse%20IP" title="Consultez l'article &quot;adresse IP&quot; de l'encyclopédie libre Wikipedia">adresse IP</a></b> : le but
  563. est de prendre position, pas de se cacher) :
  564. </p><pre>
  565. % curl -o /dev/null -H "Host: Halte a la censure administrative du Web" \
  566. -H "X-Charlie: Je suis Charlie" \
  567. http://90.85.16.52/\?$RANDOM
  568. </pre></div>
  569. <div class="para"><p>Une solution technique pour éviter que vos utilisateurs soient
  570. redirigés à leur insu vers un serveur HTTP qui va noter leur adresse
  571. et peut-être d'autres informations, est de bloquer les accès à ce
  572. serveur. Une requête <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/whois" title="Consultez l'article &quot;whois&quot; de l'encyclopédie libre Wikipedia">whois</a></b> montre que ce
  573. serveur est dans la plage <code>90.85.16.32/27</code> (notez
  574. que rien n'indique de lien avec le ministère de l'Intérieur, on a
  575. juste un nom, à <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Metz" title="Consultez l'article &quot;Metz&quot; de l'encyclopédie libre Wikipedia">Metz</a></b>). Pour bloquer cette
  576. plage, si on utilise <a href="filtrage-avec-shorewall.html" title="Consultez ce blog à propos de &quot;filtrage-avec-shorewall&quot;">Shorewall</a>, ce sera dans
  577. <code>/etc/shorewall/blacklist</code> quelque
  578. chose comme :
  579. </p><pre>
  580. # 2015-03-16: may do logging of visitors (French censorship system)
  581. 90.85.16.32/27
  582. </pre><p>
  583. Si vous utilisez directement <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Netfilter" title="Consultez l'article &quot;Netfilter&quot; de l'encyclopédie libre Wikipedia">Netfilter</a></b>, ce sera
  584. une commande du genre :
  585. </p><pre>
  586. # iptables --insert OUTPUT --destination 90.85.16.32/27 --jump REJECT
  587. </pre></div>
  588. <div class="para"><p>Notez que la <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Commission%20nationale%20de%20l'informatique%20et%20des%20libert%C3%A9s" title="Consultez l'article &quot;Commission nationale de l'informatique et des libertés&quot; de l'encyclopédie libre Wikipedia">CNIL</a></b> avait formulé <a href="http://legifrance.gouv.fr/affichTexte.do;jsessionid=?cidTexte=JORFTEXT000030236542&amp;dateTexte=&amp;oldAction=dernierJO&amp;categorieLien=id">un
  589. avis sur ce point</a>, et noté que « [les textes officiels ne] permet ni la collecte ni l'exploitation, par l'<b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Office%20central%20de%20lutte%20contre%20la%20criminalit%C3%A9%20li%C3%A9e%20aux%20technologies%20de%20l'information%20et%20de%20la%20communication" title="Consultez l'article &quot;Office central de lutte contre la criminalité liée aux technologies de l'information et de la communication&quot; de l'encyclopédie libre Wikipedia">OCLCTIC</a></b>, des données
  590. de connexion des internautes qui seraient redirigés vers la page
  591. d'information du ministère de l'intérieur. Elle [la CNIL] rappelle que si des
  592. traitements de données à caractère personnel spécifiques étaient
  593. alimentés par ces données, ils devraient être soumis à l'examen
  594. préalable de la commission. » Bref, la CNIL ne se mouille pas. Pas
  595. d'avis concret, du genre « l'adresse
  596. IP source et le champ <code>Host:</code> ne devront
  597. <b class="emphasis">pas</b> être journalisés", ce qui serait la moindre
  598. des choses, et laisserait quand même le ministère de l'Intérieur faire des
  599. statistiques sur le nombre de visiteurs des sites censurés. (Note
  600. technique au passage, si vous utilisez <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Apache%20HTTP%20Server" title="Consultez l'article &quot;Apache HTTP Server&quot; de l'encyclopédie libre Wikipedia">Apache</a></b>,
  601. la directive pour journaliser l'adresse IP source est
  602. <code>%h</code> - ou <code>%a</code> - et celle pour le champ
  603. <code>Host:</code> est <code>%v</code>. Ce sont ces deux
  604. directives qu'il faudrait retirer du <code>LogFormat</code> du ministère
  605. pour ne pas fliquer les utilisateurs. Cf. <a href="http://httpd.apache.org/docs/2.2/fr/mod/mod_log_config.html#logformat">la
  606. documentation d'Apache</a>.)</p></div>
  607. <div class="para"><p>Le décret cité au début comprend plusieurs motifs de censure, et on
  608. note que l'hébergeur a prévu des sites Web différents, avec des
  609. messages différents, selon le motif. Comparez les messages en <a href="http://90.85.16.52/"><code>http://90.85.16.52/</code></a> (terrorisme), <a href="http://90.85.16.51/"><code>http://90.85.16.51/</code></a> (pédophilie) et <a href="http://90.85.16.50/"><code>http://90.85.16.50/</code></a> (le reste, non spécifié).</p></div>
  610. <div class="para"><p>Continuons avec d'autres détails techniques : le « SITE OFFICIEL »
  611. est sans doute en place depuis très peu de temps car <a href="dnsdb.html" title="Consultez ce blog à propos de &quot;dnsdb&quot;">DNSDB</a> (qui n'est <b class="emphasis">pas</b> temps réel,
  612. loin de là), n'a pas encore vu de noms se résolvant en
  613. <code>90.85.16.52</code> (DNSDB permet de chercher par le
  614. contenu de la réponse DNS, pas juste par le nom demandé). Il est vrai
  615. que DNSDB a probablement peu ou pas de capteurs en France (je n'ai rien vu
  616. non plus sur les bases équivalentes comme <a href="passivedns-cn.html" title="Consultez ce blog à propos de &quot;passivedns-cn&quot;">PassiveDNS.cn</a>.)</p></div>
  617. <div class="para"><p>Quant au type de serveur <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/HTTP" title="Consultez l'article &quot;HTTP&quot; de l'encyclopédie libre Wikipedia">HTTP</a></b> utilisé, il
  618. prétend être un <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/nginx" title="Consultez l'article &quot;nginx&quot; de l'encyclopédie libre Wikipedia">nginx</a></b> (dans l'en-tête HTTP
  619. <code>Server:</code>) mais il ressemble plutôt à un
  620. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Apache" title="Consultez l'article &quot;Apache&quot; de l'encyclopédie libre Wikipedia">Apache</a></b> : le message d'erreur en cas d'accès
  621. refusé (testez <code>http://90.85.16.51/server-status</code>)
  622. et le fait que les <i class="foreign" xml:lang="en">Etags</i> ont le <a href="http://stackoverflow.com/a/44939/15625">format Apache</a> à
  623. trois champs, pas le <a href="http://trac.nginx.org/nginx/browser/nginx/src/http/ngx_http_core_module.c?rev=942283a53c289397131c9c2d1e0909af869fd4a4#L1802">format
  624. nginx à deux champs</a> (analyse faite par Kim-Minh Kaplan, merci).</p></div>
  625. <p><div class="para"><p>Quelle est l'ampleur du déploiement de ces DNS menteurs ? Pour
  626. cela, on va utiliser les <a href="https://atlas.ripe.net/">sondes
  627. Atlas</a>, petits ordinateurs placés un peu partout, et
  628. interrogeables via <a href="atlas-udm.html" title="Consultez ce blog à propos de &quot;atlas-udm&quot;">leur API</a>. Avec le programme <a href="https://github.com/RIPE-Atlas-Community/ripe-atlas-community-contrib/blob/master/resolve-name.py">resolve-name.py</a>,
  629. on va interroger les résolveurs DNS des sondes Atlas allemandes, pour
  630. commencer :
  631. </p><pre>
  632. % python resolve-name.py --country=DE islamic-news.info
  633. Measurement #1895738 for islamic-news.info/A uses 499 probes
  634. Probe 4407 failed (trailing junk)
  635. [] : 16 occurrences
  636. [37.59.14.72] : 677 occurrences
  637. Test done at 2015-03-15T16:03:37Z
  638. </pre><p>
  639. Toutes (sauf quelques-unes qui n'ont pas pu résoudre du tout le nom)
  640. trouvent la bonne adresse. (Il y a davantage de résultats que de
  641. sondes car chaque sonde fait plusieurs essais.) Essayons en France :
  642. </p><pre>
  643. % python resolve-name.py --country=FR islamic-news.info
  644. Measurement #1895736 for islamic-news.info/A uses 498 probes <br />
  645. [] : 22 occurrences
  646. [90.85.16.52] : 346 occurrences
  647. [37.59.14.72] : 403 occurrences
  648. Test done at 2015-03-15T15:39:15Z
  649. </pre><p>
  650. À peu près la moitié des sondes Atlas en France voient la
  651. censure. Notez que les sondes Atlas ne sont pas du tout
  652. représentatives : installées par des volontaires, sans doute dans des
  653. réseaux plus <i class="foreign" xml:lang="en"><b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Geek" title="Consultez l'article &quot;Geek&quot; de l'encyclopédie libre Wikipedia">geeks</a></b></i> que la
  654. moyenne, elles ont plus de chances d'avoir un résolveur local non
  655. menteur (voir plus loin, pour cette solution anti-censure).</p></div>
  656. <div class="para"><p>Par défaut, ce programme fait des requêtes de type
  657. <code>A</code> (demande d'une adresse
  658. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/IPv4" title="Consultez l'article &quot;IPv4&quot; de l'encyclopédie libre Wikipedia">IPv4</a></b>). On peut lui demander ce qu'il en est
  659. pour les <code>AAAA</code> (demande d'une adresse
  660. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/IPv6" title="Consultez l'article &quot;IPv6&quot; de l'encyclopédie libre Wikipedia">IPv6</a></b>). Normalement, il ne devrait pas y avoir
  661. de réponse (le nom n'a pas d'adresse IPv6 associé) mais un FAI a
  662. trouvé le moyen de mentir pour IPv6 et quel mensonge :
  663. </p><pre>
  664. % python resolve-name.py -t AAAA -c FR islamic-news.info
  665. Measurement #1895755 for islamic-news.info/AAAA uses 498 probes
  666. [] : 586 occurrences
  667. [::1] : 191 occurrences
  668. Test done at 2015-03-15T20:25:57Z
  669. </pre><p>
  670. Il renvoie, non pas vers la page du gouvernement, mais vers la machine locale...
  671. </p></div>
  672. <div class="para"><p>Et si on regarde par <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Autonomous%20System" title="Consultez l'article &quot;Autonomous System&quot; de l'encyclopédie libre Wikipedia">AS</a></b> et plus par pays :
  673. </p><pre>
  674. % python resolve-name.py --as=3215 islamic-news.info
  675. Measurement #1895737 for islamic-news.info/A uses 133 probes
  676. [90.85.16.52] : 189 occurrences
  677. [37.59.14.72] : 32 occurrences
  678. Test done at 2015-03-15T15:59:52Z</p>
  679. <p>% python resolve-name.py --as=20766 islamic-news.info <br />
  680. Measurement #1895739 for islamic-news.info/A uses 4 probes
  681. [37.59.14.72] : 5 occurrences
  682. Test done at 2015-03-15T16:06:34Z
  683. </pre><p>
  684. Le premier AS est celui d'<b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Orange%20(entreprise)" title="Consultez l'article &quot;Orange (entreprise)&quot; de l'encyclopédie libre Wikipedia">Orange</a></b>, où il semble
  685. que la majorité des sondes voient le résolveur légal. Le second est
  686. celui de <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Gitoyen" title="Consultez l'article &quot;Gitoyen&quot; de l'encyclopédie libre Wikipedia">Gitoyen</a></b>, dont les clients (comme
  687. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/French%20Data%20Network" title="Consultez l'article &quot;French Data Network&quot; de l'encyclopédie libre Wikipedia">FDN</a></b>) ont plus de chances d'utiliser un
  688. résolveur non-menteur. (Notez toutefois que le faible nombre de sondes
  689. doit rendre prudent dans l'analyse.)</p></div>
  690. <div class="para"><p>Et <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Domain%20Name%20System%20Security%20Extensions" title="Consultez l'article &quot;Domain Name System Security Extensions&quot; de l'encyclopédie libre Wikipedia">DNSSEC</a></b> ? Est-ce qu'il résoudrait ce
  691. problème ? Non, car la validation est faite dans le résolveur. S'il
  692. est menteur, le fait de valider ne changera rien. Seul avantage, les gens qui valident avec DNSSEC ne verront pas la page
  693. d'information du ministère de l’intérieur (et ne seront pas
  694. enregistrés par ledit ministère) puisque le mensonge dans
  695. le résolveur entraînera une erreur (<code>SERVFAIL</code> :
  696. <code>Server Failure</code>) sur les domaines signés (ce qui
  697. n'est de toute façon pas le cas de <code>islamic-news.info</code>).</p></div>
  698. <div class="para"><p>À propos de <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/cryptographie" title="Consultez l'article &quot;cryptographie&quot; de l'encyclopédie libre Wikipedia">cryptographie</a></b>, notez que le site
  699. vers lequel on est redirigé n'a <b class="emphasis">pas</b>
  700. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/HTTPS" title="Consultez l'article &quot;HTTPS&quot; de l'encyclopédie libre Wikipedia">HTTPS</a></b>. Cela veut dire que le djihadiste ou le
  701. pédophile prudent, qui n'utilise que HTTPS, ne verra jamais la jolie
  702. main rouge (juste un <i class="foreign" xml:lang="en">timeout</i>).</p></div>
  703. <div class="para"><p>Quelles solutions sont disponibles si on veut quand même voir la
  704. propagande <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Djihadisme" title="Consultez l'article &quot;Djihadisme&quot; de l'encyclopédie libre Wikipedia">djihadiste</a></b> ? La seule solution
  705. propre techniquement est d'avoir <a href="son-propre-resolveur-dns.html" title="Consultez ce blog à propos de &quot;son-propre-resolveur-dns&quot;">son propre résolveur DNS</a>. En
  706. attendant, on peut utiliser un résolveur non-menteur (en supposant
  707. qu'il ne soit pas <a href="turquie-dns-frnog.html" title="Consultez ce blog à propos de &quot;turquie-dns-frnog&quot;">détourné</a> et que le <a href="port53-filtre.html" title="Consultez ce blog à propos de &quot;port53-filtre&quot;">port 53</a> ne soit pas filtré). Dans tous les cas, il
  708. est sûr que la <a href="resolution-de-demain.html" title="Consultez ce blog à propos de &quot;resolution-de-demain&quot;">stabilité et la
  709. sécurité de l'Internet</a> vont en souffrir. Sinon, on peut aussi
  710. s'auto-radicaliser un peu plus et franchement passer à
  711. <b><a class="wikipedia" hreflang="fr" href="http://fr.wikipedia.org/wiki/Tor%20(r%C3%A9seau)" title="Consultez l'article &quot;Tor (réseau)&quot; de l'encyclopédie libre Wikipedia">Tor</a></b> pour naviguer sur le Web.</p></div></p>
  712. </article>
  713. </section>
  714. <nav id="jumpto">
  715. <p>
  716. <a href="/david/blog/">Accueil du blog</a> |
  717. <a href="http://www.bortzmeyer.org/censure-francaise.html">Source originale</a> |
  718. <a href="/david/stream/2019/">Accueil du flux</a>
  719. </p>
  720. </nav>
  721. <footer>
  722. <div>
  723. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  724. <p>
  725. Bonjour/Hi!
  726. 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>
  727. 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>).
  728. </p>
  729. <p>
  730. 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>.
  731. </p>
  732. <p>
  733. Voici quelques articles choisis :
  734. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  735. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  736. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  737. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  738. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  739. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  740. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  741. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  742. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  743. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  744. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  745. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  746. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  747. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  748. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  749. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  750. </p>
  751. <p>
  752. 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>.
  753. </p>
  754. <p>
  755. Je ne traque pas ta navigation mais mon
  756. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  757. conserve des logs d’accès.
  758. </p>
  759. </div>
  760. </footer>
  761. <script type="text/javascript">
  762. ;(_ => {
  763. const jumper = document.getElementById('jumper')
  764. jumper.addEventListener('click', e => {
  765. e.preventDefault()
  766. const anchor = e.target.getAttribute('href')
  767. const targetEl = document.getElementById(anchor.substring(1))
  768. targetEl.scrollIntoView({behavior: 'smooth'})
  769. })
  770. })()
  771. </script>