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 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>DST Root CA X3 Expiration (September 2021) (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script>
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://letsencrypt.org/docs/dst-root-ca-x3-expiration-september-2021/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>DST Root CA X3 Expiration (September 2021)</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  63. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  64. </svg> Accueil</a> •
  65. <a href="https://letsencrypt.org/docs/dst-root-ca-x3-expiration-september-2021/" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <p>On September 30 2021, there will be a small change in how older browsers and devices
  70. trust Let’s Encrypt certificates. If you run a typical website, you won’t notice
  71. a difference - the vast majority of your visitors will still accept your Let’s
  72. Encrypt certificate. If you provide an API or have to support IoT devices, you
  73. might have to pay a little more attention to the change.</p>
  74. <p>Let’s Encrypt has a “<a href="https://letsencrypt.org/docs/glossary/#def-root">root certificate</a>” called <a href="https://letsencrypt.org/certificates/" hreflang="en-US">ISRG Root X1</a>. Modern browsers and
  75. devices trust the Let’s Encrypt certificate installed on your website because
  76. they include ISRG Root X1 in their list of root certificates. To make sure the
  77. certificates we issue are trusted on older devices, we also have a
  78. “cross-signature” from an older root certificate: DST Root CA X3.</p>
  79. <p>When we got started, that older root certificate (DST Root CA X3) helped us get
  80. off the ground and be trusted by almost every device immediately. The newer root
  81. certificate (ISRG Root X1) is now widely trusted too - but some older devices
  82. won’t ever trust it because they don’t get software updates (for example, an
  83. iPhone 4 or an HTC Dream). <a href="https://letsencrypt.org/docs/certificate-compatibility/" hreflang="en-US">Click here for a list of which platforms trust ISRG
  84. Root X1</a>.</p>
  85. <p>DST Root CA X3 will expire on September 30, 2021. That means those older devices
  86. that don’t trust ISRG Root X1 will start getting certificate warnings when
  87. visiting sites that use Let’s Encrypt certificates. There’s one important
  88. exception: older Android devices that don’t trust ISRG Root X1 will continue to
  89. work with Let’s Encrypt, <a href="https://letsencrypt.org/2020/12/21/extending-android-compatibility.html">thanks to a special cross-sign from DST Root CA X3</a>
  90. that extends past that root’s expiration. This exception only works for Android.</p>
  91. <p>What should you do? For most people, nothing at all! We’ve set up our
  92. certificate issuance so your web site will do the right thing in most cases,
  93. favoring broad compatibility. If you provide an API or have to support IoT
  94. devices, you’ll need to make sure of two things: (1) all clients of your API
  95. must trust ISRG Root X1 (not just DST Root CA X3), and (2) if clients of your
  96. API are using OpenSSL, <a href="https://community.letsencrypt.org/t/openssl-client-compatibility-changes-for-let-s-encrypt-certificates/143816">they must use version 1.1.0 or later</a>. In OpenSSL
  97. 1.0.x, a quirk in certificate verification means that even clients that trust
  98. ISRG Root X1 will fail when presented with the Android-compatible certificate
  99. chain we are recommending by default.</p>
  100. <p>If you have any questions about the upcoming expiration,
  101. <a href="https://community.letsencrypt.org/t/help-thread-for-dst-root-ca-x3-expiration-september-2021/149190">please post to this thread on our forum.</a></p>
  102. </article>
  103. <hr>
  104. <footer>
  105. <p>
  106. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  107. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  108. </svg> Accueil</a> •
  109. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  110. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  111. </svg> RSS</a> •
  112. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  113. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  114. </svg> Pro</a> •
  115. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  116. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  117. </svg> Email</a> •
  118. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  119. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  120. </svg> Légal</abbr>
  121. </p>
  122. <template id="theme-selector">
  123. <form>
  124. <fieldset>
  125. <legend><svg class="icon icon-brightness-contrast">
  126. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  127. </svg> Thème</legend>
  128. <label>
  129. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  130. </label>
  131. <label>
  132. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  133. </label>
  134. <label>
  135. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  136. </label>
  137. </fieldset>
  138. </form>
  139. </template>
  140. </footer>
  141. <script>
  142. function loadThemeForm(templateName) {
  143. const themeSelectorTemplate = document.querySelector(templateName)
  144. const form = themeSelectorTemplate.content.firstElementChild
  145. themeSelectorTemplate.replaceWith(form)
  146. form.addEventListener('change', (e) => {
  147. const chosenColorScheme = e.target.value
  148. localStorage.setItem('theme', chosenColorScheme)
  149. toggleTheme(chosenColorScheme)
  150. })
  151. const selectedTheme = localStorage.getItem('theme')
  152. if (selectedTheme && selectedTheme !== 'undefined') {
  153. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  154. }
  155. }
  156. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  157. window.addEventListener('load', () => {
  158. let hasDarkRules = false
  159. for (const styleSheet of Array.from(document.styleSheets)) {
  160. let mediaRules = []
  161. for (const cssRule of styleSheet.cssRules) {
  162. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  163. continue
  164. }
  165. // WARNING: Safari does not have/supports `conditionText`.
  166. if (cssRule.conditionText) {
  167. if (cssRule.conditionText !== prefersColorSchemeDark) {
  168. continue
  169. }
  170. } else {
  171. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  172. continue
  173. }
  174. }
  175. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  176. }
  177. // WARNING: do not try to insert a Rule to a styleSheet you are
  178. // currently iterating on, otherwise the browser will be stuck
  179. // in a infinite loop…
  180. for (const mediaRule of mediaRules) {
  181. styleSheet.insertRule(mediaRule.cssText)
  182. hasDarkRules = true
  183. }
  184. }
  185. if (hasDarkRules) {
  186. loadThemeForm('#theme-selector')
  187. }
  188. })
  189. </script>
  190. </body>
  191. </html>