Skip to content

Commit 6e4f6a0

Browse files
piotr-borpiotr-bor
committed
Feat: Update NIS2 blog table styling and author signature
1 parent fd9bb19 commit 6e4f6a0

3 files changed

Lines changed: 115 additions & 25 deletions

File tree

‎src/components/MfaDiagram.astro‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,49 @@
55
<div class="column">
66
<h3>Before: Password-Only Access</h3>
77
<div class="step">
8-
<div class="icon"><i class="fa-solid fa-user"></i></div>
8+
<div class="icon"><i class="lni lni-user"></i></div>
99
<div class="label">User</div>
1010
</div>
11-
<div class="arrow"><i class="fa-solid fa-arrow-down"></i></div>
11+
<div class="arrow"><i class="lni lni-arrow-down"></i></div>
1212
<div class="step">
13-
<div class="icon"><i class="fa-solid fa-key"></i></div>
13+
<div class="icon"><i class="lni lni-lock-alt"></i></div>
1414
<div class="label">Password</div>
1515
</div>
16-
<div class="arrow"><i class="fa-solid fa-arrow-down"></i></div>
16+
<div class="arrow"><i class="lni lni-arrow-down"></i></div>
1717
<div class="step">
18-
<div class="icon icon-insecure"><i class="fa-solid fa-shield-halved"></i></div>
18+
<div class="icon icon-insecure"><i class="lni lni-warning"></i></div>
1919
<div class="label">Vulnerable Point</div>
2020
</div>
21-
<div class="arrow"><i class="fa-solid fa-arrow-down"></i></div>
21+
<div class="arrow"><i class="lni lni-arrow-down"></i></div>
2222
<div class="step">
23-
<div class="icon"><i class="fa-solid fa-server"></i></div>
23+
<div class="icon"><i class="lni lni-database"></i></div>
2424
<div class="label">Corporate Network</div>
2525
</div>
2626
</div>
2727
<div class="column">
2828
<h3>After: MFA-Secured Access</h3>
2929
<div class="step">
30-
<div class="icon"><i class="fa-solid fa-user"></i></div>
30+
<div class="icon"><i class="lni lni-user"></i></div>
3131
<div class="label">User</div>
3232
</div>
33-
<div class="arrow"><i class="fa-solid fa-arrow-down"></i></div>
33+
<div class="arrow"><i class="lni lni-arrow-down"></i></div>
3434
<div class="step">
35-
<div class="icon"><i class="fa-solid fa-key"></i></div>
35+
<div class="icon"><i class="lni lni-lock-alt"></i></div>
3636
<div class="label">Password</div>
3737
</div>
38-
<div class="arrow"><i class="fa-solid fa-arrow-down"></i></div>
38+
<div class="arrow"><i class="lni lni-arrow-down"></i></div>
3939
<div class="step">
40-
<div class="icon"><i class="fa-solid fa-mobile-screen-button"></i></div>
40+
<div class="icon"><i class="lni lni-mobile"></i></div>
4141
<div class="label">MFA Verification</div>
4242
</div>
43-
<div class="arrow"><i class="fa-solid fa-arrow-down"></i></div>
43+
<div class="arrow"><i class="lni lni-arrow-down"></i></div>
4444
<div class="step">
45-
<div class="icon icon-secure"><i class="fa-solid fa-shield"></i></div>
45+
<div class="icon icon-secure"><i class="lni lni-checkmark-circle"></i></div>
4646
<div class="label">Security Layer</div>
4747
</div>
48-
<div class="arrow"><i class="fa-solid fa-arrow-down"></i></div>
48+
<div class="arrow"><i class="lni lni-arrow-down"></i></div>
4949
<div class="step">
50-
<div class="icon"><i class="fa-solid fa-server"></i></div>
50+
<div class="icon"><i class="lni lni-database"></i></div>
5151
<div class="label">Corporate Network</div>
5252
</div>
5353
</div>

