Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>
  13. Porte
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="For me, the two big lessons from #XZ were first, the lack of resources supporting crucial Open-Source infrastructure, but then and especially, the demonstration that the attackers are numerous, skilled and patient. We already knew about numerous and skilled but this episode, where the attacker was already well-embedded in the project by May 2022, opened a few eyes, including mine.">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Porte</h1>
  136. <p>Le <time datetime="2024-04-02">2 avril 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/03/30/"
  143. title="Publication précédente : Jour 2">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. </p>
  149. </nav>
  150. <blockquote lang="en">
  151. <p>For me, the two big lessons from #XZ were first, the lack of resources supporting crucial Open-Source infrastructure, but then and especially, the demonstration that the attackers are numerous, skilled <em>and patient</em>. We already knew about numerous and skilled but this episode, where the attacker was already well-embedded in the project by May 2022, opened a few eyes, including&nbsp;mine.</p>
  152. <p>The advantage, to various flavors of malefactor, of subverting core pieces of Open-Source infrastructure, is incalculable. <mark>#XZ was the one we caught; how many have we&nbsp;missed?</mark></p>
  153. <p><cite><em><a data-link-domain="tbray.org" href="https://www.tbray.org/ongoing/When/202x/2024/04/01/OSQI" hreflang="en"
  154. title="Consultation de l’article (anglais)">ongoing by Tim Bray · OSQI</a>
  155. <a href="/david/cache/2024/8ffe1e30cd3dd6446468bd6d03550457/" hreflang="en"
  156. data-tippy data-description=""
  157. data-source="https://www.tbray.org/ongoing/When/202x/2024/04/01/OSQI"
  158. data-date="2024-04-04"
  159. data-favicon="https://www.tbray.org/favicon.ico"
  160. data-domain="tbray.org"
  161. ><svg xmlns="http://www.w3.org/2000/svg"
  162. width="24" height="24" viewBox="0 0 24 24" fill="none"
  163. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  164. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  165. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  166. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  167. </svg>
  168. <span class="sr-only">[archive]</span></a></em></cite></p>
  169. </blockquote>
  170. <p>J’ai laissé le web 2&nbsp;jours et hop, une <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Porte_d%C3%A9rob%C3%A9e">porte dérobée</a> a été fermée à temps. C’est <a data-link-domain="boehs.org" href="https://boehs.org/node/everything-i-know-about-the-xz-backdoor" hreflang="en"
  171. title="Consultation de l’article (anglais)">la chronologie</a>
  172. <a href="/david/cache/2024/b4d0d377662e30cef4e944448d41338c/" hreflang="en"
  173. data-tippy data-description="Please note: This is being updated in real-time. The intent is to make sense of lots of simultaneous discoveries"
  174. data-source="https://boehs.org/node/everything-i-know-about-the-xz-backdoor"
  175. data-date="2024-04-04"
  176. data-favicon="https://boehs.org/favicon.ico"
  177. data-domain="boehs.org"
  178. ><svg xmlns="http://www.w3.org/2000/svg"
  179. width="24" height="24" viewBox="0 0 24 24" fill="none"
  180. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  181. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  182. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  183. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  184. </svg>
  185. <span class="sr-only">[archive]</span></a> qui est surprenante dans sa durée et pose immédiatement la question de savoir s’il s’agit d’une exception ou s’il y a déjà des portes un peu partout, exploitées par plus ou moins de&nbsp;monde.</p>
  186. <p>Lorsqu’on voit ce que <a href="/david/2024/03/28/#hr-140">sont prêts à faire les GAFAM+</a>, je n’ai aucun doute sur le fait qu’ils se rueraient sur de telles «&nbsp;opportunités&nbsp;». On parle souvent de malveillance dans ces cas là, je pense que l’on peut facilement mettre tout ce qui est <em>growth hacking</em> et <em>marketing</em> dans ce&nbsp;périmètre.</p>
  187. <p>Pour en revenir à des OSQI (Open Source Quality Institutes) nationaux, cela me rappelle des initiatives comme <a data-link-domain="copiepublique.fr" href="https://copiepublique.fr/">copie publique</a> ou cette idée de <a href="/david/2023/01/11/">MécénatDeCompétencesPublic</a>&#8239;.</p>
  188. <p>Transformer l’Open-Source en bien commun est peut-être le chantier de la décennie à venir. J’espère en faire partie à mon&nbsp;échelle.</p>
  189. <blockquote lang="en">
  190. <p>Tuesday, Hans-Christoph Steiner, a longtime developer of F-Droid, explained that a very similar situation nearly led F-Droid to push an update that would have introduced a security vulnerability into the product three years ago: “Three years ago, F-Droid had a similar kind of attempt as the Xz backdoor,” he posted on Mastodon. “A new contributor submitted a merge request to improve the search, which was oft requested but the maintainers hadn’t found time to work on. There was also pressure from other random accounts to merge it. In the end, it became clear that it added a SQL injection vulnerability. In this case, we managed to catch it before it was merged. Since similar tactics were used, I think it’s relevant&nbsp;now.”</p>
  191. <p>Other open source developers and security experts have pointed to the dynamic of bullying and the general reliance on a small number of volunteer developers. They explained that it’s a problem across much of the open source software ecosystem, and is definitely a problem for the large tech companies and infrastructure who rely on these often volunteer-led projects to build their for-profit software on top&nbsp;of.</p>
  192. <p><cite><em><a data-link-domain="404media.co" href="https://www.404media.co/xz-backdoor-bullying-in-open-source-software-is-a-massive-security-vulnerability/" hreflang="en"
  193. title="Consultation de l’article (anglais)">Bullying in Open Source Software Is a Massive Security Vulnerability</a>
  194. <a href="/david/cache/2024/14da9039de50c54f159f333ea3dc73f1/" hreflang="en"
  195. data-tippy data-description="The Xz backdoor and a near miss on the F-Droid app store show how the entitled attitude of some people in the open source community can be used to push malicious or insecure code."
  196. data-source="https://www.404media.co/xz-backdoor-bullying-in-open-source-software-is-a-massive-security-vulnerability/"
  197. data-date="2024-04-04"
  198. data-favicon="https://www.404media.co/content/images/size/w256h256/format/png/2023/08/favicon-3.svg"
  199. data-domain="404media.co"
  200. ><svg xmlns="http://www.w3.org/2000/svg"
  201. width="24" height="24" viewBox="0 0 24 24" fill="none"
  202. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  203. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  204. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  205. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  206. </svg>
  207. <span class="sr-only">[archive]</span></a></em></cite></p>
  208. </blockquote>
  209. <nav>
  210. <p>
  211. <a href="/david/2024/commun/"
  212. title="Liste de tous les articles 2024 associés à cette étiquette"
  213. rel="tag">#commun</a>
  214. <a href="/david/2024/opensource/"
  215. title="Liste de tous les articles 2024 associés à cette étiquette"
  216. rel="tag">#opensource</a>
  217. <a href="/david/2024/protopie/"
  218. title="Liste de tous les articles 2024 associés à cette étiquette"
  219. rel="tag">#protopie</a>
  220. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  221. </p>
  222. </nav>
  223. <nav>
  224. <p>
  225. <a rel="prev"
  226. href="/david/2024/03/30/"
  227. title="Publication précédente : Jour 2">← Précédent</a> •
  228. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  229. </p>
  230. </nav>
  231. <form action="/david/recherche/" method="get">
  232. <fieldset>
  233. <legend>Recherche</legend>
  234. <label for="input-search">Termes de votre recherche :</label>
  235. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  236. <input type="submit" value="Chercher">
  237. <p id="indexation-infos">
  238. <small>
  239. Seuls les contenus de ces 8 dernières années sont indexés.
  240. </small>
  241. </p>
  242. </fieldset>
  243. </form>
  244. <aside>
  245. <theme-toggle></theme-toggle>
  246. </aside>
  247. </article>
  248. <hr>
  249. <footer>
  250. <p>
  251. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  252. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  253. <a href="http://larlet.com"
  254. title="Go to my English profile"
  255. data-instant>Pro</a>
  256. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  257. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  258. </p>
  259. <template id="theme-selector">
  260. <form>
  261. <style type="text/css">
  262. fieldset div {
  263. text-align: center;
  264. }
  265. </style>
  266. <fieldset>
  267. <legend>Thème</legend>
  268. <div>
  269. <label>
  270. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  271. Auto
  272. </label>
  273. <label>
  274. <input type="radio" value="dark" name="chosen-color-scheme">
  275. Foncé
  276. </label>
  277. <label>
  278. <input type="radio" value="light" name="chosen-color-scheme">
  279. Clair
  280. </label>
  281. </div>
  282. </fieldset>
  283. </form>
  284. </template>
  285. </footer>
  286. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  287. <script>
  288. class ThemeToggle extends HTMLElement {
  289. constructor() {
  290. super()
  291. const themeSelectorTemplate = document.querySelector('#theme-selector')
  292. const form = themeSelectorTemplate.content.firstElementChild
  293. this.attachShadow({ mode: 'open' })
  294. this.shadowRoot.appendChild(form.cloneNode(true))
  295. }
  296. connectedCallback() {
  297. const form = this.shadowRoot.querySelector('form')
  298. form.addEventListener('change', (e) => {
  299. const chosenColorScheme = e.target.value
  300. localStorage.setItem('theme', chosenColorScheme)
  301. toggleTheme(chosenColorScheme)
  302. })
  303. const selectedTheme = localStorage.getItem('theme')
  304. if (selectedTheme && selectedTheme !== 'undefined') {
  305. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  306. }
  307. }
  308. }
  309. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  310. window.addEventListener('load', () => {
  311. let colorsLayer = undefined
  312. let hasDarkRules = false
  313. for (const styleSheet of Array.from(document.styleSheets)) {
  314. let mediaRules = []
  315. for (const layerRule of styleSheet.cssRules) {
  316. if (!(layerRule instanceof CSSLayerBlockRule)) {
  317. continue
  318. }
  319. if (layerRule.name === 'colors') {
  320. colorsLayer = layerRule
  321. }
  322. for (const cssRule of layerRule.cssRules) {
  323. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  324. continue
  325. }
  326. // WARNING: Safari does not have/supports `conditionText`.
  327. if (cssRule.conditionText) {
  328. if (cssRule.conditionText !== prefersColorSchemeDark) {
  329. continue
  330. }
  331. } else {
  332. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  333. continue
  334. }
  335. }
  336. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  337. }
  338. }
  339. // WARNING: do not try to insert a Rule to a styleSheet you are
  340. // currently iterating on, otherwise the browser will be stuck
  341. // in a infinite loop…
  342. for (const mediaRule of mediaRules) {
  343. // Safari requires the `0` second parameter (even if default).
  344. colorsLayer.insertRule(mediaRule.cssText, 0)
  345. hasDarkRules = true
  346. }
  347. }
  348. if (hasDarkRules) {
  349. if ('customElements' in window && !customElements.get('theme-toggle')) {
  350. customElements.define('theme-toggle', ThemeToggle)
  351. }
  352. }
  353. })
  354. </script>
  355. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  356. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  357. <script>
  358. tippy('[data-tippy]', {
  359. content(reference) {
  360. reference.addEventListener('click', (e) => e.preventDefault())
  361. return `
  362. <h3 lang="fr">
  363. <img src="${reference.dataset.favicon}" loading="lazy">
  364. <a href="${reference.dataset.source}"
  365. >Article sur ${reference.dataset.domain}</a></h3>
  366. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  367. <div class="tippy-links" lang="fr">
  368. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  369. </div>
  370. `
  371. },
  372. allowHTML: true,
  373. interactive: true,
  374. delay: [150, 700],
  375. hideOnClick: false
  376. })
  377. </script>
  378. <script type="module">
  379. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  380. const markObserver = new IntersectionObserver((entries, observer) => {
  381. const computedStyle = getComputedStyle(document.documentElement)
  382. const markBackground = computedStyle.getPropertyValue('--mark-background')
  383. for (const entry of entries) {
  384. if (entry.intersectionRatio === 0) continue
  385. const markElement = entry.target
  386. markElement.style.backgroundColor = 'inherit'
  387. const annotation = annotate(
  388. markElement, {
  389. type: 'highlight',
  390. multiline: true,
  391. color: markBackground,
  392. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  393. animate: false
  394. }
  395. )
  396. annotation.show()
  397. observer.unobserve(markElement)
  398. }
  399. }, {threshold: 1.0})
  400. for (const markElement of document.querySelectorAll('mark')) {
  401. markObserver.observe(markElement)
  402. }
  403. </script>
  404. </body>
  405. </html>