2 files changed, 32 insertions, 1 deletions
diff --git a/docs/src/content/howto-wireshark-tls.md b/docs/src/content/howto-wireshark-tls.md
new file mode 100644
index 00000000..588223ac
--- /dev/null
+++ b/docs/src/content/howto-wireshark-tls.md
@@ -0,0 +1,28 @@
+---
+title: "Wireshark and SSL/TLS"
+menu:
+    howto:
+        weight: 1
+---
+
+# Wireshark and SSL/TLS Master Secrets
+
+The SSL/SSL master keys can be logged by mitmproxy so that external programs can
+decrypt SSL/TLS connections both from and to the proxy. Recent versions of
+Wireshark can use these log files to decrypt packets. See the [Wireshark wiki](https://wiki.wireshark.org/SSL#Using_the_.28Pre.29-Master-Secret) for more information.
+
+Key logging is enabled by setting the environment variable `SSLKEYLOGFILE` so
+that it points to a writable text file:
+{{< highlight bash  >}}
+SSLKEYLOGFILE="$PWD/.mitmproxy/sslkeylogfile.txt" mitmproxy
+{{< / highlight >}}
+You can also `export` this environment variable to make it persistent for all applications started from your current shell session.
+
+You can specify the key file path in Wireshark via `Edit -> Preferences ->
+Protocols -> SSL -> (Pre)-Master-Secret log filename`. If your SSLKEYLOGFILE
+does not exist yet, just create an empty text file, so you can select it in
+Wireshark (or run mitmproxy to create and collect master secrets).
+
+Note that `SSLKEYLOGFILE` is respected by other programs as well, e.g., Firefox
+and Chrome. If this creates any issues, you can use `MITMPROXY_SSLKEYLOGFILE`
+instead without affecting other applications.
diff --git a/docs/src/themes/mitmproxydocs/static/css/style.css b/docs/src/themes/mitmproxydocs/static/css/style.css
index 14823447..6029ddb6 100644
--- a/docs/src/themes/mitmproxydocs/static/css/style.css
+++ b/docs/src/themes/mitmproxydocs/static/css/style.css
@@ -6718,7 +6718,6 @@ label.panel-block {
   padding: 3rem 1.5rem 6rem; }
 
 .sidebody {
-  height: 100vh;
   overflow-x: hidden;
   overflow-y: scroll; }
 
@@ -6731,6 +6730,10 @@ label.panel-block {
     width: 100%;
     text-align: right; }
 
+.sidebar {
+  background-color: #F1F1F1;
+}
+
 .sidebar .version {
   padding: 1em; }