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

index.html 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  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>Plaintext HTTP in a Modern World (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://jcs.org/2021/01/06/plaintext">
  55. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Plaintext HTTP in a Modern World</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://jcs.org/2021/01/06/plaintext" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <p>On the modern web, everything must be encrypted.
  70. Unencrypted websites are treated as relics of the past with browsers declaring
  71. them toxic waste not to be touched (or
  72. <a href="//blog.mozilla.org/security/2020/11/17/firefox-83-introduces-https-only-mode/">even looked at</a>)
  73. and search engines de-prioritizing their content.</p>
  74. <p>While this push for security is good for protecting modern communication, there
  75. is a whole web full of information and services that don’t <em>need</em> to be secured
  76. and those trying to access them from older vintage computers or even through
  77. modern embedded devices are increasingly being left behind.</p>
  78. <p class="alert">Note: This article is mostly directed at those serving personal websites, like
  79. this one, with no expectation of privacy or security by most readers of the
  80. content.
  81. If you are running a commercial website, collecting personal information from
  82. users, or transmitting sensitive data that users would expect to be done
  83. privately, disregard everything here and don’t bother offering your website over
  84. plaintext.</p>
  85. <h2 id="http-upgrading">HTTP Upgrading</h2>
  86. <p>Though it’s less common these days, users may still type in your website URL
  87. manually as opposed to clicking on a link that already includes the <code class="language-plaintext highlighter-rouge">https</code>
  88. scheme.
  89. (Imagine a user hearing your website mentioned on a podcast and they have to
  90. type it into their browser.)</p>
  91. <p>For a URL entered with an <code class="language-plaintext highlighter-rouge">http</code> scheme or, more commonly, no scheme specified,
  92. unless your domain is listed in the
  93. <a href="//www.chromium.org/hsts"><abbr title="Strict Transport Security">STS</abbr> preload list</a>
  94. of the user’s browser or they are using a plugin like
  95. <a href="//www.eff.org/https-everywhere">HTTPS Everywhere</a>, the browser will
  96. default to loading your website over plaintext HTTP.
  97. For this reason, even if your website is only served over HTTPS, it’s still
  98. necessary to configure your server to respond to plaintext HTTP requests with a
  99. 301 or 302 redirect to the HTTPS version of the URL.</p>
  100. <p>If your server is properly configured to send a <code class="language-plaintext highlighter-rouge">Strict-Transport-Security</code>
  101. header, once the user’s browser loads your website’s HTTPS version, the browser
  102. will cache that information for days or months and future attempts to load your
  103. site will default to the HTTPS scheme instead of HTTP even if the user manually
  104. types in an <code class="language-plaintext highlighter-rouge">http://</code> URL.</p>
  105. <h2 id="avoid-forced-upgrading-by-default">Avoid Forced Upgrading by Default</h2>
  106. <p>This forced redirection is a major cause of websites becoming inaccessible on
  107. vintage computers.
  108. Your server responds to the HTTP request with a 301 or 302 status and no
  109. content, and either a) the browser follows the redirection and tries to
  110. negotiate an SSL connection, but your server doesn’t offer legacy SSL versions
  111. or old ciphers so the negotiation fails, or b) the browser just doesn’t support
  112. SSL/TLS at all and fails to follow the redirection.</p>
  113. <p>A real-life example of this is that I recently purchased a Powerbook G4 and
  114. updated it to MacOS X 10.5.8 from 2009.
  115. It has a 1.5Ghz processor and 1.25Gb of RAM, and can connect to my modern WiFi
  116. network and use most of my USB peripherals.
  117. It includes a Mail client that can talk to my IMAP and SMTP servers, and a
  118. Safari web browser which can render fairly modern CSS layouts.
  119. However, it’s unable to view any content at all on Wikipedia simply because it
  120. can’t negotiate TLS 1.2 with the ciphers Wikipedia requires.
  121. Why is a decade-old computer too old to view encyclopedia articles?</p>
  122. <p>A solution to this problem is for websites to continue offering their full
  123. content over plaintext HTTP in addition to HTTPS.
  124. If you’re using Nginx, instead of creating two <code class="language-plaintext highlighter-rouge">server</code> blocks with the <code class="language-plaintext highlighter-rouge">listen
  125. *:80</code> version redirecting to the <code class="language-plaintext highlighter-rouge">listen *:443 ssl</code> version, use a single
  126. <code class="language-plaintext highlighter-rouge">server</code> block with multiple <code class="language-plaintext highlighter-rouge">listen</code> lines, like so:</p>
  127. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>server {
  128. server_name jcs.org;
  129. listen *:80;
  130. listen *:443 ssl http2;
  131. ssl_certificate ...;
  132. ssl_certificate_key ...;
  133. ...
  134. ssl_protocols TLSv1.2;
  135. }
  136. </code></pre></div></div>
  137. <p>While it may seem counter to the point of this article, I recommend <strong>not</strong>
  138. serving legacy SSL/TLS ciphers like SSLv3 to try to help older browsers.
  139. These old protocols and ciphers are insecure and broken, and I feel it’s better
  140. to make it clear to the user they’re connecting to a website in cleartext than
  141. to offer a false sense of security by having the browser indicate a “secure
  142. connection” when it’s being done over an old, broken protocol.
  143. Also, while it may not be practical anymore, modern browsers might be
  144. <a href="//en.wikipedia.org/wiki/Downgrade_attack">tricked into negotiating</a>
  145. an old, broken cipher if your server still offers it.</p>
  146. <p>Even if you do offer legacy protocols and ciphers to older browsers, your TLS
  147. certificate might be signed by a certificate authority whose root certificate is
  148. not trusted by older browsers.</p>
  149. <h2 id="continue-upgrading-modern-browsers">Continue Upgrading Modern Browsers</h2>
  150. <p>Now that your entire website is being offered to legacy browsers over HTTP,
  151. modern browsers can still be directed to connect over HTTPS for added privacy by
  152. responding to the
  153. <a href="//developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Upgrade-Insecure-Requests"><code class="language-plaintext highlighter-rouge">Upgrade-Insecure-Requests</code></a>
  154. header.
  155. This header is only sent by modern browsers that support
  156. <a href="//developer.mozilla.org/en-US/docs/Web/HTTP/CSP">CSP</a>
  157. when making an HTTP request, so it’s a reasonable indicator that the client is
  158. sufficiently modern and robust that it will be able to negotiate a TLS 1.2
  159. connection if redirected to your site’s HTTPS version.</p>
  160. <p>For Nginx, this can be done inside a <code class="language-plaintext highlighter-rouge">server</code> block by defining a variable
  161. per-request that includes whether it was made over plaintext HTTP and whether it
  162. included an <code class="language-plaintext highlighter-rouge">Upgrade-Insecure-Requests: 1</code> header:</p>
  163. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>server {
  164. ...
  165. set $need_http_upgrade "$https$http_upgrade_insecure_requests";
  166. location / {
  167. if ($need_http_upgrade = "1") {
  168. add_header Vary Upgrade-Insecure-Requests;
  169. return 301 https://$host$request_uri;
  170. }
  171. ...
  172. }
  173. }
  174. </code></pre></div></div>
  175. <p>This <code class="language-plaintext highlighter-rouge">location</code> block will respond for any request and, for those made over
  176. plaintext HTTP where <code class="language-plaintext highlighter-rouge">$https</code> will be blank and which included an
  177. <code class="language-plaintext highlighter-rouge">Upgrade-Insecure-Requests: 1</code> header, they will be offered a 301 redirection to
  178. the HTTPS version.
  179. The <code class="language-plaintext highlighter-rouge">Vary</code> header is sent so that any caching proxies in the middle won’t cache
  180. the redirect.</p>
  181. <h2 id="content-concessions">Content Concessions</h2>
  182. <p>With legacy browsers now able to access your site, you may want to make some
  183. changes to your HTML and CSS to allow your site to render with some degree of
  184. readability.
  185. I don’t recommend giving it the full IE6 treatment catering to the lowest common
  186. denominator, but at least make the main text of your site readable.</p>
  187. <p>Obviously avoid JavaScript unless it is used progressively, though many older
  188. browsers raise error dialogs at the mere presence of modern JavaScript that
  189. can’t be parsed even if it’s never executed.</p>
  190. <p>Modern CSS and complex layouts can also be a problem even for browsers just a
  191. few years old, so it’s probably best to use them sparingly.
  192. For any <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code> or <code class="language-plaintext highlighter-rouge">&lt;img&gt;</code> tags that are local to your site, use relative links to
  193. avoid specifying a particular scheme.</p>
  194. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;a href="/posts/blah"&gt;
  195. &lt;img src="/images/..."&gt;
  196. &lt;/a&gt;
  197. </code></pre></div></div>
  198. <p>If you have to specify an absolute URL to another site that is also available
  199. over both HTTP and HTTPS, you can specify it without a scheme or colon and the
  200. browser will use the same <code class="language-plaintext highlighter-rouge">http:</code> or <code class="language-plaintext highlighter-rouge">https:</code> that the document is being viewed
  201. over:</p>
  202. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;a href="//other.example.com/"&gt;My other site&lt;/a&gt;
  203. </code></pre></div></div>
  204. <h2 id="a-rant-about-gemini">A Rant About Gemini</h2>
  205. <p>Tangentially related,
  206. <a href="//gemini.circumlunar.space/">Gemini</a>
  207. is a modern document transfer protocol that aims to fit between the ancient
  208. <a href="//en.wikipedia.org/wiki/Gopher_(protocol)">Gopher</a>
  209. protocol and the too-modern HTTP web.
  210. Its document markup language is based on
  211. <a href="//en.wikipedia.org/wiki/Markdown">Markdown</a>
  212. so it’s very lightweight and simple to parse without complex HTML/CSS parsers.</p>
  213. <p>It sounds like the perfect thing to bring modern content to vintage computers,
  214. except that its
  215. <a href="//gemini.circumlunar.space/docs/specification.html">protocol</a>
  216. requires all content to be transferred over TLS 1.2 or higher which makes it
  217. nearly impossible to access from a vintage computer or even a modern embedded
  218. system with limited CPU power.</p>
  219. <p>This requirement seems poorly thought out, especially considering the Gemini
  220. protocol doesn’t even support forms (other than a single text box on a search
  221. form) so there’s no chance of users submitting private data, and there’s no
  222. mechanism for client-server sessions so clients can’t be authenticated, meaning
  223. everything served pretty much has to be public anyway.</p>
  224. <p>Its protocol author argues that TLS is just a simple dependency no different
  225. than a TCP server module, so it should be trivial to implement in any client or
  226. server.
  227. But if your computer’s CPU is so slow that a modern TLS negotiation would take
  228. so long as to be unusable, or its
  229. <a href="http://tenfourfox.blogspot.com/2018/02/the-tls-apocalypse-reaches-power-macs.html">platform doesn’t have a TLS 1.2 library</a>
  230. available, that makes it difficult to write a client without depending on an
  231. <a href="//github.com/jcs/sockhole">external system</a>
  232. [<a href="https://oldvcr.blogspot.com/2020/11/fun-with-crypto-ancienne-tls-for.html">2</a>].</p>
  233. <p>In my opinion, the protocol should <em>recommend</em> that servers offer both plaintext
  234. and TLS encrypted versions and <em>recommend</em> that clients prefer TLS, but <em>may</em>
  235. use plaintext if needed.
  236. Clients for modern operating systems can continue enforcing a TLS requirement so
  237. their users aren’t feeling any less secure.</p>
  238. <p>Perhaps just sending actual Markdown text over plaintext HTTP to clients that
  239. ask for it can be the new, old web.</p>
  240. <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Accept: text/markdown,text/plain;q=0.9,*/*;q=0.1
  241. </code></pre></div></div>
  242. <hr />
  243. <p><em>Please don’t contact me to “well ackchyually” me and explain
  244. <a href="/2011/08/17/a_man-in-the-middle_attack_in_the_wild">MITM attacks</a>
  245. and how your terrible ISP inserts ads into your unencrypted web pages and how
  246. you were able to make a Gemini client out of a whistle and some shoelaces.
  247. If you don’t want to make your website content available to stupid old
  248. computers, then don’t.</em></p>
  249. </article>
  250. <hr>
  251. <footer>
  252. <p>
  253. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  254. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  255. </svg> Accueil</a> •
  256. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  257. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  258. </svg> RSS</a> •
  259. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  260. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  261. </svg> Pro</a> •
  262. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  263. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  264. </svg> Email</a> •
  265. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  266. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  267. </svg> Légal</abbr>
  268. </p>
  269. <template id="theme-selector">
  270. <form>
  271. <fieldset>
  272. <legend><svg class="icon icon-brightness-contrast">
  273. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  274. </svg> Thème</legend>
  275. <label>
  276. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  277. </label>
  278. <label>
  279. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  280. </label>
  281. <label>
  282. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  283. </label>
  284. </fieldset>
  285. </form>
  286. </template>
  287. </footer>
  288. <script>
  289. function loadThemeForm(templateName) {
  290. const themeSelectorTemplate = document.querySelector(templateName)
  291. const form = themeSelectorTemplate.content.firstElementChild
  292. themeSelectorTemplate.replaceWith(form)
  293. form.addEventListener('change', (e) => {
  294. const chosenColorScheme = e.target.value
  295. localStorage.setItem('theme', chosenColorScheme)
  296. toggleTheme(chosenColorScheme)
  297. })
  298. const selectedTheme = localStorage.getItem('theme')
  299. if (selectedTheme && selectedTheme !== 'undefined') {
  300. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  301. }
  302. }
  303. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  304. window.addEventListener('load', () => {
  305. let hasDarkRules = false
  306. for (const styleSheet of Array.from(document.styleSheets)) {
  307. let mediaRules = []
  308. for (const cssRule of styleSheet.cssRules) {
  309. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  310. continue
  311. }
  312. // WARNING: Safari does not have/supports `conditionText`.
  313. if (cssRule.conditionText) {
  314. if (cssRule.conditionText !== prefersColorSchemeDark) {
  315. continue
  316. }
  317. } else {
  318. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  319. continue
  320. }
  321. }
  322. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  323. }
  324. // WARNING: do not try to insert a Rule to a styleSheet you are
  325. // currently iterating on, otherwise the browser will be stuck
  326. // in a infinite loop…
  327. for (const mediaRule of mediaRules) {
  328. styleSheet.insertRule(mediaRule.cssText)
  329. hasDarkRules = true
  330. }
  331. }
  332. if (hasDarkRules) {
  333. loadThemeForm('#theme-selector')
  334. }
  335. })
  336. </script>
  337. </body>
  338. </html>