diffie_hellman/calc.html at master · halfdane/diffie_hellman · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diffie-Hellman Key Exchange Experiment</title>
    <script src="https://peterolson.github.io/BigInteger.js/BigInteger.min.js"></script>
    <script>

        const ALPHANUMERIC = "abcdefghijklmnopqrstuvwxyz0123456789";

        function calculatePublicKey() {
            const g = bigInt(document.getElementById("g").value || 1);
            const p = bigInt(document.getElementById("p").value || 1);
            const a = bigInt(document.getElementById("a").value || 1);

            const A = g.modPow(a, p);
            document.getElementById("A").value = A.toString();
            calculateCommonKey();
        }

        function calculateCommonKey() {
            const B = bigInt(document.getElementById("B").value || 1);
            const a = bigInt(document.getElementById("a").value || 1);
            const p = bigInt(document.getElementById("p").value || 1);

            const K = B.modPow(a, p);
            document.getElementById("K").value = K.toString();
        }

        function generateRandomNumber() {
            return Math.floor(Math.random() * 10);
        }

        function appendRandomToField(fieldId) {
            const randomNum = generateRandomNumber();
            const field = document.getElementById(fieldId);
            field.value += randomNum;
            field.dispatchEvent(new Event('input')); // Trigger input event to recalculate
        }

        function encrypt(text, key) {
        let result = "";
        const bytes = new TextEncoder().encode(text);

        for (let i = 0; i < bytes.length; i++) {
            const byte = bytes[i];
            const xorResult = byte ^ ((key + i) & 0xFF);

            const firstIndex = Math.floor(xorResult / ALPHANUMERIC.length);
            const secondIndex = xorResult % ALPHANUMERIC.length;
            result += ALPHANUMERIC[firstIndex] + ALPHANUMERIC[secondIndex];
        }
        // Group ciphertext into blocks of 4 characters separated by spaces
        result = result.replace(/(.{4})/g, '$1 ').trim();
        return result;
        }

        function decrypt(text, key) {
        // Remove all whitespace from ciphertext
        text = text.replace(/\s/g, '');
        let bytes = [];

        for (let i = 0; i < text.length; i += 2) {
            const firstIndex = ALPHANUMERIC.indexOf(text[i]);
            const secondIndex = ALPHANUMERIC.indexOf(text[i + 1]);
            const xorResult = firstIndex * ALPHANUMERIC.length + secondIndex;

            const byte = xorResult ^ ((key + Math.floor(i / 2)) & 0xFF);
            bytes.push(byte);
        }
        const result = new TextDecoder().decode(new Uint8Array(bytes));
        return result;
        }


        function updateEncryption() {
            const K = parseInt(document.getElementById("K").value) || 0;
            const plaintext = document.getElementById("plaintext").value;
            let encrypted = encrypt(plaintext, K);
            document.getElementById("encrypted").value = encrypted;
        }

        function updateDecryption() {
            const K = parseInt(document.getElementById("K").value) || 0;
            const encryptedText = document.getElementById("encryptedText").value;
            let decrypted = decrypt(encryptedText, K);
            document.getElementById("decrypted").value = decrypted;
        }

        function updateCyphertext() {
            const cyphertext = document.getElementById("encrypted").value;
            document.getElementById("encryptedText").value = cyphertext;
        }
    </script>
    <style>
        body {
            max-width: 800px; /* Restrict width to 800px */
            margin: 0 auto; /* Center the content */
            padding: 20px; /* Add some padding */
        }
        .field-group {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        .shared {
            background-color: #d4edda; /* Light green for shared values */
        }
        .private {
            background-color: #f8d7da; /* Light red for private values */
        }
        .random-button {
            cursor: pointer;
            margin-left: 10px; /* Margin to separate from input field */
            font-size: 1em; /* Adjust size of the button text */
            height: 36px; /* Match height to input field */
            padding: 0 8px; /* Horizontal padding */
        }
        .arrow {
            margin: 0 10px;
        }
        .group-container {
            border: 2px solid #007bff; /* Blue border for grouping */
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .hint {
            font-size: 0.8em; /* Smaller text for hints */
            color: #555; /* Gray color for hints */
        }
        input {
            width: 70%;
        }
    </style>
</head>
<body>
    <div class="group-container">
        <h2>Diffie-Hellman Key Exchange Experiment</h2>
        <div class="field-group shared">
            <label for="g">Shared Generator (g):</label><br>
            <input type="text" id="g" oninput="calculatePublicKey()">
            <button class="random-button" onclick="appendRandomToField('g')" title="Append a random number">⚄</button>
            <div class="hint">Only one party creates this and shares it with their partner</div>
        </div>

        <div class="field-group shared">
            <label for="p">Shared Group (p):</label><br>
            <input type="text" id="p" oninput="calculatePublicKey()">
            <button class="random-button" onclick="appendRandomToField('p')" title="Append a random number">⚄</button>
            <div class="hint">Only one party creates this and shares it with their partner</div>
        </div>

        <div class="field-group private">
            <label for="a">Private Key (a):</label><br>
            <input type="text" id="a" oninput="calculatePublicKey()">
            <button class="random-button" onclick="appendRandomToField('a')" title="Append a random number">⚄</button>
            <div class="hint">Don't share this, it's your private key</div>
        </div>

        <div class="field-group shared">
            <label for="A">Public Key (A = g^a mod p):</label><br>
            <input type="text" id="A">
            <div class="hint">This is your public key - share it with your partner</div>
        </div>

        <div class="field-group shared">
            <label for="B">Public Key of Partner (B):</label><br>
            <input type="text" id="B" oninput="calculateCommonKey()">
            <div class="hint">This is the public key your partner shared with you</div>
        </div>

        <div class="field-group private">
            <label for="K">Common Key (K = B^a mod p):</label><br>
            <input type="text" id="K" oninput="updateEncryption(); updateCyphertext(); updateDecryption();">
            <div class="hint">This is the common private key - your partner should have the same number!</div>
        </div>
    </div>

    <div class="group-container">
        <h2>Unsafe Encryption/Decryption (just adds/subtracts K)</h2>
        <div class="field-group private">
            <label for="plaintext">Encrypt:</label><br>
            <input type="text" id="plaintext" oninput="updateEncryption()" placeholder="Plaintext">
            <span class="arrow">→</span>
            <input type="text" id="encrypted" readonly placeholder="Encrypted Text">
        </div>

        <div class="field-group private">
            <label for="encryptedText">Decrypt:</label><br>
            <input type="text" id="encryptedText" oninput="updateDecryption()" placeholder="Encrypted Text">
            <span class="arrow">→</span>
            <input type="text" id="decrypted" readonly placeholder="Plaintext">
        </div>
    </div>
</body>
</html>