‎src/content/blog/mfa-wireguard-nis2-compliance.mdx‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ title: "MFA for WireGuard: How to Meet NIS2 Directive Requirements"
33
publishDate: 2025-10-07
44
description: "The NIS2 Directive mandates MFA for VPNs. Learn how to implement Multi-Factor Authentication on WireGuard with Defguard to ensure compliance and top-tier security."
55
author: "Piotr Borkowicz"
6-
image: "/images/blog/mfa-nis2-hero.jpg"
6+
image: "/images/blog/Defguard-nis2-mfa/mfa-nis2-hero.jpg"
77
---
88

9+
import MfaDiagram from '../../components/MfaDiagram.astro';
910

10-
![A central server connected securely to several computer terminals, representing a secure VPN network with MFA for NIS2 compliance.](/images/blog/mfa-nis2-hero.jpg)
11+
![A central server connected securely to several computer terminals, representing a secure VPN network with MFA for NIS2 compliance.](/images/blog/Defguard-nis2-mfa/mfa-nis2-hero.jpg)
1112

1213
Organizations seeking compliance with the NIS2 Directive can leverage Multi-Factor Authentication (MFA), not just as a regulatory checkbox but as a crucial layer of defense in their cybersecurity strategy. In this article, we’ll explore how MFA supports NIS2 compliance, the advantages of implementing MFA in modern Virtual Private Network (VPN) systems like **[WireGuard](https://www.wireguard.com/)**, and how open-source VPN management solutions like **[Defguard](https://defguard.net/)** facilitate MFA integration in WireGuard environments—while also providing functionalities like identity management, Single Sign-On (SSO), and hardware key management.
1314

@@ -32,6 +33,7 @@ Many organizations use VPNs (Virtual Private Networks) to allow employees remote
3233

3334
As part of the NIS2 Directive, companies relying on VPN infrastructure to manage access to their network will be required to adopt MFA for VPN authentication. This ensures that even if VPN credentials are compromised, unauthorized access will still be difficult to achieve without additional factors, such as a biometric scan or a one-time passcode (OTP).
3435

36+
<MfaDiagram />
3537

3638
## WireGuard: The Modern VPN That Needs MFA Support
3739

@@ -64,7 +66,7 @@ Another vital feature of Defguard is its ability to manage hardware keys like Yu
6466

6567
Defguard is designed to enhance WireGuard by adding an MFA layer and offering additional capabilities like identity management, SSO, and hardware key management, helping organizations meet NIS2 compliance.
6668

67-
![Screenshot of the Defguard interface showing options for enforcing Multi-Factor Authentication (MFA), with the "External MFA" option selected.](/images/blog/MFA-Defguard.png)
69+
![Screenshot of the Defguard interface showing options for enforcing Multi-Factor Authentication (MFA), with the "External MFA" option selected.](/images/blog/Defguard-nis2-mfa/MFA-Defguard.png)
6870

6971
### How Does Defguard Support MFA for WireGuard?
7072

@@ -87,12 +89,44 @@ Not all MFA systems are created equal. Organizations can choose from a range of
8789

8890
### Comparison of MFA Systems:
8991

90-
| MFA Method | Security Level | User Convenience | Example |
91-
| :--- | :--- | :--- | :--- |
92-
| One-Time Passwords (OTP) | High | Medium | Google Authenticator, Authy |
93-
| Push Notifications | High | High | Defguard Mobile App |
94-
| Biometrics | Very High | High | Fingerprint, Face ID |
95-
| Hardware Keys (FIDO2) | Highest | Medium | YubiKey, Thetis |
92+
<div class="table-container" style="width: 100%; overflow-x: auto; margin: 2rem auto; max-width: 80ch;">
93+
<table class="comparison-table" style="width: 100%; border-collapse: collapse; font-size: 0.95rem; table-layout: fixed; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: transparent;">
94+
<thead>
95+
<tr>
96+
<th style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; background: transparent; border-bottom: 1px solid #e0e0e0; color: var(--text-body-primary);">MFA Method</th>
97+
<th style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; background: transparent; border-bottom: 1px solid #e0e0e0; color: var(--text-body-primary);">Security Level</th>
98+
<th style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; background: transparent; border-bottom: 1px solid #e0e0e0; color: var(--text-body-primary);">User Convenience</th>
99+
<th style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; background: transparent; border-bottom: 1px solid #e0e0e0; color: var(--text-body-primary);">Example</th>
100+
</tr>
101+
</thead>
102+
<tbody>
103+
<tr style="background: transparent;">
104+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; width: 20%; color: var(--text-body-primary);">One-Time Passwords (OTP)</td>
105+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">High</td>
106+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">Medium</td>
107+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">Google Authenticator, Authy</td>
108+
</tr>
109+
<tr style="background: transparent;">
110+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; width: 20%; color: var(--text-body-primary);">Push Notifications</td>
111+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">High</td>
112+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">High</td>
113+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">Defguard Mobile App</td>
114+
</tr>
115+
<tr style="background: transparent;">
116+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; width: 20%; color: var(--text-body-primary);">Biometrics</td>
117+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">Very High</td>
118+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">High</td>
119+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">Fingerprint, Face ID</td>
120+
</tr>
121+
<tr style="background: transparent;">
122+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; font-weight: 600; width: 20%; color: var(--text-body-primary);">Hardware Keys (FIDO2)</td>
123+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">Highest</td>
124+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">Medium</td>
125+
<td style="text-align: left; padding: 16px 12px; border: 1px solid #e0e0e0; vertical-align: top; width: 26.67%; color: var(--text-body-primary);">YubiKey, Thetis</td>
126+
</tr>
127+
</tbody>
128+
</table>
129+
</div>
96130

97131
## Frequently Asked Questions (FAQ)
98132

@@ -111,10 +145,15 @@ With the NIS2 Directive pushing for stronger cybersecurity measures, adopting MF
111145

112146
Solutions like Defguard make it easier than ever to integrate MFA into VPNs, while also offering identity management, SSO, and hardware key management. These added functionalities ensure organizations maintain the security, speed, and simplicity of their VPN while building a comprehensive, regulatory-compliant cybersecurity strategy. As cybersecurity continues to evolve, MFA and broader identity management capabilities will remain cornerstones of defense strategies, ensuring that even if credentials are compromised, access to critical systems remains secure.
113147

148+
114149
---
150+
115151
Piotr Borkowicz
152+
116153
Technical Content Marketing Manager, Defguard
154+
117155
piotr@defguard.net
156+
118157
defguard.net
119158

120159
<script type="application/ld+json" is:inline>

‎src/pages/blog/[slug].astro‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,57 @@ const hasCaseStudy =
393393
border-radius: 3px;
394394
}
395395

