Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
 
3 
<html>
4 
	<head>
5 
	    <script type="text/javascript"
6 
	            src="../../../../dojo/dojo.js" djConfig="isDebug: false"></script>
7 
		<script type="text/javascript" src="../../../../dojox/off/offline.js"></script>
8 
 
9 
		<style type="text/css">
10 
			body{
11 
				padding: 2em;
12 
			}
13 
 
14 
			#dataTable{
15 
				margin-top: 2em;
16 
			}
17 
 
18 
			button{
19 
				margin-left: 1em;
20 
			}
21 
 
22 
			th, tr, td{
23 
				text-align: left;
24 
			}
25 
 
26 
			table{
27 
				text-align: center;
28 
				clear: both;
29 
			}
30 
 
31 
			#cryptoContainer{
32 
				float: left;
33 
				width: 60%;
34 
			}
35 
 
36 
			#numRowsContainer{
37 
				float: right;
38 
				width: 40%;
39 
			}
40 
 
41 
			#numRowsContainer input{
42 
				margin-left: 1.5em;
43 
				width: 5em;
44 
			}
45 
 
46 
			.table-columns{
47 
				font-weight: bold;
48 
			}
49 
		</style>
50 
 
51 
		<script>
52 
			dojo.require("dojox.sql");
53 
 
54 
			dojo.connect(window, "onload", function(){
55 
				// draw our customer table on the screen
56 
				createTable();
57 
 
58 
				// create our customer table in the database
59 
				dojox.sql("DROP TABLE IF EXISTS CUSTOMERS");
60 
				dojox.sql("CREATE TABLE CUSTOMERS ("
61 
								+ "last_name TEXT, "
62 
								+ "first_name TEXT, "
63 
								+ "social_security TEXT"
64 
								+ ")"
65 
							);
66 
			});
67 
 
68 
			function createTable(){
69 
				// get number of rows to create
70 
				var NUM_ROWS = document.getElementById("numRows").value;
71 
				if(!NUM_ROWS){
72 
					alert("Please enter the number of "
73 
							+ "customer rows the table should have");
74 
					return;
75 
				}
76 
 
77 
				var table = document.getElementById("dataTable");
78 
				if(table){
79 
					table.parentNode.removeChild(table);
80 
				}
81 
 
82 
				table = document.createElement("table");
83 
				table.setAttribute("id", "dataTable");
84 
				table.setAttribute("border", 1);
85 
 
86 
				// if we don't use IE's craptacular proprietary table methods
87 
				// we get strange display glitches
88 
				var tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
89 
				tr.className = "table-columns";
90 
				var th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
91 
				th.appendChild(document.createTextNode("Last Name"));
92 
				if(!dojo.isIE){
93 
					tr.appendChild(th);
94 
				}
95 
				th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
96 
				th.appendChild(document.createTextNode("First Name"));
97 
				if(!dojo.isIE){
98 
					tr.appendChild(th);
99 
				}
100 
				th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
101 
				th.appendChild(document.createTextNode("Social Security"));
102 
				if(!dojo.isIE){
103 
					tr.appendChild(th);
104 
 
105 
					table.appendChild(tr);
106 
				}
107 
 
108 
				for(var i = 1; i <= NUM_ROWS; i++){
109 
					tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
110 
					tr.className = "data-item";
111 
 
112 
					var elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
113 
					elem.className = "last-name";
114 
					var lastName = "Doe" + i;
115 
					elem.appendChild(document.createTextNode(lastName));
116 
					if(!dojo.isIE){
117 
						tr.appendChild(elem);
118 
					}
119 
 
120 
					elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
121 
					elem.className = "first-name";
122 
					var firstName = "John" + i;
123 
					elem.appendChild(document.createTextNode(firstName));
124 
					if(!dojo.isIE){
125 
						tr.appendChild(elem);
126 
					}
127 
 
128 
					elem = elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
129 
					elem.className = "social-security";
130 
					var ss = 513121500 + i;
131 
					ss = new String(ss);
132 
					ss = ss.slice(0, 3) + "-" + ss.slice(3, 5) + "-" + ss.slice(5);
133 
					elem.appendChild(document.createTextNode(ss));
134 
					if(!dojo.isIE){
135 
						tr.appendChild(elem);
136 
 
137 
						table.appendChild(tr);
138 
					}
139 
				}
140 
 
141 
				document.body.appendChild(table);
142 
 
143 
				// reset button state
144 
				dojo.byId("encrypt").disabled = false;
145 
				dojo.byId("decrypt").disabled = true;
146 
			}
147 
 
148 
			function readTable(){
149 
				var data = [];
150 
				var rows = dojo.query(".data-item");
151 
				dojo.forEach(rows, function(row){
152 
					var td = row.getElementsByTagName("td");
153 
 
154 
					var lastName = td[0].childNodes[0].nodeValue;
155 
					var firstName = td[1].childNodes[0].nodeValue;
156 
					var ssNumber = td[2].childNodes[0].nodeValue;
157 
 
158 
					data.push({lastName: lastName, firstName: firstName, ssNumber: ssNumber,
159 
								toString: function(){
160 
									return "{lastName: " + lastName
161 
												+ ", firstName: " + firstName
162 
												+ ", ssNumber: " + ssNumber
163 
												+ "}";
164 
								}});
165 
				});
166 
 
167 
				return data;
168 
			}
