2.2. Using SafeQuard in Browser¶
This section explains how to use the SafeQuard_enc() function to encrypt user-provided data.
More details on the SafeQuard functions can be found in the Existing Functions and Flow diagram.
2.2.1. Step 1: Include the SafeQuard Module¶
First, add the SafeQuard.js file to your webpage by including it in a <script> tag. This will load the module into the browser.
Replace https://<SafeQuard-app-service-url> with the actual URL of the file server hosting the SafeQuard.js, refer to the SafeQuard File Server section for more details.
<script src="https://<SafeQuard-app-service-url>/SafeQuard.js"></script>
2.2.2. Step 2: Implement Encryption Logic¶
In your JavaScript code, you can define an asynchronous function, SafeQuard_enc(), to handle encryption. This function accepts input from an HTML element (such as a text input), encrypts the plaintext using the SafeQuard module, and then outputs the encrypted result to a JavaScript object.
The following snippet provides a simple reference on using the encryption function.
<script>
// Call SafeQuard_enc() when the user clicks the "Encrypt" button.
async function SafeQuard_enc() {
// Get input text from HTML element
let text = document.getElementById("mydata");
// This is for text input. If you are using a file input, you can read the file as an ArrayBuffer.
// This step is optional and can be skipped if the input is already in a suitable format
// for encryption.
// The SafeQuard encryption function expects the input data to be in a specific format.
// For example, it may require the input to be in Standard Base64 format.
// This step converts the input text to a Standard Base64 string.
var base64_text = btoa(text.value);
// This is an example of how to read a file/image as an ArrayBuffer and convert it to a Standard Base64 string.
const reader = new FileReader();
reader.readAsArrayBuffer(text.value);
const bytes = new Uint8Array(reader.result);
let byteArray = "";
for (var i = 0; i < bytes.length; i++) {
byteArray += String.fromCharCode(bytes[i]);
}
var base64_text = btoa(byteArray);
// Call the encryption function pQCee_SafeQuard_enc() with the following arguments:
// - Internal encryption function: 'pQCee_SafeQuard_enc'
// - Return type of encryption function: 'string'
// - Data types of input arguments for plaintext and key: ['string', 'string']
// - Input text (from the 'mydata' element): base64_text
// - Encryption key: "5dfa..c49b"
let result = Module.ccall('pQCee_SafeQuard_enc',
'string',
['string', 'string'],
[base64_text, "5dfa..c49b"]);
document.getElementById("encdata").value = result; // Set encrypted value in output
}
</script>
2.2.3. Example Use Case¶
<!DOCTYPE html>
<html>
<head>
<script src="https://<SafeQuard-app-service-url>/SafeQuard.js"></script>
<script>
async function SafeQuard_enc() {
var text = document.getElementById("mydata");
var result = Module.ccall('pQCee_SafeQuard_enc', 'string', ['string', 'string'], [base64_text, "key"]);
document.getElementById("encdata").value = result;
}
</script>
</head>
<body>
<h1>SafeQuard Encryption Example</h1>
<textarea id="mydata" placeholder="Enter text to encrypt"></textarea>
<textarea id="encdata" placeholder="Encrypted data will appear here"></textarea>
<button onclick="SafeQuard_enc()">Encrypt</button>
</body>
</html>
2.2.4. Notes¶
The encryption function, pQCee_SafeQuard_enc, currently uses a fixed key (“key”) in this example. This should be replaced with a secure key management approach for real-world applications.
Ensure that the SafeQuard module (SafeQuard.js) is loaded before attempting to use the Module.ccall function.