396+
/* Table styles matching the comparison page */
397+
:global(.table-container) {
398+
width: 100%;
399+
overflow-x: auto;
400+
margin: 2rem auto;
401+
max-width: 80ch;
402+
}
403+
404+
:global(.comparison-table) {
405+
width: 100%;
406+
border-collapse: collapse;
407+
font-size: 0.95rem;
408+
table-layout: fixed;
409+
border: 1px solid #e0e0e0;
410+
border-radius: 8px;
411+
overflow: hidden;
412+
background: transparent;
413+
414+
th, td {
415+
text-align: left;
416+
padding: 16px 12px;
417+
border: 1px solid #e0e0e0;
418+
vertical-align: top;
419+
}
420+
421+
th {
422+
font-weight: 600;
423+
background: transparent;
424+
border-bottom: 1px solid #e0e0e0;
425+
color: var(--text-body-primary);
426+
}
427+
428+
td:first-child {
429+
font-weight: 600;
430+
width: 20%;
431+
color: var(--text-body-primary);
432+
}
433+
434+
td:nth-child(2),
435+
td:nth-child(3),
436+
td:nth-child(4) {
437+
width: 26.67%;
438+
}
439+
440+
td {
441+
overflow-wrap: break-word;
442+
hyphens: auto;
443+
color: var(--text-body-primary);
444+
}
445+
}
446+
396447
/* Markdown image styling */
397448
:global(img) {
398449
max-width: 100%;

0 commit comments

Comments
 (0)