You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
8.2 KiB
292 lines
8.2 KiB
<!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" data-dojo-config="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> |