43 lines
4.5 KiB
HTML
43 lines
4.5 KiB
HTML
|
<section id="filtrage" data-transition="fade" style="background:#F6F7F0;color:#3E5550;font-family:'IBM Plex Sans', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:44px">
|
|||
|
|
<div style="display:flex;flex-direction:column;gap:16px">
|
|||
|
|
<p style="font-size:24px;letter-spacing:3px;text-transform:uppercase;color:#176754;font-weight:600">02 · Le réseau</p>
|
|||
|
|
<h2 style="font-family:'Source Serif 4', Georgia, serif;font-size:64px;font-weight:400;line-height:1.1;color:#152F2C">Un flux déclaré, trois pare-feu cohérents.</h2>
|
|||
|
|
</div>
|
|||
|
|
<div style="position:relative;width:1664px;height:420px">
|
|||
|
|
<div style="position:absolute;left:572px;top:0px;width:520px;height:88px;background:#102E28;border-radius:12px;display:flex;align-items:center;justify-content:center">
|
|||
|
|
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:26px;color:#B9EED2">roles/*/meta/flux.yml</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="position:absolute;left:0px;top:170px;width:300px;height:250px;background:#E8EFE5;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px">
|
|||
|
|
<h3 style="font-size:28px;font-weight:600;color:#152F2C">Internet</h3>
|
|||
|
|
<p style="font-size:24px;line-height:1.4">ce qui vient de l’extérieur</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="position:absolute;left:341px;top:170px;width:300px;height:250px;background:#FDFDFA;border:2px solid #176754;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px">
|
|||
|
|
<h3 style="font-size:28px;font-weight:600;color:#152F2C">Frontière OPNsense</h3>
|
|||
|
|
<p style="font-size:24px;line-height:1.4">nord-sud ; un refus se journalise</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="position:absolute;left:682px;top:170px;width:300px;height:250px;background:#E8EFE5;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px">
|
|||
|
|
<h3 style="font-size:28px;font-weight:600;color:#152F2C">SDN EVPN</h3>
|
|||
|
|
<p style="font-size:24px;line-height:1.4">une zone par écosystème, passerelles anycast</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="position:absolute;left:1023px;top:170px;width:300px;height:250px;background:#FDFDFA;border:2px solid #176754;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px">
|
|||
|
|
<h3 style="font-size:28px;font-weight:600;color:#152F2C">Pare-feu Proxmox</h3>
|
|||
|
|
<p style="font-size:24px;line-height:1.4">est-ouest, par VM, refus par défaut</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="position:absolute;left:1364px;top:170px;width:300px;height:250px;background:#FDFDFA;border:2px solid #176754;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px">
|
|||
|
|
<h3 style="font-size:28px;font-weight:600;color:#152F2C">nftables</h3>
|
|||
|
|
<p style="font-size:24px;line-height:1.4">sur chaque hôte, devant le service</p>
|
|||
|
|
</div>
|
|||
|
|
<x-connector x1="300" y1="295" x2="341" y2="295" head="end" style="color:#5F716B"></x-connector>
|
|||
|
|
<x-connector x1="641" y1="295" x2="682" y2="295" head="end" style="color:#5F716B"></x-connector>
|
|||
|
|
<x-connector x1="982" y1="295" x2="1023" y2="295" head="end" style="color:#5F716B"></x-connector>
|
|||
|
|
<x-connector x1="1323" y1="295" x2="1364" y2="295" head="end" style="color:#5F716B"></x-connector>
|
|||
|
|
<x-connector x1="760" y1="88" x2="491" y2="170" head="end" style="color:#176754;border-style:dashed"></x-connector>
|
|||
|
|
<x-connector x1="900" y1="88" x2="1173" y2="170" head="end" style="color:#176754;border-style:dashed"></x-connector>
|
|||
|
|
<x-connector x1="1000" y1="88" x2="1514" y2="170" head="end" style="color:#176754;border-style:dashed"></x-connector>
|
|||
|
|
</div>
|
|||
|
|
<p style="font-size:30px;line-height:1.4;color:#152F2C">Les trois cadres verts sortent du même fichier. Un flux <span style="color:#176754">pair: externe</span> devient la politique de bordure ; le registre des flux, généré, sert d’audit et dit le chiffrement de chacun.</p>
|
|||
|
|
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5F716B">Set-OPS · Rencontres Linux du Québec 2026</p>
|
|||
|
|
<p style="position:absolute;right:128px;bottom:64px;width:120px;text-align:right;font-size:24px;color:#5F716B">08</p>
|
|||
|
|
<aside>Le réseau, de l’Internet jusqu’au service. La frontière OPNsense tient la bordure nord-sud ; chaque écosystème a sa zone EVPN dans le SDN de Proxmox, avec des passerelles anycast ; le pare-feu de Proxmox filtre l’est-ouest, VM par VM, avec un refus par défaut ; et nftables protège chaque hôte. Les trois pare-feu — en vert — ne sont pas écrits à la main : ils sont dérivés des flux que les rôles déclarent. Un flux dont le pair est « externe » devient une règle de la frontière, posée par son API. Et le registre des flux est généré : c’est la matrice d’audit, qui dit pour chaque flux s’il est chiffré.</aside>
|
|||
|
|
</section>
|