324cf459b737b0cd61234ca1dd70eb7165aade5f
[shamirs_secret_web_implementation.git] / src / secret.html
1 <html>
2 <head>
3 <style type="text/css">
4         @media print {
5                 #pages > div{
6                         page-break-after: always;
7                 }
8         
9                 fieldset{
10                         display: none;
11                 };
12         }
13         
14         @media screen {
15                 #pages{
16                         display: none;
17                 }
18         }       
19
20         td{
21                 text-align: right;
22                 padding: 10px;
23         }
24         td:nth-child(2n){
25                 background:#ccc;
26         }
27         tr:nth-child(2) td{
28                 border-width: 0 0 5px 0;
29                 border-style: solid;
30                 
31         }
32         .half{
33                 border: 1px solid black;
34         }
35         .num{
36                 width: 40px;
37         }
38         
39         #pages span {
40         border: 1px solid gray;
41         display: inline-block;
42         margin: 3px;
43         padding: 3px;
44         }
45         textarea{ 
46                 width: 100%;
47                 min-height: 150px;
48         }
49         
50         
51 </style>
52 <script type="text/javascript">
53 var prime=257;
54 function createElement(e,t){return '<'+e+'>'+t+'</'+e+'>';} // html element with content t
55 function getElement(i){return document.getElementById(i);}
56 function setHtmlOf(i,t){getElement(i).innerHTML=t};
57 function valueOfField(i){return getElement(i).value;} // value of element with id
58
59 function rand256(){
60         return Math.floor(Math.random() * 256);
61 }
62
63 /* Split number into the shares */
64 function split(number, number_of_shares, needed) {
65     var coef = [number]
66     var shares = [];
67
68     for(var coef_index = 1; coef_index < needed; coef_index++){
69         coef[coef_index] = rand256();
70     }
71     
72     for(var share_number = 1; share_number <= number_of_shares; share_number++) {
73         var sum = 0;
74         for (var coef_index =0; coef_index<needed; coef_index++){
75                 sum += coef[coef_index]*Math.pow(share_number,coef_index);
76         }
77         
78         shares[share_number-1] = sum % prime; 
79     }
80     return shares;
81 }
82
83 function collect(){
84         var divs=document.getElementsByClassName('share');
85         var shares=[],lastValue;
86         for (var div_index=0; div_index<divs.length; div_index++){
87                 var div=divs[div_index];
88                 var inputs = div.getElementsByTagName('input');
89                 var share_number=0;                     
90                 for (var j=0; j<inputs.length;j++){
91                         var input = inputs[j];
92                         if (input.className == 'num') {
93                                 share_number=input.value;
94                         } else {
95                                 string=input.value;
96                                 if (share_number>0 && string!='') {
97                                         var parts = string.split(' ');
98                                         shares[div_index] = { share_number, parts };
99                                 }
100                         }
101                 }
102         }       
103         if (string!=''){
104                 var clone=div.cloneNode(true);
105                 var inputs=clone.getElementsByTagName('input');
106                 for (var j=0; j<inputs.length; j++) inputs[j].value='';
107                 div.parentNode.appendChild(clone);
108         }
109         return shares;
110 }
111
112 function gcdD(a,b) { 
113     if (b == 0) return [a, 1, 0]; 
114     else { 
115         var n = Math.floor(a/b), c = a % b, r = gcdD(b,c); 
116         return [r[0], r[2], r[1]-r[2]*n];
117     }
118 }
119
120 function modInverse(k) { 
121     k = k % prime;
122     var r = (k < 0) ? -gcdD(prime,-k)[2] : gcdD(prime,k)[2];
123     return (prime + r) % prime;
124 }
125
126 function join(shares) {
127     var sum = 0;
128     
129     for(j = 0; j < shares.length; j++) {
130         var numerator = 1;
131         var denominator = 1;
132         for(m = 0; m < shares.length; m++) {
133             if(j == m) continue; // If not the same value
134             numerator = (numerator * shares[m].share_number) % prime;
135             denominator = (denominator * (shares[m].share_number - shares[j].share_number)) % prime;
136         }
137         sum = (prime + sum + (shares[j].share * numerator * modInverse(denominator))) % prime;
138     }
139     
140     return sum;
141 }
142
143 function decode(){
144         var shares_list=collect(); // fetch shares
145         var codeCount=null;
146         for (var i=0; i<shares_list.length; i++) {
147                 if (codeCount == null){         
148                         codeCount = shares_list[i].parts.length;
149                 } else {
150                         codeCount=Math.min(shares_list[i].parts.length,codeCount);
151                 }               
152         }
153         
154         var ascii=document.getElementById('ascii');
155         ascii.innerHTML='ascii: ';
156         result.innerHTML='Passphrase: ';
157         
158         
159         for (var codeIndex = 0; codeIndex<codeCount; codeIndex++){
160                 shares_for_code = [];
161                 for (var share_index=0; share_index<shares_list.length; share_index++){
162                         var share_number = shares_list[share_index].share_number;
163                         var share = shares_list[share_index].parts[codeIndex];
164                         shares_for_code[share_index] = { share_number, share };
165                 }
166                 
167                 var code = join(shares_for_code);
168                 ascii.innerHTML += code+' ';
169                 result.innerHTML+= String.fromCharCode(code);
170                 
171         }
172 }
173
174 function secret2numbers(string){
175         var string_pos,share_number,coef,char_code,x,sum;
176         var number_of_shares = valueOfField('shares');
177         var treshold             = valueOfField('treshold');
178         var results = [];
179         
180         // create table elements for displaying the shares
181         var char_cells      = createElement('th','char');;
182         var char_code_cells = createElement('th','ascii');;
183         
184         // decompose string, for each character create secrets from asccii code
185         for (string_pos=0; string_pos<string.length;string_pos++) {
186                 char_code        = string.charCodeAt(string_pos);
187                 char_cells      += createElement('td',string[string_pos]);
188                 char_code_cells += createElement('td',char_code);
189                 
190                 results[string_pos] = split(char_code,number_of_shares,treshold);
191         }       
192         
193         var code=createElement('tr',char_cells)+createElement('tr',char_code_cells);
194         var pages=getElement('pages');
195         var explanation=valueOfField('explanation').replace('%n',valueOfField('treshold')).replace(/\n/g,'<br/>');
196         pages.innerHTML='';
197         for (share_number=0;share_number<number_of_shares;share_number++){
198                 var line=createElement('th','share '+(share_number+1));
199                 var page='';
200                 for (string_pos=0;string_pos<string.length;string_pos++){
201                         line+=createElement('td',results[string_pos][share_number]);
202                         page+=createElement('span',results[string_pos][share_number]);
203                 }
204                 code+=createElement('tr',line);         
205                 pages.innerHTML+=createElement('div',  createElement('p',explanation)+createElement('p','Your share number: '+(share_number+1))+createElement('p',page)   );    
206         }
207         setHtmlOf('tab',code);
208         return char_code;
209 }
210 </script>
211 </head>
212 <body>
213         <fieldset>
214                 <legend>Decode secret from shares</legend>
215                 <div>
216                         <div class="share">
217                                 Share #<input class="num" value="1" />: <input class="code" onkeyup="decode();"/>
218                         </div>
219                 </div>          
220                 <p id="ascii"></p>
221                 <p id="result"></p>
222         </fieldset>
223         <fieldset>
224                 <legend>Create shares from secret</legend>
225                 Explanation to add:<br/>                
226                 <textarea id="explanation" name="explanation">
227 This document is a PART of a secret passphrase. At least %n of these secret parts are required to reconstruct the original passphrase.
228 In the event of (enter condition here), you may meet with other secret-part holders to unite your keys.
229
230 To obtain the secret phassphrase:
231 <ol>
232         <li>collect at least %n secret shares</li>
233         <li>go to [url of this page]</li>
234         <li>enter the share number and the respective numbers separated by spaces</li>
235 </ol>
236 The passphrase obtained will give you access to [insert description of secured thing here...].
237
238 [More instructions]
239
240 Info: These secrets were generated using the "Shamir's Secret Sharing" algorithm.
241                 </textarea><br/>
242                 Passphrase parts to generate: <input id="shares" value="5" /></br>
243                 Minimum nuber of shares required to recreate secret: <input id="treshold" value="3" /></br>
244                 Secret: <input name="secret" onkeyup="secret2numbers(this.value);" />
245                 <table id="tab"></table>
246                 <ol>
247                 <li>Set the explanation you want.</li>
248                 <li>Enter the number of parts and shares you wish.</li>
249                 <li>Enter your secret passphrase</li>
250                 <li>Hit Ctrl+P or go to print via the menu</li>
251                 </ol>
252         </fieldset>
253         <div id="pages"></div>
254 </body>
255 </html>