diff --git a/content/blog/2023-05-31-nat64.md b/content/blog/2023-05-31-nat64.md deleted file mode 100644 index 704476b..0000000 --- a/content/blog/2023-05-31-nat64.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: page -title: "How I set up NAT64" -description: "Going single-stack inside AS54041" -date: 2023-05-31 -tags: networking -draft: true -extra: - auto_center_images: true - excerpt: "Information on how I set up NAT64 inside AS54041" - # discuss: - # reddit: https://www.reddit.com/r/ewpratten/comments/1356u1t/i_performed_a_button_swap_on_my_mouse/ - # hacker_news: https://news.ycombinator.com/item?id=35781662 ---- - diff --git a/content/blog/2023-06-16-nat64.md b/content/blog/2023-06-16-nat64.md new file mode 100644 index 0000000..5fc1ccb --- /dev/null +++ b/content/blog/2023-06-16-nat64.md @@ -0,0 +1,75 @@ +--- +layout: page +title: "How I set up NAT64" +description: "Working towards single-stack inside AS54041" +date: 2023-06-16 +tags: networking +draft: true +extra: + auto_center_images: true + excerpt: "Information on how I set up NAT64 inside AS54041" + # discuss: + # reddit: https://www.reddit.com/r/ewpratten/comments/1356u1t/i_performed_a_button_swap_on_my_mouse/ + # hacker_news: https://news.ycombinator.com/item?id=35781662 + uses: [mermaid] +--- + +Somewhere along the way of setting up AS54041 over the past few years I stumbled across a reference to [NAT64](https://en.wikipedia.org/wiki/NAT64). + +As with most things IPv6 related, Google searches surface a bunch of hand-wave-y information about possible implementations, but not much in the way of useful tutorials for anyone wanting to try it out themselves (without expensive enterprise routers that is). + +## A quick overview of NAT64 + +Firstly, traditional NAT (technically NAT44) refers to the process of mapping one IPv4 address range to another. + +For example, residential networks generally NAT something like `192.168.1.0/24` to a single public IPv4 address. Every time an internal host wants to send a packet out to the other side of the NAT, a temporary port is allocated on the public address, the router keeps track of this mapping, and the packet is masqueraded from the public address. + +
+graph RL + subgraph Private IPv4 Address Space + Host[Internal Host] --> Router + Router --> Host + end + subgraph Public IPv4 Address Space + Router --> Server[Remote Server] + Server --> Router + end +
+ +Now, if you are familiar with NAT44 (aka, NAT), NAT64 shouldn't be a crazy leap: + +
+graph RL + subgraph Private IPv6 Address Space + Host[Internal Host] --> Router + Router --> Host + end + subgraph Public IPv4 Address Space + Router --> Server[Remote Server] + Server --> Router + end +
+ +Doesn't look like anything changed? Well, that's because the only difference is that the private network is IPv**6** instead of 4. + +Building on this idea of cross-protocol NAT, the next logical progression (and only way I've ever seen this implemented in practice) is to NAT between the *whole IPv6 Internet* and the *whole IPv4 Internet*. Like this: + +
+graph LR + Internet6((IPv6 Internet)) --> Router --> Internet4((IPv4 Internet)) + Internet4 --> Router --> Internet6 +
+ +I'm pretty sure NAT64 was originally intended to be used in an Anycast configuration, but I've yet to learn of anybody doing this in practice. + +
+graph LR + Internet6((IPv6 Internet)) <--> R1[Router 1] <--> Internet4((IPv4 Internet)) + Internet6 <--> R2[Router 2] <--> Internet4 + Internet6 <--> R3[Router 3] <--> Internet4 +
+ +## How I set up NAT64 on a Debian-based router + +## Final Remarks + diff --git a/sass/styles/layout.scss b/sass/styles/layout.scss index 4e392f9..0b4e78b 100644 --- a/sass/styles/layout.scss +++ b/sass/styles/layout.scss @@ -54,6 +54,11 @@ } .mermaid { - width: fit-content; - margin: auto; + width: 100%; + text-align: center; + + & > svg { + width: 90%; + max-width: unset !important; + } } diff --git a/templates/base.html b/templates/base.html index 3ac8132..de1102b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -46,7 +46,7 @@ {% endblock component_styles %} {# Enable features #} - {% include "components/metadata/page-features.html" %} + {% include "components/metadata/page-features-css.html" %} @@ -104,7 +104,12 @@ {# Brid.gy h-card #} + + {# Enable features #} + {% include "components/metadata/page-features-js.html" %} + {% include "components/metadata/analytics.html" %} + \ No newline at end of file diff --git a/templates/components/metadata/page-features.html b/templates/components/metadata/page-features-css.html similarity index 52% rename from templates/components/metadata/page-features.html rename to templates/components/metadata/page-features-css.html index ae111dd..825a6a0 100644 --- a/templates/components/metadata/page-features.html +++ b/templates/components/metadata/page-features-css.html @@ -1,13 +1,5 @@ {% for feature in feature_flags %} -{# KATEX #} -{% if feature == "katex" %} - - -{% endif %} - {# Flags #} {% if feature == "flags" %} {% endif %} -{# Twitter embed #} -{% if feature == "twitter" %} - -{% endif %} - -{# Mermaid #} -{% if feature == "mermaid" or feature == "graphviz" %} - -{% endif %} - {# Font Awesome #} {% if feature == "fontawesome" %} + +{% endif %} + +{# Twitter embed #} +{% if feature == "twitter" %} + +{% endif %} + +{# Mermaid #} +{% if feature == "mermaid" or feature == "graphviz" %} + + +{% endif %} + +{% endfor %} \ No newline at end of file