New file |
0,0 → 1,292 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
<html> |
<head> |
<script type="text/javascript" |
src="../../../../dojo/dojo.js" djConfig="isDebug: false"></script> |
<script type="text/javascript" src="../../../../dojox/off/offline.js"></script> |
|
<style type="text/css"> |
body{ |
padding: 2em; |
} |
|
#dataTable{ |
margin-top: 2em; |
} |
|
button{ |
margin-left: 1em; |
} |
|
th, tr, td{ |
text-align: left; |
} |
|
table{ |
text-align: center; |
clear: both; |
} |
|
#cryptoContainer{ |
float: left; |
width: 60%; |
} |
|
#numRowsContainer{ |
float: right; |
width: 40%; |
} |
|
#numRowsContainer input{ |
margin-left: 1.5em; |
width: 5em; |
} |
|
.table-columns{ |
font-weight: bold; |
} |
</style> |
|
<script> |
dojo.require("dojox.sql"); |
|
dojo.connect(window, "onload", function(){ |
// draw our customer table on the screen |
createTable(); |
|
// create our customer table in the database |
dojox.sql("DROP TABLE IF EXISTS CUSTOMERS"); |
dojox.sql("CREATE TABLE CUSTOMERS (" |
+ "last_name TEXT, " |
+ "first_name TEXT, " |
+ "social_security TEXT" |
+ ")" |
); |
}); |
|
function createTable(){ |
// get number of rows to create |
var NUM_ROWS = document.getElementById("numRows").value; |
if(!NUM_ROWS){ |
alert("Please enter the number of " |
+ "customer rows the table should have"); |
return; |
} |
|
var table = document.getElementById("dataTable"); |
if(table){ |
table.parentNode.removeChild(table); |
} |
|
table = document.createElement("table"); |
table.setAttribute("id", "dataTable"); |
table.setAttribute("border", 1); |
|
// if we don't use IE's craptacular proprietary table methods |
// we get strange display glitches |
var tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr"); |
tr.className = "table-columns"; |
var th = (dojo.isIE) ? tr.insertCell() : document.createElement("th"); |
th.appendChild(document.createTextNode("Last Name")); |
if(!dojo.isIE){ |
tr.appendChild(th); |
} |
th = (dojo.isIE) ? tr.insertCell() : document.createElement("th"); |
th.appendChild(document.createTextNode("First Name")); |
if(!dojo.isIE){ |
tr.appendChild(th); |
} |
th = (dojo.isIE) ? tr.insertCell() : document.createElement("th"); |
th.appendChild(document.createTextNode("Social Security")); |
if(!dojo.isIE){ |
tr.appendChild(th); |
|
table.appendChild(tr); |
} |
|
for(var i = 1; i <= NUM_ROWS; i++){ |
tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr"); |
tr.className = "data-item"; |
|
var elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td"); |
elem.className = "last-name"; |
var lastName = "Doe" + i; |
elem.appendChild(document.createTextNode(lastName)); |
if(!dojo.isIE){ |
tr.appendChild(elem); |
} |
|
elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td"); |
elem.className = "first-name"; |
var firstName = "John" + i; |
elem.appendChild(document.createTextNode(firstName)); |
if(!dojo.isIE){ |
tr.appendChild(elem); |
} |
|
elem = elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td"); |
elem.className = "social-security"; |
var ss = 513121500 + i; |
ss = new String(ss); |
ss = ss.slice(0, 3) + "-" + ss.slice(3, 5) + "-" + ss.slice(5); |
elem.appendChild(document.createTextNode(ss)); |
if(!dojo.isIE){ |
tr.appendChild(elem); |
|
table.appendChild(tr); |
} |
} |
|
document.body.appendChild(table); |
|
// reset button state |
dojo.byId("encrypt").disabled = false; |
dojo.byId("decrypt").disabled = true; |
} |
|
function readTable(){ |
var data = []; |
var rows = dojo.query(".data-item"); |
dojo.forEach(rows, function(row){ |
var td = row.getElementsByTagName("td"); |
|
var lastName = td[0].childNodes[0].nodeValue; |
var firstName = td[1].childNodes[0].nodeValue; |
var ssNumber = td[2].childNodes[0].nodeValue; |
|
data.push({lastName: lastName, firstName: firstName, ssNumber: ssNumber, |
toString: function(){ |
return "{lastName: " + lastName |
+ ", firstName: " + firstName |
+ ", ssNumber: " + ssNumber |
+ "}"; |
}}); |
}); |
|
return data; |
} |
|
function setData(data){ |
var rows = document.getElementsByTagName("tr"); |
for(var i = 1; i < rows.length; i++){ |
var customer = data[i - 1]; |
var td = rows[i].getElementsByTagName("td"); |
td[2].childNodes[0].nodeValue = customer.social_security; |
} |
} |
|
function encrypt(){ |
// disable our buttons |
dojo.byId("encrypt").disabled = true; |
dojo.byId("decrypt").disabled = true; |
|
var data = readTable(); |
|
var password = document.getElementById("password").value; |
|
// delete any old data |
dojox.sql("DELETE FROM CUSTOMERS"); |
|
// insert new data |
insertCustomers(data, 0, password); |
} |
|
function insertCustomers(data, i, password){ |
var nextIndex = i + 1; |
|
if(i >= data.length){ |
var savedRows = dojox.sql("SELECT * FROM CUSTOMERS"); |
setData(savedRows); |
return; |
} |
dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))", |
data[i].lastName, data[i].firstName, |
data[i].ssNumber, |
password, |
function(results, error, errorMsg){ |
// enable our buttons |
dojo.byId("encrypt").disabled = true; |
dojo.byId("decrypt").disabled = false; |
|
if(error == true){ |
alert(errorMsg); |
return; |
} |
|
insertCustomers(data, nextIndex, password); |
} |
); |
} |
|
function decrypt(){ |
// disable our buttons |
dojo.byId("encrypt").disabled = true; |
dojo.byId("decrypt").disabled = true; |
|
var password = document.getElementById("password").value; |
|
dojox.sql("SELECT last_name, first_name, DECRYPT(social_security) FROM CUSTOMERS", |
password, |
function(results, error, errorMsg){ |
// enable our buttons |
dojo.byId("encrypt").disabled = false; |
dojo.byId("decrypt").disabled = true; |
|
if(error == true){ |
alert(errorMsg); |
return; |
} |
|
setData(results); |
} |
); |
} |
</script> |
</head> |
|
<body> |
<h1>Dojo SQL Cryptography</h1> |
|
<h2>Instructions</h2> |
|
<p>This demo shows Dojo Offline's SQL encryption technologies. In the table below, we have a |
sample SQL table that has three columns of data: a last name, a first name, and |
a social security number. We don't want to store the social security numbers |
in the clear, just in case they are downloaded for offline use to a laptop and the |
laptop is stolen.</p> |
|
<p>To use this demo, enter a password and press the ENCRYPT button to see the Social Security column encrypt. Enter |
the same password and press DECRYPT to see it decrypt. If you enter an incorrect password and |
press DECRYPT, the Social Security column will remain encrypted and only show gibberish.</p> |
|
<p>Under the covers we use 256-bit AES encryption and your password to derive the crypto key; we use |
a facility in Google Gears to do the cryptography in such a way that the browser does not lock up |
during processing. Dojo Offline ties this cryptography into Dojo SQL, providing convenient ENCRYPT() |
and DECRYPT() SQL keywords you can use to easily have this functionality in your |
own offline applications. To learn how you can use this feature |
<a href="http://docs.google.com/View?docid=dhkhksk4_8gdp9gr#crypto" target="_blank">see here</a>.</p> |
|
<div id="cryptoContainer"> |
<label for="password"> |
Password: |
</label> |
|
<input type="input" name="password" id="password" value="sample_password"> |
|
<button id="encrypt" onclick="window.setTimeout(encrypt, 1)">Encrypt</button> |
|
<button id="decrypt" onclick="window.setTimeout(decrypt, 1)" disabled="true">Decrypt</button> |
</div> |
|
<div id="numRowsContainer"> |
<label for="numRows"> |
Number of Customer Rows in Table: |
</label> |
|
<input id="numRows" type="input" value="30"> |
|
<button onclick="createTable()">Update</button> |
</div> |
</body> |
</html> |