|
|
| (8 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{Groningen}}
| + | #REDIRECT [[Team:Groningen/Encoding]] |
| − | <html>
| + | |
| − | <head>
| + | |
| − | <meta http-equiv="content-type" content="text/html; charset=utf-8" />
| + | |
| − | <title>SpyGEM coding</title>
| + | |
| − | <!-- <link rel="stylesheet" type="text/css" href="reset.css" /> -->
| + | |
| − | <style>
| + | |
| − | #container{
| + | |
| − | display: flex;
| + | |
| − | flex-flow: row wrap;
| + | |
| − | align-items: center;
| + | |
| − | justify-content: space-between;
| + | |
| − | }
| + | |
| − | #container > div{
| + | |
| − | position: relative;
| + | |
| − | margin-right: 5px;
| + | |
| − | }
| + | |
| − | #container > div:last-child{
| + | |
| − | margin-right: 0px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .cnt-desc{
| + | |
| − | flex: 1;
| + | |
| − | }
| + | |
| − | #cnt-message{
| + | |
| − | flex: 4;
| + | |
| − | }
| + | |
| − | #cnt-key{
| + | |
| − | flex: 2;
| + | |
| − | }
| + | |
| − |
| + | |
| − | textarea{
| + | |
| − | width: 100%;
| + | |
| − | height: 6em;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | <h1>Encryption</h1>
| + | |
| − |
| + | |
| − | <hr />
| + | |
| − |
| + | |
| − | <div id="container">
| + | |
| − | <div id="cnt-desc-message" class="cnt-desc">
| + | |
| − | Enter the message you want to secure here
| + | |
| − | </div>
| + | |
| − | <div id="cnt-message">
| + | |
| − | <h2>Message</h2>
| + | |
| − |
| + | |
| − | <textarea id="msg">Hello world</textarea>
| + | |
| − | </div>
| + | |
| − | <div id="cnt-key">
| + | |
| − | <h2>Key</h2>
| + | |
| − |
| + | |
| − | <textarea id="key">secret</textarea>
| + | |
| − | </div>
| + | |
| − | <div id="cnt-desc-key" class="cnt-desc">
| + | |
| − | Enter your secret key/password here
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <hr />
| + | |
| − |
| + | |
| − | <p><button id="stage">Transform</button></p>
| + | |
| − |
| + | |
| − | <p id="desc"></p>
| + | |
| − |
| + | |
| − | <hr />
| + | |
| − |
| + | |
| − | <div id="cnt-transform">
| + | |
| − | <h2 id="cur">Plain text</h2>
| + | |
| − |
| + | |
| − | <textarea id="enc"></textarea>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <hr />
| + | |
| − |
| + | |
| − | <div>
| + | |
| − | <p>Credits:</p>
| + | |
| − | <ul>
| + | |
| − | <li><a href="http://www.movable-type.co.uk/scripts/aes.html">Chris Veness: Javascript implementation of AES</a></li>
| + | |
| − | <li><a href="https://gist.github.com/chitchcock/5112270">'chitchcock': Javascript implementation of CRC16-CCITT</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <script src="/Template:Groningen/crc_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script src="/Template:Groningen/dna_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script src="/Template:Groningen/eightbit_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script src="/Template:Groningen/restrict_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script src="/Template:Groningen/message_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script src="/Template:Groningen/aes_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script src="/Template:Groningen/aes-ctr_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <script>
| + | |
| − | if(typeof Array.from !== 'function'){
| + | |
| − | Array.from = function(src){
| + | |
| − | return Array.prototype.slice.call(src);
| + | |
| − | };
| + | |
| − | }
| + | |
| − |
| + | |
| − | if(typeof String.prototype.padStart !== 'function'){
| + | |
| − | String.prototype.padStart = function(len, chr){
| + | |
| − | var ret = this;
| + | |
| − | while(ret.length < len){
| + | |
| − | ret = chr + ret;
| + | |
| − | }
| + | |
| − | return ret;
| + | |
| − | };
| + | |
| − | }
| + | |
| − | | + | |
| − | var elMsg = document.getElementById('msg'),
| + | |
| − | elKey = document.getElementById('key'),
| + | |
| − | elEnc = document.getElementById('enc'),
| + | |
| − | elErr = document.getElementById('err'),
| + | |
| − | elCur = document.getElementById('cur'),
| + | |
| − | elDesc = document.getElementById('desc'),
| + | |
| − | elStage = document.getElementById('stage');
| + | |
| − |
| + | |
| − | var subCoding = EightBit, doCrypt = false, lastEdit = elMsg,
| + | |
| − | cryptBits = 256, stages = [
| + | |
| − | {name: "Plain text", description: "A message that has not "+
| + | |
| − | "been encrypted is called 'plain text'. The first "+
| + | |
| − | "step in the CryptoGErM process is to encrypt the "+
| + | |
| − | "message. To do this, click the Transform button.",
| + | |
| − | transform: function(prev){ // null
| + | |
| − | return elMsg.value;
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "Encrypted", description: "The message is now "+
| + | |
| − | "encrypted with your secret password and looks like "+
| + | |
| − | "gibberish. This is called the cipher text. The "+
| + | |
| − | "cipher text now needs to be transformed into "+
| + | |
| − | "DNA. For this we need to translate the letters "+
| + | |
| − | "and other symbols to numbers. Fortunately, "+
| + | |
| − | "computers already do this via an encoding "+
| + | |
| − | "scheme called ASCII. Click the Transform button "+
| + | |
| − | "again to translate the ciper text into ASCII.",
| + | |
| − | transform: function(prev){ // plain msg
| + | |
| − | var key = elKey.value;
| + | |
| − | return Aes.Ctr.encrypt(prev, key, cryptBits);
| + | |
| − | }, display: function(data){
| + | |
| − | return data.utf8Decode();
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "ASCII", description: "Each number here is a letter "+
| + | |
| − | "or symbol from the previous step. ASCII uses 8 "+
| + | |
| − | "binary digits (bits) to represent letters & "+
| + | |
| − | "symbols, this means it can have 256 different "+
| + | |
| − | "values. DNA only has 4 different letters, so we "+
| + | |
| − | "need to split each ASCII value up into 4 bases. "+
| + | |
| − | "The easiest way to do this is to look at the "+
| + | |
| − | "binary. Click the Transform button once more to "+
| + | |
| − | "do this.",
| + | |
| − | display: function(data){ // crypt msg
| + | |
| − | return data.split('').map(function(c){
| + | |
| − | return c.charCodeAt(0).toString(10).padStart(3, '0');
| + | |
| − | }).join(' ');
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "Binary", description: "These binary digits can now "+
| + | |
| − | "easily be translated to DNA bases. 00 becomes A, "+
| + | |
| − | "01 becomes C, 10 becomes T and 11 becomes G. In "+
| + | |
| − | "the translating process the binary numbers are "+
| + | |
| − | "reversed. You need to read the binary from "+
| + | |
| − | "right-to-left but it is turned left-to-right in "+
| + | |
| − | "DNA. For example: 11100100 becomes ACTG, not GTCA."+
| + | |
| − | "Click the Transform button to see the DNA of your "+
| + | |
| − | "cipher text.",
| + | |
| − | display: function(data){ // crypt msg
| + | |
| − | return data.split('').map(function(c){
| + | |
| − | return c.charCodeAt(0).toString(2).padStart(8, '0');
| + | |
| − | }).join(' ');
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "DNA", description: "The encrypted message has now "+
| + | |
| − | "been turned into DNA. But we're not completely "+
| + | |
| − | "done yet. A few things need to be put around the "+
| + | |
| − | "message so the decoding & decryption system "+
| + | |
| − | "can find the message and know if it is still "+
| + | |
| − | "intact. Also, certain sequences of DNA may not "+
| + | |
| − | "occur in the final sequence, or the organism may "+
| + | |
| − | "not-so-accidentally destroy the message. All these "+
| + | |
| − | "things are taken care of by putting a header in "+
| + | |
| − | "front of the message with information about the "+
| + | |
| − | "message. The final step takes care of this. Click "+
| + | |
| − | "the Transform button one more time to see the "+
| + | |
| − | "final DNA sequence that can be put into a bacteria.",
| + | |
| − | transform: function(prev){ // crypt msg
| + | |
| − | return EightBit.encodeStr(prev);
| + | |
| − | }, display: function(data){
| + | |
| − | return (data.match(/.{1,4}/g) || []).join(' ');
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "Message", description: "Here is the final message "+
| + | |
| − | "block that can be integrated straight into a "+
| + | |
| − | "bacteria. Because of the way that the encryption "+
| + | |
| − | "mechanism works, the cipher text is different "+
| + | |
| − | "every time you do it, even if you encrypt the "+
| + | |
| − | "same message. You may click the Transform button "+
| + | |
| − | "again to see the whole process again, but with "+
| + | |
| − | "different values.",
| + | |
| − | transform: function(prev){ // dna msg
| + | |
| − | return Message.packDNA(prev);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | ], current;
| + | |
| − |
| + | |
| − | function advanceStage(prev){
| + | |
| − | var idx = prev ? prev.idx : 0,
| + | |
| − | cur = stages[idx],
| + | |
| − | data = prev.data,
| + | |
| − | disp;
| + | |
| − |
| + | |
| − | if(!cur){
| + | |
| − | return cur;
| + | |
| − | }
| + | |
| − |
| + | |
| − | if(cur.transform){
| + | |
| − | data = cur.transform(data);
| + | |
| − | }
| + | |
| − |
| + | |
| − | disp = data;
| + | |
| − | if(cur.display){
| + | |
| − | disp = cur.display(data);
| + | |
| − | }
| + | |
| − |
| + | |
| − | return {stage: cur, idx: (idx + 1) % stages.length, data: data, display: disp};
| + | |
| − | }
| + | |
| − |
| + | |
| − | function showStage(){
| + | |
| − | current = advanceStage(current);
| + | |
| − |
| + | |
| − | elEnc.value = current.display;
| + | |
| − | elCur.innerHTML = current.stage.name;
| + | |
| − | elDesc.innerHTML = current.stage.description;
| + | |
| − | }
| + | |
| − |
| + | |
| − | function resetStage(){
| + | |
| − | console.log(current);
| + | |
| − | current = {idx: 0, data: null, display: null};
| + | |
| − | showStage();
| + | |
| − | }
| + | |
| − |
| + | |
| − | elEnc.oninput = elEnc.onkeyup = resetStage;
| + | |
| − | elKey.oninput = elKey.onkeyup = resetStage;
| + | |
| − | elStage.onclick = showStage;
| + | |
| − |
| + | |
| − | resetStage();
| + | |
| − | </script>
| + | |
| − | </body>
| + | |
| − | </html>
| + | |
| − | {{Groningen/footer}}
| + | |
