|
|
| (20 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>
| + | |
| − |
| + | |
| − | <p>
| + | |
| − | <button id="stage">Transform</button>
| + | |
| − | </p>
| + | |
| − |
| + | |
| − | <div id="cnt-transform">
| + | |
| − | <h2 id="cur">Plain text</h2>
| + | |
| − |
| + | |
| − | <textarea id="enc"></textarea>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <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'),
| + | |
| − | elStage = document.getElementById('stage');
| + | |
| − |
| + | |
| − | var subCoding = EightBit, doCrypt = false, lastEdit = elMsg,
| + | |
| − | cryptBits = 256, stages = [
| + | |
| − | {name: "Plain text", transform: function(prev){ // null
| + | |
| − | return elMsg.value;
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "Encrypted", transform: function(prev){ // plain msg
| + | |
| − | var key = elKey.value;
| + | |
| − | return Aes.Ctr.encrypt(prev, key, cryptBits);
| + | |
| − | }, display: function(data){
| + | |
| − | return data.utf8Decode();
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "ASCII", display: function(data){ // crypt msg
| + | |
| − | return data.split('').map(function(c){
| + | |
| − | return c.charCodeAt(0).toString(10).padStart(3, '0');
| + | |
| − | }).join(' ');
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "Binary", display: function(data){ // crypt msg
| + | |
| − | return data.split('').map(function(c){
| + | |
| − | return c.charCodeAt(0).toString(2).padStart(8, '0');
| + | |
| − | }).join(' ');
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "DNA", transform: function(prev){ // crypt msg
| + | |
| − | return EightBit.encodeStr(prev);
| + | |
| − | }, display: function(data){
| + | |
| − | return (data.match(/.{1,4}/g) || []).join(' ');
| + | |
| − | }
| + | |
| − | },
| + | |
| − | {name: "Message", transform: function(prev){ // dna msg
| + | |
| − | return Message.packDNA(prev);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | ], currentStage = {idx: 0, data: null, display: null};
| + | |
| − |
| + | |
| − | function advanceStage(prev){
| + | |
| − | var idx = prev.idx,
| + | |
| − | cur = stages[idx],
| + | |
| − | data = prev.data,
| + | |
| − | disp;
| + | |
| − |
| + | |
| − | console.log(cur);
| + | |
| − |
| + | |
| − | if(!cur){
| + | |
| − | return cur;
| + | |
| − | }
| + | |
| − |
| + | |
| − | if(cur.transform){
| + | |
| − | data = cur.transform(data);
| + | |
| − | }
| + | |
| − |
| + | |
| − | disp = data;
| + | |
| − | if(cur.display){
| + | |
| − | disp = cur.display(data);
| + | |
| − | }
| + | |
| − |
| + | |
| − | return {idx: idx, data: data, display: disp};
| + | |
| − | }
| + | |
| − |
| + | |
| − | elStage.onclick = function(evt){
| + | |
| − | currentStage = advanceStage(currentStage);
| + | |
| − | elEnc.value = currentStage.display;
| + | |
| − | elCur.innerHTML = stages[currentStage.idx].name;
| + | |
| − | currentStage.idx = (currentStage.idx + 1) % stages.length;
| + | |
| − | };
| + | |
| − | </script>
| + | |
| − | </body>
| + | |
| − | </html>
| + | |
| − | {{Groningen/footer}}
| + | |
