Verified Commit f0d53617 authored by Sheogorath's avatar Sheogorath 🌪

Improve PGPme safty by hiding form fields until crypto worked

After some testing with endusers it turned out that there are browsers
where OpenPGPjs doesn't work. (This is documented, I just decided to
ignore that.) This resulted in a plaintext mail sent to me, which is
definitely against the purpose of this page. Therefore I added a
failsafe mode that prevents such user error by hiding the form fields
until the JS could verify that the crypto operations work. Additionally
when any error appears, the entire from is hidden and replaced by an
error message, which should prevent such a behavior in future.
parent 84335dcb
Pipeline #480 passed with stages
in 12 minutes and 2 seconds
......@@ -60,6 +60,10 @@ pre.highlight code,
border-radius:100%;
}
// PGPme project CSS
// Organize setup of form fields
.pgpme textarea {
width: 100%;
height: 20vh;
......@@ -67,10 +71,20 @@ pre.highlight code,
resize: vertical;
}
.pgpme .results {
.pgpme form {
margin-bottom: 4vh;
}
// Initial state hiding all form fields to prevent user errors
.pgpme .error_message {
display: none;
}
.pgpme form {
margin-bottom: 4vh;
.pgpme #pgpme_form {
display: none;
}
.pgpme .results {
display: none;
}
......@@ -11,25 +11,28 @@ sitemap:
const openpgp = window.openpgp
openpgp.initWorker({ path:'/js/openpgp.worker.min.js' }) // set the relative web worker path
let pubkey = ""
openpgp.initWorker({ path:'/js/openpgp.worker.min.js' })
$.get("/openpgp/0xFCB98C2A3EC6F601.txt", {} ,null, "text")
.done(data => {
pubkey = data
$( "#pgpme_form" ).submit(async function( event ) {
const text = $('#pgpme_textfield').val()
const publicKey = await openpgp.key.readArmored(pubkey)
const options = {
message: openpgp.message.fromText(text),
publicKeys: publicKey.keys
}
.done(async pubkey => {
const publicKey = await openpgp.key.readArmored(pubkey)
if (!await workingCrypto(publicKey)) {
failsafeMode()
return
}
$(".pgpme .loading").hide()
$(".pgpme #pgpme_form").show()
$("#pgpme_form").submit(async event => {
const text = $('#pgpme_textfield').val()
openpgp.encrypt(options).then(ciphertext => {
encrypted = ciphertext.data
$("#pgpme_result").text(encrypted)
$(".pgpme .results").show()
encrypted = ciphertext.data
$("#pgpme_result").text(encrypted)
$(".pgpme .results").show()
}).catch(error => {
console.error(error);
failsafeMode()
event.preventDefault();
})
event.preventDefault();
});
......@@ -38,11 +41,32 @@ $.get("/openpgp/0xFCB98C2A3EC6F601.txt", {} ,null, "text")
console.error(error)
});
$("#pgpme_mailto").click(() => {
const subject = encodeURIComponent("Encrypted email from PGPME")
const body = encodeURIComponent($("#pgpme_result").text())
window.location.href = `mailto:blog-pgpme@sheogorath.shivering-isles.com?subject=${subject}&body=${body}`;
})
async function workingCrypto(publicKey) {
try {
const options = {
message: openpgp.message.fromText("Test message"),
publicKeys: publicKey.keys
}
const ciphertext = await openpgp.encrypt(options);
return /BEGIN PGP MESSAGE/.test(ciphertext.data)
} catch (err) {
console.error(err)
return false
}
}
function failsafeMode() {
// go back to failsafe mode, hide everything except of the error message.
$(".pgpme .error_message").show()
$(".pgpme .results").hide()
$(".pgpme #pgpme_form").hide()
$(".pgpme .loading").hide()
}
......@@ -13,6 +13,9 @@ This page can be used to easily send me OpenPGP encrypted emails :)
4. Send the email to `blog@sheogorath.shivering-isles.com` or the email address that is pre-filled.
<div class="pgpme">
<div class="loading">
<p>Loading and testing the crypto. If this doesn't go away, we can't run OpenPGP in your browser. In this case, please follow the <a href="https://emailselfdefense.fsf.org/">FSF Guide</a> to send me emails.</p>
</div>
<form id="pgpme_form">
<div>
<textarea id="pgpme_textfield"></textarea>
......@@ -23,6 +26,7 @@ This page can be used to easily send me OpenPGP encrypted emails :)
<pre id="pgpme_result"></pre>
<button id="pgpme_mailto">Open in mail app</button>
</div>
<div class="error_message">Something went wrong, you can't encrypt right now. Please follow the <a href="https://emailselfdefense.fsf.org/">FSF Guide</a> to send me emails.</div>
</div>
*This page is using [OpenPGPjs](https://openpgpjs.org/)*
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment