[dark mode] encryption/decryption modes

Gemfile.lock

@@ -219,11 +219,10 @@ GEM
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
-    minitest (5.21.2)
-    mutex_m (0.2.0)
-    net-http (0.4.1)
-      uri
-    nokogiri (1.16.0-x86_64-linux)
+    minitest (5.16.3)
+    nokogiri (1.13.8-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.13.8-x86_64-darwin)
       racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
@@ -265,6 +264,8 @@ GEM
 
 PLATFORMS
   x86_64-linux
+  arm64-darwin-23
+  x86_64-darwin-21
 
 DEPENDENCIES
   github-pages

_includes/head_custom.html

@@ -6,6 +6,10 @@
 <script>
   let toggleDark = () => {
     let setDark = jtd.getTheme() !== 'dark';
+    document.documentElement.setAttribute(
+      'data-theme',
+      setDark ? 'dark' : 'default',
+    );
     jtd.setTheme(setDark ? 'dark' : 'default');
     localStorage.setItem('darkMode', String(setDark));
   };
@@ -20,7 +24,10 @@
 
     /* Read local storage state. */
     if (localStorage.getItem('darkMode') === 'true') {
+      document.documentElement.setAttribute('data-theme', 'dark');
       toggleDark();
+    } else {
+      document.documentElement.setAttribute('data-theme', 'default');
     }
   });
 </script>

_sass/custom/custom.scss

@@ -7,3 +7,19 @@
   margin-top: 0;
   margin-bottom: 0;
 }
+
+.light-mode {
+  display: none;
+}
+
+.dark-mode {
+  display: none;
+}
+
+:root[data-theme="default"] .light-mode {
+  display: block;
+}
+
+:root[data-theme="dark"] .dark-mode {
+  display: block;
+}

crypto/symmetric.md

@@ -249,23 +249,27 @@ There are several standard ways (or modes of operation) of building an encryptio
 
 - ECB mode decryption: $$M_i = D_K(C_i)$$
 
-![Diagram of encryption for the ECB mode of
-operation](/assets/images/crypto/symmetric/ECB_encryption.png)
+<img src="/assets/images/crypto/symmetric/ECB_encryption.png" alt="Diagram of encryption for the ECB mode of operation in light mode" class="light-mode">
 
-![Diagram of decryption for the ECB mode of
-operation](/assets/images/crypto/symmetric/ECB_decryption.png)
+<img src="/assets/images/crypto/symmetric/ECB_encryption_invert.png" alt="Diagram of encryption for the ECB mode of operation in dark mode" class="dark-mode">
+
+<img src="/assets/images/crypto/symmetric/ECB_decryption.png" alt="Diagram of decryption for the ECB mode of operation in light mode" class="light-mode">
+
+<img src="/assets/images/crypto/symmetric/ECB_decryption_invert.png" alt="Diagram of decryption for the ECB mode of operation in dark mode" class="dark-mode">
 
 **CBC Mode** (Cipher Block Chaining): This is a popular mode for commercial applications. For each message the sender picks a random $$n$$-bit string, called the _initial vector_ or IV. Define $$C_0 = IV$$. The $$i^\textrm{th}$$ ciphertext block is given by $$C_i = E_K(C_{i-1} \oplus M_i)$$. The ciphertext is the concatenation of the initial vector and these individual blocks: $$C = IV \cdot C_1 \cdot C_2 \cdots C_l$$. CBC mode has been proven to provide strong security guarantees on the privacy of the plaintext message (assuming the underlying block cipher is secure).
 
 - CBC mode encryption: $$\begin{cases} C_0 = IV \\ C_i = E_K(P_i \oplus C_{i-1}) \end{cases}$$
 
 - CBC mode decryption: $$P_i = D_K(C_i) \oplus C_{i-1}$$
 
-![Diagram of encryption for the CBC mode of
-operation](/assets/images/crypto/symmetric/CBC_encryption.png)
+<img src="/assets/images/crypto/symmetric/CBC_encryption.png" alt="Diagram of encryption for the CBC mode of operation in light mode" class="light-mode">
+
+<img src="/assets/images/crypto/symmetric/CBC_encryption_invert.png" alt="Diagram of encryption for the CBC mode of operation in dark mode" class="dark-mode">
 
-![Diagram of decryption for the CBC mode of
-operation](/assets/images/crypto/symmetric/CBC_decryption.png)
+<img src="/assets/images/crypto/symmetric/CBC_decryption.png" alt="Diagram of decryption for the CBC mode of operation in light mode" class="light-mode">
+
+<img src="/assets/images/crypto/symmetric/CBC_decryption_invert.png" alt="Diagram of decryption for the CBC mode of operation in dark mode" class="dark-mode">
 
 **CFB Mode** (Ciphertext Feedback Mode): This is another popular mode with properties very similar to CBC mode. Again, $$C_0$$ is the IV. The $$i^\textrm{th}$$ ciphertext block is given by $$C_i = E_K(C_{i-1}) \oplus M_i$$.
 
@@ -280,11 +284,13 @@ operation](/assets/images/crypto/symmetric/CBC_decryption.png)
 
 - CFB mode decryption: $$P_i = E_K(C_{i-1}) \oplus C_i$$
 
