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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834
  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>Ce qu'il se passe quand on envoie un mail (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://lord.re/posts/104-ce-quil-se-passe-quand-on-envoi-un-mail/">
  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. Ce qu'il se passe quand on envoie un mail (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://lord.re/posts/104-ce-quil-se-passe-quand-on-envoi-un-mail/">Source originale du contenu</a></h3>
  445. <p>On m’a soufflotté dans l’oreille que ce sujet pourrait être intéressant.
  446. Et effectivement ça l’est.
  447. Enfin… si on s’y intéresse…
  448. Bref…</p>
  449. <p>Quelles sont les étapes qui se passent, par où va transiter les données.
  450. Voyons tout ça.</p>
  451. <p>Pour l’exemple, je vais aborder le cas suivant :</p>
  452. <p><strong>Un mail envoyé depuis un client mail type thunderbird via mon serveur auto-hébergé vers un utilisateur gmail.</strong></p>
  453. <h2 id="1-rédaction-du-mail">1 - Rédaction du mail</h2>
  454. <p>La partie la plus normale consiste donc à rédiger le texte de votre email.
  455. Il s’agit des données à proprement parlé.</p>
  456. <p>C’est un <em>simple texte</em> ce qu’il y a de plus basique ou bien du <em>texte au format HTML</em>.
  457. Dès lors que vous ajoutez du formattage à votre texte (du gras/italique/couleur/taille de police/…) c’est du HTML.
  458. De lui même, l’éditeur de texte va donc transformer votre texte vers le format HTML pour apporter toutes ces subtilités.
  459. Votre destinataire va donc de voir “interprêter” ce texte HTML pour l’afficher avec parfois des résultats différents selon le logiciel.</p>
  460. <p>Au passage, lorsqu’on rédige un mail en HTML contenant des images, celles-ci ne sont pas incluent à proprement parlé il ne s’agit que de liens.
  461. Votre lecteur de mail va suivre ces liens pour au moment de la lecture pour vous afficher les images..
  462. C’est un moyen de voir si les mails sont consultés ou non et d’éventuellement vous profiler (en envoyant une adresse unique à chaque mail).
  463. <em>Il est donc préferrable de désactiver l’affichage automatique des images dans les mails.</em></p>
  464. <h2 id="2-ajout-des-pièces-jointes">2 - Ajout des pièces jointes</h2>
  465. <p>Étape que l’on réalise généralement lors d’un second mail de type “Oups voilà les pièces-jointes oubliées précédemment”.</p>
  466. <p><strong>Le mail est un protocole de type texte.</strong>
  467. Cela veux dire que toutes les informations transportées le sont sous forme de texte, aussi bien les métadonnées que les données.
  468. Il faut donc transformer votre fichier en texte avec le <a href="https://fr.wikipedia.org/wiki/Base64">codage base64</a> qui consiste en 64 caractères alphabetiques permettant de coder n’importe quelles données.</p>
  469. <p>Cependant, c’est loin d’être optimisé :</p>
  470. <pre><code>cat 99-ce-quil-se-passe-quand-on-ouvre-une-page-web.md| base64 | wc -c
  471. 23939
  472. cat 99-ce-quil-se-passe-quand-on-ouvre-une-page-web.md| wc -c
  473. 17720
  474. </code></pre>
  475. <p><em>Un même fichier une fois passé en base64 est près d’un tier plus lourd que l’original.</em>
  476. Cela explique pourquoi certaines fois des fichiers juste en dessous de la limite de taille maximale ne passent pas.</p>
  477. <h2 id="3-ajout-des-méta-données-utilisateurs">3 - Ajout des méta-données utilisateurs</h2>
  478. <p>Bon votre mail contient votre texte et d’éventuelles pièces-jointes, c’est chouette mais ça va pas aller bien loin.
  479. Il faut donc un destinataire, voir plusieurs destinataires cachés ou non.
  480. Vous allez aussi mettre un sujet à votre mail.
  481. Et dans certains cas indiquer quelle est l’adresse d’envoi (si vous en avez plusieurs) et/ou de retour.</p>
  482. <p><em>Ce sont les méta-données que vous entrez manuellement.</em></p>
  483. <p>Mais ce ne sont qu’une partie des méta-données du mail puisque votre logiciel va en rajouter ainsi que les différents serveurs qui traiteront votre mail.</p>
  484. <h2 id="4-connexion-vers-le-serveur-d-émission">4 - Connexion vers le serveur d’émission</h2>
  485. <p>Bon bha ça y est vous avez cliqué sur le bouton d’envoi et du coup votre logiciel va commencer à parler à une autre machine !</p>
  486. <p>Votre client mail est appelé un <strong>MUA</strong> pour <em>Mail User Agent</em> dont le boulot est de converser avec un <strong>MTA</strong> pour <em>Mail Transfert Agent</em> qui lui est chargé de réellement envoyer/recevoir des mails.
  487. Votre client mail donne tout simplement le mail fraîchement préparé au serveur SMTP qui lui a été configuré, en parlant le protocole <strong>SMTP</strong> (certains logiciels apellent ça serveur d’envoi).</p>
  488. <p>Le protocole SMTP est également un protocole texte assez ancien (plus ancien que le web) mais a connu quelques évolutions comme notamment l’authentification et le chiffrement).
  489. Historiquement le port utilisé était le 25 mais c’est généralement le port 587 qui est désormais utilisé dans le cas d’envoi de mail.
  490. <em>À l’usage il s’est créé une distinction entre l’envoi de mail et la réception.</em></p>
  491. <p>Un serveur de mail n’avait pas de notion d’envoi de mail mais juste de transfert, en gros il reçoit un mail sur le port 25 sans savoir si ce mail provient d’un autre serveur de mail ou s’il provient d’un logiciel d’envoi de mail.
  492. Avec le temps on a rajouté de l’authentification pour l’envoi de mail ce qui nécessite un traitement différent et donc un port différent.</p>
  493. <p>À noter que certains FAI bloquent les connexions vers le port 25 aussi bien dans un sens que dans l’autre, à des fins de luttes contre le spam.
  494. Ce blocage est dans le meilleur des cas débrayable et parfois non, ce qui vous empêche d’utiliser un serveur mail autre que celui de votre FAI.</p>
  495. <p>Dans notre exemple, thunderbird se connecte donc à notre serveur de mail auto-hébergé (dans mon salon, donc sans requête DNS).</p>
  496. <h3 id="4-1-connexion-tcp-vers-le-serveur-d-émission">4.1 - Connexion TCP vers le serveur d’émission</h3>
  497. <p>Mon serveur est configuré de sorte qu’un mail émis depuis une de mes adresses perso ne peut se faire que s’il y a authentification.
  498. Il faut donc se connecter au port dit de <em>soumission</em> (puisque on y soumet notre mail) c’est à dire le port TCP 587.</p>
  499. <p>Pour l’instant c’est donc dans mon réseau local.
  500. Je ne part pas tout de suite sur le réseau des réseaux.
  501. Il s’agit d’une connexion TCP classique en trois parties : <em>“Connexion ?”</em>, <em>“Ok tu peux te connecter.”</em>, <em>“Merci, on est connectés.”</em>.</p>
  502. <h3 id="4-2-chiffrement-de-la-connexion">4.2 - Chiffrement de la connexion</h3>
  503. <p>Même s’il s’agit d’une connexion sur mon réseau locale, vu qu’il y aura authentification, je préferre chiffrer la connexion.
  504. Déjà parceque ça ne mange pas de pain et ensuite ça permet d’avoir la même chose aussi bien en local qu’en distant via un réseau non sûr.</p>
  505. <p><strong>D’ailleurs de manière globale, ne considérez aucun réseau comme sûr, une machine vérolée volontairement ou non est si vite arrivée…</strong></p>
  506. <h3 id="4-3-auth">4.3 - Auth</h3>
  507. <p>Bon la connexion est désormais sûre, il ne reste plus qu’à Thunderbird de vous identifier via les identifiants/mot de passe configurés.
  508. Cette étape permet au serveur d’émission de n’accepter des mails en votre nom que si les identifiants sont bons pour éviter l’envoi de spam dans votre dos.</p>
  509. <p>Si l’une des deux étapes précédentes échoue, votre serveur vous enverra probablement bouler sans ménagement et coupera la connexion TCP ce qui vous gratifiera d’un joli message d’erreur dans votre Thunderbird.</p>
  510. <h2 id="5-vérifs-de-base-antispam-avant-émission">5 - Vérifs de base antispam avant émission</h2>
  511. <p>Internet c’est la jungle et je pense que vous connaissez tous à peu près l’ampleur du spam.
  512. Bref tout le monde tente de s’en protéger le plus possible.
  513. Ne pas recevoir de spam c’est bien, ne pas en envoyer soi même c’est mieux !
  514. Si votre serveur a la malheur d’en envoyer vous serez très vite blacklisté de partout il vous faut donc vous protéger pour ne pas finir en tant qu’<em>Open relay</em>.</p>
  515. <p>Bon déjà on s’est authentifié, c’est le minimum syndical.</p>
  516. <p>Ensuite il existe tout plein de petits réglages sur le serveur afin de limiter les possibles fuites.
  517. Ce sont principalement des ptites restrictions sur les adresses IP autorisées à se connecter ou bien quels domaines sont autorisés à envoyer du mail…
  518. Bref rien de bien méchant, c’est du vite vu par le serveur.</p>
  519. <p>Il est même possible de faire passer le mail sortant dans un antispam mais je ne l’ai pas mis en place personnelement mais sachez que c’est possible afin de vraiment s’assurer que ses utilisateurs n’envoient pas de spam.
  520. Sur une installation conséquente c’est quasiment indispensable pour ne pas transmettre du spam à la première machine vérolée.</p>
  521. <p>Dans un second temps, le mail va être signé par le serveur d’émission en fonction du domaine d’émission du mail : il s’agit du <strong>DKIM</strong> le <em>Domain Key Identified Mail</em>.
  522. C’est une signature qui atteste que le mail provient bien du serveur de mail autorisé par mon nom de domaine (dans mon serveur DNS, j’ai annoncé que les mails provenant de mon domaine sont signés par telle clé).
  523. Contrairement à GPG, cette signature vaut pour tous les mails du domaine, ils ne chiffrent pas le message et ne garantissent pas de l’identité de l’émetteur mais l’identité du nom de domaine d’émission.
  524. Toutes les personnes utilisant le même nom de domaine pour émettre leur mail auront la même signature.
  525. Cette signature sera placé dans l’entête du mail et sera utilisé par les serveurs intermédiaires et finaux afin de vérifier que votre mail soit bien légitime.
  526. Elle ne sert pas directement aux utilisateurs et n’est donc que rarement montrée.
  527. <strong>Cette signature atteste uniquement de l’authenticité du serveur d’émission.</strong>
  528. Elle ne prouve rien concernant l’utilisateur lui même, uniquement le serveur !</p>
  529. <p>Si tout se passe comme il faut, votre mail est donc consideré comme légitime par votre serveur de mail et est donc signé.
  530. Votre serveur de mail va donc transferer ce mail au serveur du destinataire</p>
  531. <h2 id="6-trouver-le-serveur-de-destination">6 - Trouver le serveur de destination</h2>
  532. <p>Bon, votre mail est donc prêt à partir, mais à partir où ?
  533. Votre serveur de mail va donc trouver quelle machine gère les mails de votre destinataire et qui qui c’est qui doit faire ça ?
  534. C’est <em>le DNS</em> !</p>
  535. <p>Bon truc@gmail.com ça veux dire l’utilisateur truc sur le domaine gmail.com, ça devrait être plutôt simple pour le moment.
  536. Du coup votre serveur de mail va demander aux serveurs DNS “À quelle machine je dois me connecter pour envoyer des mails pour gmail.com ?” ce qui correspond à <em>“Quels sont les enregistrements MX pour gmail.com ?”</em></p>
  537. <p>Les <strong>MX records</strong> sont donc les machines en chargent de la réception du mail : un ptit <strong>dig gmail.com in MX</strong></p>
  538. <pre><code>; &lt;&lt;&gt;&gt; DiG 9.12.1 &lt;&lt;&gt;&gt; gmail.com in MX
  539. ;; global options: +cmd
  540. ;; Got answer:
  541. ;; -&gt;&gt;HEADER&lt;&lt;- opcode: QUERY, status: NOERROR, id: 48789
  542. ;; flags: qr rd ra; QUERY: 1, ANSWER: 5, AUTHORITY: 0, ADDITIONAL: 1
  543. ;; OPT PSEUDOSECTION:
  544. ; EDNS: version: 0, flags:; udp: 4096
  545. ;; QUESTION SECTION:
  546. ;gmail.com. IN MX
  547. ;; ANSWER SECTION:
  548. gmail.com. 3581 IN MX 5 gmail-smtp-in.l.google.com.
  549. gmail.com. 3581 IN MX 10 alt1.gmail-smtp-in.l.google.com.
  550. gmail.com. 3581 IN MX 20 alt2.gmail-smtp-in.l.google.com.
  551. gmail.com. 3581 IN MX 30 alt3.gmail-smtp-in.l.google.com.
  552. gmail.com. 3581 IN MX 40 alt4.gmail-smtp-in.l.google.com.
  553. ;; Query time: 0 msec
  554. ;; SERVER: 10.0.0.254#53(10.0.0.254)
  555. ;; WHEN: Wed May 23 15:48:51 CEST 2018
  556. ;; MSG SIZE rcvd: 161
  557. </code></pre>
  558. <p>Donc là on voit que pour gmail il y a cinq réponses indiquant donc 5 machines à contacter par ordre de priorité du plus petit au plus grand.
  559. Je vais donc devoir tenter de me connecter à <em>gmail-smtp-in.l.google.com.</em> et si cette machine ne répond pas je passe à <em>alt1.gmail-smtp-in.l.google.com.</em> et ainsi de suite.
  560. C’est un système qui permet d’avoir plusieurs machines redondantes assez facilement (si seulement un même mécanisme était utilisé pour d’autres protocoles comme le HTTP…).</p>
  561. <p>Bon c’est bien gentil mais c’est une demi réponse ça, il me faut une adresse IP, il faut donc faire une requête DNS pour connaitre l’adresse IP de <em>gmail-smtp-in-l.google.com.</em>, ce qui va me donner <em>74.125.133.27</em>.</p>
  562. <p>Si jamais le domaine à qui vous tentez d’envoyer un mail ne possède pas de MX record, votre serveur tentera de se connecter directement à l’adresse IP rattaché au domaine directement.
  563. Mais bon il faut vraiment être un très mauvais administrateur pour ne pas mettre de MX record à un serveur de mail.</p>
  564. <p>Comme d’habitude on peut voir que le DNS est toujours un point sensible pour la confidentialité et que le choix d’un résolveur DNS peut avoir d’importantes conséquences pour le respect de la vie privée.</p>
  565. <h2 id="7-interconnexion-des-serveurs-émission-réception">7 - Interconnexion des serveurs émission/réception</h2>
  566. <p>Allez hop, votre serveur d’émission va se connecter donc au serveur de réception pour transmettre votre mail.
  567. Une connexion <strong>TCP</strong> va être établie et parfois ça sera chiffré, parfois non.
  568. Globalement le chiffrement progresse énormément ces dernières années au point d’être quasi systématique.</p>
  569. <p>Il va quand même falloir montrer patte blanche pour prouver que vous n’êtes pas un vil spammeur.</p>
  570. <p>La base de la base c’est de <em>parler le protocole SMTP correctement</em>.
  571. Certains spammeurs utilisent des logiciels pas très très respectueux du standard et se font repérer et dégager facilement.</p>
  572. <p>Votre serveur va donc transferer votre mail donc avec ses méta-données et les données.
  573. Et ensuite bha le serveur de réception fait un peu ce qu’il veut.</p>
  574. <h3 id="7-1-greylisting">7.1 Greylisting</h3>
  575. <p>Une méthode très efficace de virer du spam est de faire du greylisting.
  576. <em>Le serveur de réception va dire “Je suis pas dispo réessaye plus tard”.</em>
  577. Et cinq minutes plus tard votre serveur d’émission va retenter et ça marchera.</p>
  578. <p>La plupart des spammeurs se découragent facilement (ça leur permet de ne pas perdre de temps à retenter…) mais les mails légitimes, eux, retenteront.
  579. Cela engendre par contre un délai de quelques minutes dans la réception des mails mais rapelez-vous : <strong>Les mails ne garantissent absolument pas de délai de livraison !</strong>
  580. Avec un peu de chance ça sera dans quelques secondes mais rien dans le protocole n’empêche de le livrer quelques jours plus tard sans aucun message d’erreur ou autre.</p>
  581. <p>Il me semble que cette technique n’est pas employée par Gmail mais assez courante chez les auto-hébergeurs du fait de son efficacité redoutable.</p>
  582. <h3 id="7-2-différentes-vérifications">7.2 Différentes vérifications</h3>
  583. <p>Chaque serveurs possède des règles différentes pour l’acceptation des mails.</p>
  584. <p>Certains ne font que le strict minimum (c’est à dire vérifier que le destinataire existe bien), d’autres imposent des tailles maximales pour les mails, d’autres utilisent des systèmes de réputation…
  585. Chacun fait sa tambouille.</p>
  586. <p>Dans les grands classiques on trouve la consultation de listes noires publiques via le DNS, ce que l’on apelle les <strong>DNSBL</strong>.
  587. On y vérifie que votre serveur d’envoi n’est pas présent dans cette blacklist.
  588. C’est donc potentiellement encore un endroit potentiel de fuite d’information : votre mail n’est pas envoyé aux fournisseurs de DNSBL, juste votre nom de domaine ainsi que l’ip du serveur de réception.
  589. Le risque est minime cela-dit.</p>
  590. <p>Vous obtiendrez parfois un mail de réponse de la part de <em>Mailer Daemon</em> vous indiquant pourquoi (ou pas) votre mail à été rejeté et ce mail peut prendre jusqu’à une semaine pour arriver…</p>
  591. <h2 id="8-fin-de-l-émission">8 - Fin de l’émission</h2>
  592. <p>Bon bha ça y est votre serveur d’émission a fini son boulot et donc maintenant le destin de votre mail n’est plus entre ses mains.
  593. Votre serveur peut couper la connexion et se rendormir paisiblement.</p>
  594. <p>Voyons donc ce que fait le serveur de réception désormais.</p>
  595. <h2 id="9-antispam">9 - Antispam</h2>
  596. <h3 id="9-1-spf">9.1 SPF</h3>
  597. <p>Le serveur de réception va faire la vérification du <strong>SPF</strong> qui permet de <em>s’assurer que le serveur qui a émit le mail est bien autoriser à émettre des mails</em>.
  598. Pour cela, le serveur de réception va faire une requête DNS particulière qui lui donnera la liste des serveurs autorisés à émettre des mails pour votre domaine.
  599. Si le serveur d’émission ne fait pas parti de cette liste, votre mail sera rejeté pour soupçons de spam.
  600. Encore une fois, le DNS va être utilisé.</p>
  601. <p>Il y a encore un potentiel de fuite d’information : le serveur de mail réceptionnant votre mail enverra une requête à son serveur DNS lui indiquant de vérifier quels sont les machines autorisées à envoyer du mail pour tel domaine.
  602. Le serveur DNS peut donc deviner que votre domaine à envoyer un mail à tel autre domaine.</p>
  603. <h3 id="9-2-dkim">9.2 DKIM</h3>
  604. <p>Tout à l’heure, votre serveur a ajouté une <strong>signature DKIM</strong> sur votre mail et maintenant le serveur de réception va la vérifier.
  605. Ça permet de s’assurer que le mail reçu provient bien de votre serveur de mail.
  606. <em>Donc le serveur de réception regarde le mail, et vérifie que la signature correspond bien à ce qui se trouve dans l’enregistrement DNS du DKIM.</em>
  607. Seul votre serveur peut créer une signature valable pour votre domaine.</p>
  608. <p>En gros SPF assure que le serveur a le droit d’envoyer des mails et DKIM prouve que le mail provient bien du domaine.
  609. C’est deux technique complémentaires permettant de limiter l’envoi de spam en votre nom.</p>
  610. <p>Si en 2018 vous n’avez pas de SPF et de DKIM fonctionnel, vos mails finiront quasi-systèmatiquement dans les spams, à juste titre.
  611. Là encore le DNS joue un grand rôle et se trouve être une potentielle fuite de données.</p>
  612. <h3 id="9-3-antispam-bayésien">9.3 Antispam Bayésien</h3>
  613. <p>Encore un peu d’antispam mais ce coup-ci ça se base non plus sur le serveur d’émission mais sur les méta-données et les données du mail lui-même.</p>
  614. <p>Là <em>le mail va être analysé selon pleins de critères variés.</em></p>
  615. <ul>
  616. <li>Est-ce que la date d’émission est crédible ?</li>
  617. <li>Est-ce que ça parle pas un peu trop de pognon ?</li>
  618. <li>Est-ce que ça utilise des caractères louches ?</li>
  619. <li>Est-ce que les entêtes correspondent bien ?</li>
  620. <li>…</li>
  621. </ul>
  622. <p>C’est aussi bien des points techniques que des points plus “humains”.
  623. À chaque réponse on obtient <strong>un score</strong> positif ou négatif, à la fin on fait le compte et le résultat final détermine si c’est un spam ou non.</p>
  624. <p>En fonction de ce score le mail sera soit supprimmé, soit placé dans les spams, soit aura le droit d’arriver dans la boîte du destinataire.</p>
  625. <p>Ici le logiciel antispam a accès au mail complet.
  626. Cela pourrai poser un soucis de confidentialité cependant ce filtre n’est pas sous-traité à ma connaissance.</p>
  627. <h2 id="10-livraison-locale">10 - Livraison locale</h2>
  628. <p>Le serveur du destinataire a donc accepté le mail et effectué tous ses tests d’antispam, il faut donc maintenant transférer le mail au <strong>LDA</strong>, le <em>local delivery agent</em>.
  629. Ce logiciel a pour but de ranger et stocker le mail.</p>
  630. <p>Son rôle premier est donc de <em>trouver à qui le mail doit être livré</em> (il peut y avoir des alias ou des redirections par exemple).</p>
  631. <p>Son second rôle ensuite est de <em>ranger le mail au bon endroit</em> en fonction de règles définies par le service mais qui peuvent également être écrites par l’utilisateur.
  632. Par exemple le mail va être classé dans les newsletters ou bien vous avez créez une règle pour indiquer que tous les mails en provenance de tel utilisateur doivent être placés dans un dossier prédifini.</p>
  633. <p>Mais n’oublions pas que le mail est à destination de Google.
  634. Il est donc fort probable qu’en interne l’architecture de Gmail soit très complexe et ne soit pas un seul petit serveur mais bien une armada complète pour le stockage (redondant et backuppé) avec répartition de la charge pour pouvoir supporter des millions d’utilisateurs mais cette partie est trop complexe pour cet article.</p>
  635. <p>Bon il y a tout de même une étape cruciale encore.</p>
  636. <h2 id="11-indexation">11 - Indexation</h2>
  637. <p>Le but de Google est, comme tout le monde sait, d’aider à chercher dans vos mails.
  638. Non pas vous aider vous, mais aider les clients de Google.
  639. <em>En tant que marchandise vos mails sont donc lus et analysés et un profil est établi en fonction de tous vos mails.</em>
  640. Vous êtes donc placé dans différentes cases en fonction de votre courrier.</p>
  641. <p>Vous êtes inscrits sur tel site, vous prenez des vacances à tel endroit, vous conversez avec telle personne, vous vous êtes abonnez à tel newsletter, vous supprimmez systèmatiquement les mails de telle origine, vous effectuez régulièrement des achats sur tel site…</p>
  642. <p>En bonus toutes ces informations permettent à gmail de vous afficher rapidement les résultats de recherche dans votre montagne de mail.</p>
  643. <p>Bref ce service coûte très cher mais par chance est très facilement rentabilisé par Google.</p>
  644. <h2 id="12-consultation">12 - Consultation</h2>
  645. <p>Bon bha maintenant votre destinataire va vouloir lire votre mail, Gmail étant un webmail avant tout, votre utilisateur va devoir ouvrir la page avec son navigateur web et se tapper <a href="https://lord.re/posts/99-ce-quil-se-passe-quand-on-ouvre-une-page-web/">toutes les étapes classiques</a>.
  646. Le webmail a le rôle de <strong>MUA</strong> ici.</p>
  647. <p>Et voilà !
  648. On y est arrivé.</p>
  649. <h2 id="tl-dr">TL;DR</h2>
  650. <p>Chemin d’un mail : <strong>MUA</strong>→<strong>MTA</strong>→<strong>MTA</strong>→<strong>LDA</strong>→<strong>MUA</strong>
  651. Avec dans quelques cas des risques de fuites de données de votre mail (surtout du côté des DNS et des MTA).</p>
  652. <p>Si vous vous autohébergez, vous pouvez à peu près garantir les deux premières étapes pour la confidentialité de votre mail tout au mieux.
  653. Si vous ne vous auto-hébergez pas vous ne pouvez garantir que la première étape au delà … bha … bonne chance.
  654. Si vous voulez mieux, il va falloir chifrer votre mail ;-)</p>
  655. </article>
  656. </section>
  657. <nav id="jumpto">
  658. <p>
  659. <a href="/david/blog/">Accueil du blog</a> |
  660. <a href="https://lord.re/posts/104-ce-quil-se-passe-quand-on-envoi-un-mail/">Source originale</a> |
  661. <a href="/david/stream/2019/">Accueil du flux</a>
  662. </p>
  663. </nav>
  664. <footer>
  665. <div>
  666. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  667. <p>
  668. Bonjour/Hi!
  669. 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>
  670. 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>).
  671. </p>
  672. <p>
  673. 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>.
  674. </p>
  675. <p>
  676. Voici quelques articles choisis :
  677. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  678. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  679. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  680. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  681. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  682. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  683. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  684. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  685. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  686. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  687. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  688. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  689. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  690. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  691. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  692. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  693. </p>
  694. <p>
  695. 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>.
  696. </p>
  697. <p>
  698. Je ne traque pas ta navigation mais mon
  699. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  700. conserve des logs d’accès.
  701. </p>
  702. </div>
  703. </footer>
  704. <script type="text/javascript">
  705. ;(_ => {
  706. const jumper = document.getElementById('jumper')
  707. jumper.addEventListener('click', e => {
  708. e.preventDefault()
  709. const anchor = e.target.getAttribute('href')
  710. const targetEl = document.getElementById(anchor.substring(1))
  711. targetEl.scrollIntoView({behavior: 'smooth'})
  712. })
  713. })()
  714. </script>