292 lines
8.2 KiB
HTML
292 lines
8.2 KiB
HTML
|
<!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>
|