-![Diagram of encryption for the CFB mode of
-operation](/assets/images/crypto/symmetric/CFB_encryption.png)
+<img src="/assets/images/crypto/symmetric/CFB_encryption.png" alt="Diagram of encryption for the CFB mode of operation in light mode" class="light-mode">
+
+<img src="/assets/images/crypto/symmetric/CFB_encryption_invert.png" alt="Diagram of encryption for the CFB mode of operation in dark mode" class="dark-mode">
 
-![Diagram of decryption for the CFB mode of
-operation](/assets/images/crypto/symmetric/CFB_decryption.png)
+<img src="/assets/images/crypto/symmetric/CFB_decryption.png" alt="Diagram of decryption for the CFB mode of operation in light mode" class="light-mode">
+
+<img src="/assets/images/crypto/symmetric/CFB_decryption_invert.png" alt="Diagram of decryption for the CFB mode of operation in dark mode" class="dark-mode">
 
 **OFB Mode** (Output Feedback Mode): In this mode, the initial vector IV is repeatedly encrypted to obtain a set of values $$Z_i$$ as follows: $$Z_0 = IV$$ and $$Z_i = E_K(Z_{i-1})$$. These values $$Z_i$$ are now used as though they were the key for a one-time pad, so that $$C_i = Z_i \oplus M_i$$. The ciphertext is the concatenation of the initial vector and these individual blocks: $$C = IV \cdot C_1 \cdot C_2 \cdots C_l$$. In OFB mode, it is very easy to tamper with ciphertexts. For instance, suppose that the adversary happens to know that the $$j^\textrm{th}$$ block of the message, $$M_j$$, specifies the amount of money being transferred to his account from the bank, and suppose he also knows that $$M_j = 100$$. Since he knows both $$M_j$$ and $$C_j$$, he can determine $$Z_j$$. He can then substitute any $$n$$-bit block in place of $$M_j$$ and get a new ciphertext $$C'_j$$ where the $$100$$ is replaced by any amount of his choice. This kind of tampering is also possible with other modes of operation as well (so don't be fooled into thinking that CBC mode is safe from tampering); it's just easier to illustrate on OFB mode.
 
@@ -298,11 +304,13 @@ operation](/assets/images/crypto/symmetric/CFB_decryption.png)
 
 - OFB mode decryption: $$P_i = C_i \oplus Z_i$$
 
-![Diagram of encryption for the OFB mode of
-operation](/assets/images/crypto/symmetric/OFB_encryption.png)
+<img src="/assets/images/crypto/symmetric/OFB_encryption.png" alt="Diagram of encryption for the OFB mode of operation in light mode" class="light-mode">
+
+<img src="/assets/images/crypto/symmetric/OFB_encryption_invert.png" alt="Diagram of encryption for the OFB mode of operation in dark mode" class="dark-mode">
+
+<img src="/assets/images/crypto/symmetric/OFB_decryption.png" alt="Diagram of decryption for the OFB mode of operation in light mode" class="light-mode">
 
-![Diagram of decryption for the OFB mode of
-operation](/assets/images/crypto/symmetric/OFB_decryption.png)
+<img src="/assets/images/crypto/symmetric/OFB_decryption_invert.png" alt="Diagram of decryption for the OFB mode of operation in dark mode" class="dark-mode">
 
 **Counter (CTR) Mode**: In CTR mode, a counter is initialized to IV and repeatedly incremented and encrypted to obtain a sequence that can now be used as though they were the keys for a one-time pad: namely, $$Z_i = E_K(IV + i)$$ and $$C_i = Z_i \oplus M_i$$. In CTR mode, the IV is sometimes renamed the _nonce_. This is just a terminology difference--nonce and IV can be used interchangeably for the purposes of this class.
 
@@ -312,11 +320,13 @@ Note that in CTR and OFB modes, the decryption algorithm uses the block cipher _
 
 - CTR mode decryption: $$M_i = E_K(IV + i) \oplus C_i$$
 
-![Diagram of encryption for the CTR mode of
-operation](/assets/images/crypto/symmetric/CTR_encryption.png)
+<img src="/assets/images/crypto/symmetric/CTR_encryption.png" alt="Diagram of encryption for the CTR mode of operation in light mode" class="light-mode">
+
+<img src="/assets/images/crypto/symmetric/CTR_encryption_invert.png" alt="Diagram of encryption for the CTR mode of operation in dark mode" class="dark-mode">
+
+<img src="/assets/images/crypto/symmetric/CTR_decryption.png" alt="Diagram of decryption for the CTR mode of operation in light mode" class="light-mode">
 
-![Diagram of decryption for the CTR mode of
-operation](/assets/images/crypto/symmetric/CTR_decryption.png)
+<img src="/assets/images/crypto/symmetric/CTR_decryption_invert.png" alt="Diagram of decryption for the CTR mode of operation in dark mode" class="dark-mode">
 
 For the rest of these notes, we will focus on analyzing CBC and CTR modes. As an exercise, you can try performing similar analysis on the other modes as well.