169 
 
170 
			function setData(data){
171 
				var rows = document.getElementsByTagName("tr");
172 
				for(var i = 1; i < rows.length; i++){
173 
					var customer = data[i - 1];
174 
					var td = rows[i].getElementsByTagName("td");
175 
					td[2].childNodes[0].nodeValue = customer.social_security;
176 
				}
177 
			}
178 
 
179 
			function encrypt(){
180 
				// disable our buttons
181 
				dojo.byId("encrypt").disabled = true;
182 
				dojo.byId("decrypt").disabled = true;
183 
 
184 
				var data = readTable();
185 
 
186 
				var password = document.getElementById("password").value;
187 
 
188 
				// delete any old data
189 
				dojox.sql("DELETE FROM CUSTOMERS");
190 
 
191 
				// insert new data
192 
				insertCustomers(data, 0, password);
193 
			}
194 
 
195 
			function insertCustomers(data, i, password){
196 
				var nextIndex = i + 1;
197 
 
198 
				if(i >= data.length){
199 
					var savedRows = dojox.sql("SELECT * FROM CUSTOMERS");
200 
					setData(savedRows);
201 
					return;
202 
				}
203 
				dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))",
204 
							data[i].lastName, data[i].firstName,
205 
							data[i].ssNumber,
206 
							password,
207 
							function(results, error, errorMsg){
208 
								// enable our buttons
209 
								dojo.byId("encrypt").disabled = true;
210 
								dojo.byId("decrypt").disabled = false;
211 
 
212 
								if(error == true){
213 
									alert(errorMsg);
214 
									return;
215 
								}
216 
 
217 
								insertCustomers(data, nextIndex, password);
218 
							}
219 
						);
220 
			}
221 
 
222 
			function decrypt(){
223 
				// disable our buttons
224 
				dojo.byId("encrypt").disabled = true;
225 
				dojo.byId("decrypt").disabled = true;
226 
 
227 
				var password = document.getElementById("password").value;
228 
 
229 
				dojox.sql("SELECT last_name, first_name, DECRYPT(social_security) FROM CUSTOMERS",
230 
							password,
231 
							function(results, error, errorMsg){
232 
								// enable our buttons
233 
								dojo.byId("encrypt").disabled = false;
234 
								dojo.byId("decrypt").disabled = true;
235 
 
236 
								if(error == true){
237 
									alert(errorMsg);
238 
									return;
239 
								}
240 
 
241 
								setData(results);
242 
							}
243 
						);
244 
			}
245 
		</script>
246 
	</head>
247 
 
248 
	<body>
249 
		<h1>Dojo SQL Cryptography</h1>
250 
 
251 
		<h2>Instructions</h2>
252 
 
253 
		<p>This demo shows Dojo Offline's SQL encryption technologies. In the table below, we have a
254 
			sample SQL table that has three columns of data: a last name, a first name, and
255 
			a social security number. We don't want to store the social security numbers
256 
			in the clear, just in case they are downloaded for offline use to a laptop and the
257 
			laptop is stolen.</p>
258 
 
259 
		<p>To use this demo, enter a password and press the ENCRYPT button to see the Social Security column encrypt. Enter
260 
			the same password and press DECRYPT to see it decrypt. If you enter an incorrect password and
261 
			press DECRYPT, the Social Security column will remain encrypted and only show gibberish.</p>
262 
 
263 
		<p>Under the covers we use 256-bit AES encryption and your password to derive the crypto key; we use
264 
			a facility in Google Gears to do the cryptography in such a way that the browser does not lock up
265 
			during processing. Dojo Offline ties this cryptography into Dojo SQL, providing convenient ENCRYPT()
266 
			and DECRYPT() SQL keywords you can use to easily have this functionality in your
267 
			own offline applications. To learn how you can use this feature
268 
			<a href="http://docs.google.com/View?docid=dhkhksk4_8gdp9gr#crypto" target="_blank">see here</a>.</p>
269 
 
270 
		<div id="cryptoContainer">
271 
			<label for="password">
272 
				Password:
273 
			</label>
274 
 
275 
			<input type="input" name="password" id="password" value="sample_password">
276 
 
277 
			<button id="encrypt" onclick="window.setTimeout(encrypt, 1)">Encrypt</button>
278 
 
279 
			<button id="decrypt" onclick="window.setTimeout(decrypt, 1)" disabled="true">Decrypt</button>
280 
		</div>
281 
 
282 
		<div id="numRowsContainer">
283 
			<label for="numRows">
284 
				Number of Customer Rows in Table:
285 
			</label>
286 
 
287 
			<input id="numRows" type="input" value="30">
288 
 
289 
			<button onclick="createTable()">Update</button>
290 
		</div>
291 
	</body>
292 
</html>