Merge branch 'master' of github.com:syn2cat/CryptoMessageInABottle
commit
68d35f6a28
|
|
@ -140,8 +140,8 @@ It is possible to use the cesar brutforcing drum to encrypt. Set all wheels to A
|
|||
Here is hello encrypted with DOG
|
||||
|
||||
First we encode HELLO on the second wheel pairs
|
||||
~~~~
|
||||
v-- coding line
|
||||
|
||||
|A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|
|
||||
|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|A|B|C|D|E|F|G|
|
||||
| |
|
||||
|
|
@ -156,10 +156,10 @@ First we encode HELLO on the second wheel pairs
|
|||
| |
|
||||
|A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|
|
||||
|O|P|Q|R|S|T|U|V|W|X|Y|Z|A|B|C|D|E|F|G|H|I|J|K|L|M|N|
|
||||
|
||||
~~~~
|
||||
Then we turn all pairs to spell DOG on the coding line
|
||||
~~~~
|
||||
v-- coding line
|
||||
|
||||
|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|A|B|C|
|
||||
|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|A|B|C|D|E|F|G|H|I|J|
|
||||
| |
|
||||
|
|
@ -174,25 +174,27 @@ Then we turn all pairs to spell DOG on the coding line
|
|||
| |
|
||||
|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|A|B|C|D|E|F|
|
||||
|U|V|W|X|Y|Z|A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|
|
||||
|
||||
~~~~
|
||||
The crypted message is read on the second wheel of each pair
|
||||
|
||||
KSROU
|
||||
|
||||
To decode set all wheels to A
|
||||
|
||||
~~~~
|
||||
AA AA AA AA AA
|
||||
|
||||
~~~~
|
||||
then put the keyword on the 1st wheels
|
||||
~~~~
|
||||
DA OA GA DA OA
|
||||
|
||||
~~~~
|
||||
put the coded message on 2nd wheels on the code line
|
||||
|
||||
~~~~
|
||||
DK OS GR DO OU
|
||||
|
||||
~~~~
|
||||
Then turn the 1st & 2nd wheels of each pair synchronised so that the 1st wheels are all set to A. Now you can read the message on the 2nd wheels
|
||||
|
||||
~~~~
|
||||
AH AE AL AL AO
|
||||
|
||||
~~~~
|
||||
=> HELLO
|
||||
|
||||
Ask kids to encrypt a message for the following group and put it in a bottle / jar dedicated for that age group. Remind them – no hate speech, no bullying
|
||||
|
|
@ -230,11 +232,11 @@ So first of all we write down the normal alphabet (the plaintext alphabet), and
|
|||
But there's a trick to this - remember that we don't want repeated letters!
|
||||
So kids have to leave out the second O in XYLOPHONE, and when you get to the normal alphabet you write down ABCDFGI... leaving out the E, the H, and any other letters in the codeword.
|
||||
So here's what the alphabet looks like when you're finished:
|
||||
|
||||
~~~~
|
||||
|Plain text:|A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z|
|
||||
|-----------|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|-|
|
||||
|Code: |X|Y|L|O|P|H|N|E|A|B|C|D|F|G|I|J|K|M|Q|R|S|T|U|V|W|Z|
|
||||
|
||||
~~~~
|
||||
The next step is to explain to kids that besides a code word/ keyword, we can have a keyletter - the code word should be written starting under the specified keyletter rather than at the beginning. And then, the rest of the alphabet is written omitting duplicate letters.
|
||||
|
||||
### Public Key Cryptography (Highly recommended)
|
||||
|
|
@ -305,7 +307,7 @@ The same is repeated for the second, third and so on letter of the keyword.
|
|||
|
||||
Decryption works reversing the process.
|
||||
|
||||
/*I miss here the transition to asymmetric encryption and Public key cryptography*/
|
||||
Transition to assymetric key systems: how do we trasmit the encryption key so that nobody can intercept it on the way?
|
||||
|
||||
## Public Key Cryptography
|
||||
Explain the use of encryption in public-secret (private) key cryptography – with previously shown ciphers, we use the same key for encrypting and decrypting – symmetric encryption. It is more secure if sender and recipient of the encrypted message have different keys.
|
||||
|
|
@ -317,6 +319,8 @@ This is how encryption works with different keys for encryption and decryption
|
|||
|
||||
You can go on to explain the opposite use – to sign a message with your secret (private) key when everybody having the public key can open it. But they know that only you could lock it in the box, as only the secret key could open it in that direction.
|
||||
|
||||
See the detailed operating of this workshop in [PublicSecretCrypto/README.md](PublicSecretCrypto/README.md)
|
||||
|
||||
*No extra activities here – attendees may encrypt their messages and decrypt others' messages for as much time as they have left.*
|
||||
|
||||
# Age Group 4 (16-18 + Adults)
|
||||
|
|
@ -364,6 +368,8 @@ Mention asymmetric key algorithms uses: SSL (point out https), SSH, PGP and GPG,
|
|||
|
||||
Maybe talk about hash functions, MD-5, SHA-1 and SHA-256
|
||||
|
||||
See the detailed operating of this workshop in [PublicSecretCrypto/README.md](PublicSecretCrypto/README.md)
|
||||
|
||||
*No extra activities here – attendees may encrypt their messages and decrypt others' messages for as much time as they have left.*
|
||||
|
||||
Resources
|
||||
|
|
|
|||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 830 KiB |
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 916 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -3,9 +3,8 @@
|
|||
Inspired from https://blog.vrypan.net/2013/08/28/public-key-cryptography-for-non-geeks/
|
||||
create a lock with 2 keys of which one can only unlock and the other can only lock
|
||||
|
||||
Either the lock in in a box and allows to open it, or the design is like a padlock and allows to lock/sign any item
|
||||
|
||||
Prototype is done and people are amazed. This sounds good.
|
||||
There are 2 lock cylinders, as can be found on normal doors, located in a padlock style device. It allows to close a box, envelope or be attached to items.
|
||||
The first trials with a prototype were a success. People are amazed.
|
||||
|
||||
# How to run this workshop
|
||||
Asymetric cryptography adresses the problem of key transmission.
|
||||
|
|
@ -14,35 +13,47 @@ You have a public key which everyone knows and a secret key which only the recie
|
|||
|
||||
The keys are generated by the reciever who then publishes the public key in a "phonebook"
|
||||
|
||||
## Introduction
|
||||
* show the padlocks with the 2 locks and the public keys. Take the secret key out of a pocket. "never give this anyone"
|
||||
* show that there are 2 sets of padlocks and keys. The ones for Alice, and the ones for Bob
|
||||
* IMPORTANT: show on a separate lock that there is a one-way function on the lock. It only turns one way around. This is the whole secret behind asymetric encryption systems. WIth one key you can only go in one direction, and never back.
|
||||
* IMPORTANT: show on a separate lock that there is a one-way function on the lock. It only turns one way around. This is the whole secret behind asymetric encryption systems. With one key you can only go in one direction, and never back.
|
||||
|
||||
* Chose kids who play Alice and Bob
|
||||
* Chose kids (or groups of kids) who play Alice and Bob
|
||||
* There are 3 Alice padlocks and 3 Bob padlocks
|
||||
* The exercise can be done 6 times, by sending 3 messages from Alice to Bob and 3 from Bob to Alice. But this may complicate the explanations. In the following, only the direction Alice to Bob will be detailed.
|
||||
|
||||
* Alice wites a message and put it in an envelope/box. close the box by using the padlock and public key.
|
||||
** but which key to use? Remember, the keys are created by the reciever. So we need to use Bob's public key.
|
||||
** insist that the padlocks and public keys are accessible to anyone. Only the secret keys are... secret
|
||||
## Encryption
|
||||
* Alice wites a message and puts it in an envelope/box. close the box by using the padlock and public key.
|
||||
* but which key to use? Remember, the keys are created by the reciever. So we need to use Bob's public key.
|
||||
* insist that the padlocks and public keys are accessible to anyone. Only the secret keys are... secret
|
||||
|
||||
* Bob recieves the box, and can unlock the padlock with his secret key
|
||||
** he is happy for the message
|
||||
** but who wrote it. It says Alice, but anyone could write that, then use Bob's public key and send it to him
|
||||
* he is happy for the message
|
||||
* but who wrote it? It says Alice, but anyone could write that, then use Bob's public key and send it to him
|
||||
|
||||
* Signing
|
||||
## Signing
|
||||
* Alice wants to prove that the message comes from her.
|
||||
** Show that the padlocks have a second function. If you use first the secret key
|
||||
** Alice writes her message, then attaches a padlock to it and closes it with her secret key. only she has that key.
|
||||
* Show that the padlocks have a second function. If you use the secret key first
|
||||
* Alice writes her message, then attaches a padlock to it and closes it with her secret key. only she has that key.
|
||||
So she is the only one who is able to close the padlock that way.
|
||||
** Alice puts the message with the padlock-signature into a bo and encrypts it with the reciever's (Bob) public key.
|
||||
** Bob recieves the box, aand decrpyt with his secret key
|
||||
** He sees the message with Alice signature
|
||||
** He veryfies the signature by trying to open the lock with alice's public key. It works! So that proves that the message comes from her.
|
||||
* Alice puts the message with the padlock-signature into a box and encrypts it with the reciever's (Bob) public key.
|
||||
* Bob recieves the box, and opens it (decrpyt) with his secret key
|
||||
* He sees the message with Alice signature
|
||||
* He veryfies the signature by opening the lock with alice's public key. It works! So that proves that the message comes from her.
|
||||
* One could explain that it's technically possible to sign, making the message unreadable (but easily made readable with the public key) or to sign by leaving the message in clear text.
|
||||
* But where does this public key of Alice come from? How do we know it's Alice? Can be anyone...
|
||||
|
||||
* Certification authorities
|
||||
## Certification authorities
|
||||
* Transform one or two padlocks into Cert padlocks (change cylinders and stickers)
|
||||
* You can verify a signature, but for that you need a public key. Anyone in the world coud say "I am Alice, here is my key". So we are back to starting square.
|
||||
** Some higher instance needs to prove that the public key is the one of Alice. That is called a certification authority.
|
||||
** The certification authority signs the public key. This creates a certificate.
|
||||
** But who signs the certification authority's public key?
|
||||
** another certification authority, and so on... at some point you need to trus some authority
|
||||
** Web browsers come with built-in certification authorities which the browser trusts. That's how the websites prove that they are who they say. Show a webbrowser's CA list.
|
||||
* Some higher instance needs to prove that the public key is the one of Alice. That is called a certification authority.
|
||||
* The certification authority signs the public key. This creates a certificate.
|
||||
* Demonstrate by attaching the CA's padlock using the CA's secret key (signing) to alice's public key (not to her padlock)
|
||||
* But who signs the certification authority's public key?
|
||||
* another certification authority, and so on... at some point you need to trust some authority.
|
||||
* Demonstrate by attaching another padlock-signature to the CA's public key. => "keychain"
|
||||
* Finally at the end, the top secret key is secured in a box/envelope by attaching a combination code padlock. And the code is put in your head.
|
||||
* Web browsers come with built-in certification authorities which the browser trusts. That's how the websites prove that they are who they say. Show a webbrowser's CA list.
|
||||
* Show how a website's certificate is signed by a row of CAs.
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -1,89 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Level2 decrypt challenge</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="theme/bootstrap.css" media="screen">
|
||||
<link rel="stylesheet" href="theme/usebootstrap.css">
|
||||
<link rel="stylesheet" href="theme/css.css">
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="bootstrap/html5shiv.js"></script>
|
||||
<script src="bootstrap/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="page-header" id="banner">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-lg-offset-6" id="mainDiv">
|
||||
<h1>Welcome to syn2cat decrypt challenge</h1>
|
||||
<form class="bs-component">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="enc">Encrypted message</label>
|
||||
<input class="form-control" id="enc" type="text" placeholder="Mffmow mf pmiz!">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="dec">Decrypted message</label>
|
||||
<input class="form-control" id="dec" type="text" value="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-lg-10 col-lg-offset-2 pull-right">
|
||||
<button id="decBtn" type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
This page made by <a href=https://syn2cat.lu/>Syn2Cat</a>, the a.s.b.l. running the <a href=https://level2.lu/>Level2</a> hackerspace.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="bootstrap/bootstrap.min.js"></script>
|
||||
<script src="bootstrap/usebootstrap.js"></script>
|
||||
<script>
|
||||
var caesarShift = function(str, amount) {
|
||||
if (amount < 0)
|
||||
return caesarShift(str, amount + 26);
|
||||
var output = '';
|
||||
for (var i = 0; i < str.length; i ++) {
|
||||
var c = str[i];
|
||||
if (c.match(/[a-z]/i)) {
|
||||
var code = str.charCodeAt(i);
|
||||
if ((code >= 65) && (code <= 90))
|
||||
c = String.fromCharCode(((code - 65 + amount) % 26) + 65);
|
||||
else if ((code >= 97) && (code <= 122))
|
||||
c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
|
||||
}
|
||||
output += c;
|
||||
}
|
||||
return output;
|
||||
};
|
||||
$( document ).ready(function() {
|
||||
$("#decBtn").click(function( event ) {
|
||||
event.preventDefault();
|
||||
var enc = $("#enc").val();
|
||||
var dec = $("#dec").val();
|
||||
var result = "";//caesarShift(enc,-12);
|
||||
var succeed = false;
|
||||
for (var i = 1; i <26; i++)
|
||||
{
|
||||
result = caesarShift(enc,i);
|
||||
if (result === dec){
|
||||
$("#mainDiv").empty().append("<h1 class='text-success'>Congratulations, you made it!</h1><h3><a href='./index.html'>click here to<br>Try another code</a></h3>");
|
||||
succeed = true;
|
||||
}
|
||||
if (!succeed)
|
||||
$("#mainDiv").empty().append("<h1 class='text-danger'>Sorry, you didn't succeed</h1><h3><a href='./index.html'>click here to<br>Try again</a></h3>");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Level2 decrypt challenge</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="theme/bootstrap.css" media="screen">
|
||||
<link rel="stylesheet" href="theme/usebootstrap.css">
|
||||
<link rel="stylesheet" href="theme/css.css">
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="bootstrap/html5shiv.js"></script>
|
||||
<script src="bootstrap/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="container">
|
||||
<div class="page-header" id="banner">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-lg-offset-6" id="mainDiv">
|
||||
<h1>Welcome to syn2cat decrypt challenge</h1>
|
||||
<form class="bs-component">
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="enc">Encrypted message</label>
|
||||
<input class="form-control" id="enc" type="text" placeholder="Mffmow mf pmiz!">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="dec">Decrypted message</label>
|
||||
<input class="form-control" id="dec" type="text" value="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-lg-10 col-lg-offset-2 pull-right">
|
||||
<button id="decBtn" type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-lg-offset-8">
|
||||
<p class="text-muted credit"> This page made by <a href=https://syn2cat.lu/>Syn2Cat</a>, the a.s.b.l. running the <a href=https://level2.lu/>Level2</a> hackerspace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="bootstrap/bootstrap.min.js"></script>
|
||||
<script src="bootstrap/usebootstrap.js"></script>
|
||||
<script>
|
||||
var caesarShift = function(str, amount) {
|
||||
if (amount < 0)
|
||||
return caesarShift(str, amount + 26);
|
||||
var output = '';
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
var c = str[i];
|
||||
if (c.match(/[a-z]/i)) {
|
||||
var code = str.charCodeAt(i);
|
||||
if ((code >= 65) && (code <= 90))
|
||||
c = String.fromCharCode(((code - 65 + amount) % 26) + 65);
|
||||
else if ((code >= 97) && (code <= 122))
|
||||
c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
|
||||
}
|
||||
output += c;
|
||||
}
|
||||
return output;
|
||||
};
|
||||
$(document).ready(function() {
|
||||
$("#decBtn").click(function(event) {
|
||||
event.preventDefault();
|
||||
var enc = $("#enc").val();
|
||||
var dec = $("#dec").val();
|
||||
var result = ""; //caesarShift(enc,-12);
|
||||
var succeed = false;
|
||||
for (var i = 1; i < 26; i++) {
|
||||
result = caesarShift(enc, i);
|
||||
if (result === dec) {
|
||||
$("#mainDiv").empty().append("<h1 class='text-success'>Congratulations, you made it!</h1><h3><a href='./index.html'>click here to<br>Try another code</a></h3>");
|
||||
succeed = true;
|
||||
}
|
||||
if (!succeed)
|
||||
$("#mainDiv").empty().append("<h1 class='text-danger'>Sorry, you didn't succeed</h1><h3><a href='./index.html'>click here to<br>Try again</a></h3>");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,21 +9,28 @@ body {
|
|||
color:#fff;
|
||||
background-color:#333;
|
||||
font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
|
||||
height: 100%;
|
||||
}
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
/* Wrapper for page content to push down footer */
|
||||
.wrap {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
/* Negative indent footer by its height */
|
||||
margin: 0 auto -60px;
|
||||
/* Pad bottom by footer height */
|
||||
padding: 0 0 60px;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
.block {
|
||||
background-color:rgba(0,0,0,0.2);
|
||||
height:370px;
|
||||
padding-left:12px;
|
||||
padding-right:12px;
|
||||
}
|
||||
|
||||
.block-sm {
|
||||
height:180px;
|
||||
/* Set the fixed height of the footer here */
|
||||
.footer {
|
||||
height: 60px;
|
||||
background-color: #00000000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.btn-flat {
|
||||
|
|
|
|||
Loading…
Reference in New Issue