33title: IPCrypt Playground
44description: Interactive playground for experimenting with IPCrypt encryption modes
55permalink: /examples/playground/
6+ sitemap: false
67---
8+ < meta http-equiv ="refresh " content ="0; url=/playground/ ">
79< div class ="container mx-auto px-4 py-8 ">
8- < div class ="max-w-4xl mx-auto ">
9- < header class ="mb-8 ">
10- < h1 class ="text-3xl md:text-4xl font-bold text-primary mb-4 "> IPCrypt Playground</ h1 >
11- < p class ="text-lg text-gray-600 ">
12- Experiment with different IPCrypt encryption modes and see the results in real-time.
13- This interactive playground allows you to encrypt and decrypt IP addresses using all three IPCrypt modes.
14- </ p >
15- </ header >
16- < div class ="playground-container p-6 border rounded-lg bg-gray-50 " x-data ="ipcryptPlayground() ">
17- < div class ="mb-6 ">
18- < label for ="mode-select " class ="block text-sm font-medium text-gray-700 mb-1 "> Encryption Mode</ label >
19- < select id ="mode-select " x-model ="mode " class ="w-full p-2 border rounded ">
20- < option value ="deterministic "> ipcrypt-deterministic (AES-128)</ option >
21- < option value ="nd "> ipcrypt-nd (KIASU-BC)</ option >
22- < option value ="ndx "> ipcrypt-ndx (AES-XTS)</ option >
23- </ select >
24- < p class ="mt-1 text-sm text-gray-500 " x-text ="modeDescription "> </ p >
25- </ div >
26- < div class ="mb-6 ">
27- < label for ="ip-input " class ="block text-sm font-medium text-gray-700 mb-1 "> IP Address</ label >
28- < input type ="text " id ="ip-input " x-model ="ipAddress " placeholder ="Enter an IP address (e.g., 192.0.2.1 or 2001:db8::1) " class ="w-full p-2 border rounded ">
29- < p class ="mt-1 text-sm text-gray-500 "> Supports both IPv4 and IPv6 addresses</ p >
30- </ div >
31- < div class ="mb-6 ">
32- < label for ="key-input " class ="block text-sm font-medium text-gray-700 mb-1 "> Encryption Key (Hex)</ label >
33- < div class ="flex gap-2 ">
34- < input type ="text " id ="key-input " x-model ="key " placeholder ="Enter a hex key " class ="flex-grow p-2 border rounded ">
35- < button @click ="generateRandomKey " class ="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark ">
36- Generate
37- </ button >
38- </ div >
39- < p class ="mt-1 text-sm text-gray-500 " x-text ="keyHelperText "> </ p >
40- </ div >
41- < template x-if ="mode !== 'deterministic' ">
42- < div class ="mb-6 ">
43- < label for ="tweak-input " class ="block text-sm font-medium text-gray-700 mb-1 "> Tweak (Hex)</ label >
44- < div class ="flex gap-2 ">
45- < input type ="text " id ="tweak-input " x-model ="tweak " placeholder ="Enter a hex tweak (or leave empty to generate) " class ="flex-grow p-2 border rounded ">
46- < button @click ="generateRandomTweak " class ="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark ">
47- Generate
48- </ button >
49- </ div >
50- < p class ="mt-1 text-sm text-gray-500 " x-text ="tweakHelperText "> </ p >
51- </ div >
52- </ template >
53- < div class ="flex flex-wrap gap-4 justify-center ">
54- < button @click ="encrypt " class ="px-6 py-2 bg-primary text-white rounded hover:bg-primary-dark ">
55- Encrypt
56- </ button >
57- < button @click ="decrypt " class ="px-6 py-2 bg-secondary text-white rounded hover:bg-secondary-dark ">
58- Decrypt
59- </ button >
60- </ div >
61- < template x-if ="result ">
62- < div class ="mt-8 p-4 border rounded bg-white ">
63- < h3 class ="text-lg font-semibold mb-2 "> Result</ h3 >
64- < div class ="mb-4 ">
65- < div class ="text-sm font-medium text-gray-500 mb-1 "> Operation:</ div >
66- < div class ="p-3 bg-gray-100 rounded " x-text ="result.operation "> </ div >
67- </ div >
68- < div class ="mb-4 ">
69- < div class ="text-sm font-medium text-gray-500 mb-1 "> Output:</ div >
70- < div class ="p-3 bg-gray-100 rounded font-mono break-all " x-text ="result.output "> </ div >
71- </ div >
72- < template x-if ="result.hex ">
73- < div class ="mb-4 ">
74- < div class ="text-sm font-medium text-gray-500 mb-1 "> Hex Representation:</ div >
75- < div class ="p-3 bg-gray-100 rounded font-mono break-all " x-text ="result.hex "> </ div >
76- </ div >
77- </ template >
78- < template x-if ="result.tweak ">
79- < div >
80- < div class ="text-sm font-medium text-gray-500 mb-1 "> Tweak Used:</ div >
81- < div class ="p-3 bg-gray-100 rounded font-mono break-all " x-text ="result.tweak "> </ div >
82- </ div >
83- </ template >
84- </ div >
85- </ template >
86- </ div >
87- < div class ="mt-8 ">
88- < h2 class ="text-2xl font-bold mb-4 "> How to Use the Playground</ h2 >
89- < div class ="prose prose-lg max-w-none ">
90- < ol >
91- < li >
92- < strong > Select an encryption mode</ strong >
93- - Choose between deterministic, non-deterministic (ND), or non-deterministic extended (NDX) modes.
94- </ li >
95- < li >
96- < strong > Enter an IP address</ strong >
97- - Type in an IPv4 or IPv6 address that you want to encrypt or decrypt.
98- </ li >
99- < li >
100- < strong > Provide a key</ strong >
101- - Enter a hexadecimal key or generate a random one. The key length depends on the selected mode.
102- </ li >
103- < li >
104- < strong > For non-deterministic modes, provide a tweak</ strong >
105- - Enter a hexadecimal tweak or generate a random one.
106- </ li >
107- < li >
108- < strong > Click "Encrypt" or "Decrypt"</ strong >
109- - Perform the selected operation and see the results.
110- </ li >
111- </ ol >
112- < p >
113- < strong > Note:</ strong >
114- This playground uses a JavaScript implementation of IPCrypt running in your browser. For production use, consider using one of the
115- < a href ="/implementations/ " class ="text-primary hover:underline "> official implementations</ a > .
116- </ p >
117- </ div >
118- </ div >
119- </ div >
10+ < p > The playground has moved. If you are not redirected automatically, follow this < a href ="/playground/ "> link</ a > .</ p >
12011</ div >
121- < script >
122- function ipcryptPlayground ( ) {
123- return {
124- mode : 'deterministic' ,
125- ipAddress : '' ,
126- key : '' ,
127- tweak : '' ,
128- result : null ,
129-
130- get modeDescription ( ) {
131- if ( this . mode === 'deterministic' ) {
132- return 'Deterministic encryption using AES-128. Same input always produces the same output with the same key.' ;
133- } else if ( this . mode === 'nd' ) {
134- return 'Non-deterministic encryption using KIASU-BC with an 8-byte tweak. Different outputs for the same input due to random tweak.' ;
135- } else if ( this . mode === 'ndx' ) {
136- return 'Non-deterministic encryption using AES-XTS with a 16-byte tweak. Highest security margin with 128-bit tweak space.' ;
137- }
138- return '' ;
139- } ,
140-
141- get keyHelperText ( ) {
142- if ( this . mode === 'deterministic' || this . mode === 'nd' ) {
143- return 'Required: 16 bytes (32 hex characters)' ;
144- } else if ( this . mode === 'ndx' ) {
145- return 'Required: 32 bytes (64 hex characters) - two AES-128 keys' ;
146- }
147- return '' ;
148- } ,
149-
150- get tweakHelperText ( ) {
151- if ( this . mode === 'nd' ) {
152- return 'Required: 8 bytes (16 hex characters)' ;
153- } else if ( this . mode === 'ndx' ) {
154- return 'Required: 16 bytes (32 hex characters)' ;
155- }
156- return '' ;
157- } ,
158-
159- generateRandomKey ( ) {
160- const length = this . mode === 'ndx' ? 64 : 32 ; // Hex characters
161- this . key = this . generateRandomHex ( length ) ;
162- } ,
163-
164- generateRandomTweak ( ) {
165- const length = this . mode === 'ndx' ? 32 : 16 ; // Hex characters
166- this . tweak = this . generateRandomHex ( length ) ;
167- } ,
168-
169- generateRandomHex ( length ) {
170- let result = '' ;
171- const characters = '0123456789abcdef' ;
172- for ( let i = 0 ; i < length ; i ++ ) {
173- result += characters . charAt ( Math . floor ( Math . random ( ) * characters . length ) ) ;
174- }
175- return result ;
176- } ,
177-
178- encrypt ( ) {
179- // Validate inputs
180- if ( ! this . validateInputs ( ) ) {
181- return ;
182- }
183-
184- // This is a placeholder for the actual encryption logic
185- // In a real implementation, this would call the appropriate IPCrypt function
186-
187- if ( this . mode === 'deterministic' ) {
188- // Simulate deterministic encryption
189- this . result = {
190- operation : 'Encryption (Deterministic)' ,
191- output : this . simulateDeterministicEncryption ( this . ipAddress , this . key ) ,
192- hex : this . simulateHexOutput ( 16 )
193- } ;
194- } else if ( this . mode === 'nd' ) {
195- // Ensure we have a tweak
196- if ( ! this . tweak ) {
197- this . generateRandomTweak ( ) ;
198- }
199-
200- // Simulate ND encryption
201- this . result = {
202- operation : 'Encryption (Non-Deterministic)' ,
203- output : this . simulateHexOutput ( 24 ) ,
204- tweak : this . tweak
205- } ;
206- } else if ( this . mode === 'ndx' ) {
207- // Ensure we have a tweak
208- if ( ! this . tweak ) {
209- this . generateRandomTweak ( ) ;
210- }
211-
212- // Simulate NDX encryption
213- this . result = {
214- operation : 'Encryption (Non-Deterministic Extended)' ,
215- output : this . simulateHexOutput ( 32 ) ,
216- tweak : this . tweak
217- } ;
218- }
219- } ,
220-
221- decrypt ( ) {
222- // Validate inputs
223- if ( ! this . validateInputs ( ) ) {
224- return ;
225- }
226-
227- // This is a placeholder for the actual decryption logic
228- // In a real implementation, this would call the appropriate IPCrypt function
229-
230- if ( this . mode === 'deterministic' ) {
231- // Simulate deterministic decryption
232- this . result = {
233- operation : 'Decryption (Deterministic)' ,
234- output : this . simulateIpAddress ( ) ,
235- hex : this . simulateHexOutput ( 16 )
236- } ;
237- } else if ( this . mode === 'nd' ) {
238- // Ensure we have a tweak
239- if ( ! this . tweak ) {
240- alert ( 'Tweak is required for decryption in ND mode' ) ;
241- return ;
242- }
243-
244- // Simulate ND decryption
245- this . result = {
246- operation : 'Decryption (Non-Deterministic)' ,
247- output : this . simulateIpAddress ( ) ,
248- tweak : this . tweak
249- } ;
250- } else if ( this . mode === 'ndx' ) {
251- // Ensure we have a tweak
252- if ( ! this . tweak ) {
253- alert ( 'Tweak is required for decryption in NDX mode' ) ;
254- return ;
255- }
256-
257- // Simulate NDX decryption
258- this . result = {
259- operation : 'Decryption (Non-Deterministic Extended)' ,
260- output : this . simulateIpAddress ( ) ,
261- tweak : this . tweak
262- } ;
263- }
264- } ,
265-
266- validateInputs ( ) {
267- if ( ! this . ipAddress ) {
268- alert ( 'Please enter an IP address' ) ;
269- return false ;
270- }
271-
272- if ( ! this . key ) {
273- alert ( 'Please enter an encryption key' ) ;
274- return false ;
275- }
276-
277- const expectedKeyLength = this . mode === 'ndx' ? 64 : 32 ;
278- if ( this . key . length !== expectedKeyLength ) {
279- alert ( `Key must be ${ expectedKeyLength } ${ expectedKeyLength / 2 } ) ;
280- return false ;
281- }
282-
283- if ( this . mode !== 'deterministic' ) {
284- const expectedTweakLength = this . mode === 'ndx' ? 32 : 16 ;
285- if ( this . tweak && this . tweak . length !== expectedTweakLength ) {
286- alert ( `Tweak must be ${ expectedTweakLength } ${ expectedTweakLength / 2 } ) ;
287- return false ;
288- }
289- }
290-
291- return true ;
292- } ,
293-
294- // Simulation functions for the playground
295- // These would be replaced with actual IPCrypt implementation in a real application
296-
297- simulateDeterministicEncryption ( ip , key ) {
298- // This is a very simple simulation that doesn't actually encrypt anything
299- // It just returns a different IP based on the input to demonstrate the concept
300- if ( ip . includes ( ':' ) ) {
301- // IPv6
302- return '2001:db8:85a3:8d3:1319:8a2e:370:7348' ;
303- } else {
304- // IPv4
305- return '198.51.100.42' ;
306- }
307- } ,
308-
309- simulateHexOutput ( length ) {
310- return this . generateRandomHex ( length * 2 ) ;
311- } ,
312-
313- simulateIpAddress ( ) {
314- // Return a random IP address for simulation
315- const ipv4 = Math . floor ( Math . random ( ) * 256 ) + '.' +
316- Math . floor ( Math . random ( ) * 256 ) + '.' +
317- Math . floor ( Math . random ( ) * 256 ) + '.' +
318- Math . floor ( Math . random ( ) * 256 ) ;
319- return ipv4 ;
320- }
321- } ;
322- }
323- </ script >
12+ < script > window . location . replace ( '/playground/' ) ; </ script >
0 commit comments