mirror of
https://github.com/Luzifer/wasm-openssl.git
synced 2024-11-08 23:00:11 +00:00
132 lines
3.6 KiB
HTML
132 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<title>Luzifer / wasm-openssl - DEMO</title>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/bootstrap-vue@2.0.0-rc.28/dist/bootstrap-vue.min.css,npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
|
|
|
|
<div id="app">
|
|
<b-container>
|
|
<b-row class="mt-3">
|
|
<b-col class="text-center">
|
|
|
|
<h1 class="mb-3">Luzifer / wasm-openssl - DEMO</h1>
|
|
|
|
<b-alert
|
|
:show="!loaded"
|
|
variant="primary"
|
|
>
|
|
Loading WASM... (If this message persists check console for errors!)
|
|
</b-alert>
|
|
|
|
<b-alert
|
|
:show="error !== ''"
|
|
variant="danger"
|
|
>
|
|
{{ error }}
|
|
</b-alert>
|
|
|
|
<template v-if="loaded">
|
|
<b-form-input
|
|
v-model="passphrase"
|
|
class="mb-2"
|
|
placeholder="Put a passphrase here..."
|
|
></b-form-input>
|
|
|
|
<b-form-textarea
|
|
class="mb-2"
|
|
rows="3"
|
|
max-rows="10"
|
|
placeholder="Enter plaintext here..."
|
|
v-model="plaintext"
|
|
></b-form-textarea>
|
|
|
|
<b-button variant="primary" @click="encrypt" :disabled="!passphrase || !plaintext">Encrypt plaintext...</b-button>
|
|
<b-button @click="decrypt" :disabled="!passphrase || !ciphertext">Decrypt ciphertext...</b-button>
|
|
|
|
<b-form-textarea
|
|
class="mt-2"
|
|
rows="3"
|
|
max-rows="10"
|
|
placeholder="Paste ciphertext here..."
|
|
v-model="ciphertext"
|
|
></b-form-textarea>
|
|
</template>
|
|
|
|
</b-col>
|
|
</b-row>
|
|
</b-container>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/combine/npm/vue@2.6.10,npm/bootstrap-vue@2.0.0-rc.28/dist/bootstrap-vue.min.js"></script>
|
|
<script src="wasm_exec.js"></script>
|
|
<script>
|
|
// Define callback to be executed when openssl.wasm was initialized
|
|
function opensslLoaded() {
|
|
app.$data.loaded = true
|
|
}
|
|
|
|
const app = new Vue({
|
|
data: {
|
|
ciphertext: '',
|
|
error: '',
|
|
loaded: false,
|
|
passphrase: '',
|
|
plaintext: '',
|
|
},
|
|
|
|
el: '#app',
|
|
|
|
methods: {
|
|
decrypt() {
|
|
OpenSSL.decrypt(this.ciphertext, this.passphrase, (plaintext, err) => {
|
|
if (err) {
|
|
this.error = err
|
|
return
|
|
}
|
|
|
|
this.plaintext = plaintext
|
|
this.error = ''
|
|
})
|
|
},
|
|
|
|
encrypt() {
|
|
OpenSSL.encrypt(this.plaintext, this.passphrase, (ciphertext, err) => {
|
|
if (err) {
|
|
this.error = err
|
|
return
|
|
}
|
|
|
|
this.ciphertext = ciphertext
|
|
this.error = ''
|
|
})
|
|
},
|
|
|
|
initWASM() {
|
|
if (!WebAssembly.instantiateStreaming) { // polyfill
|
|
WebAssembly.instantiateStreaming = async (resp, importObject) => {
|
|
const source = await (await resp).arrayBuffer()
|
|
return await WebAssembly.instantiate(source, importObject)
|
|
}
|
|
}
|
|
|
|
const go = new Go()
|
|
let mod, inst
|
|
|
|
WebAssembly.instantiateStreaming(fetch("openssl.wasm"), go.importObject)
|
|
.then(result => go.run(result.instance))
|
|
.catch(err => {
|
|
this.error = err
|
|
})
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.initWASM()
|
|
},
|
|
|
|
})
|
|
</script>
|
|
</html>
|