Encrypt html form data by custom encryption

Question

I have an html form of login information I want to encrypt by custom rules on client side . Is there have any way to do that.

<form action="/submit" method="post" name="form_pass_enc" id="form_pass_enc">
  <label for="name">Name:</label>
  <input type="input" name="name" id="name" />
  <br/>
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" />
  <br/>
  <input type="button" name="form_submit" id="form_submit" value="Submit" />
</form>

I did not find proper solution for that .

It is not clear at all what you mean by encrypt. When sending the data? — mplungjan
– mplungjan, Commented Jun 28, 2017 at 12:48
Encrypting your given data by custom rules is a huge security flaw and it will make your encryption pointless. Don't do it unless you're a seasoned cryptographic professional and you're using a system that has been tested extensively by other seasoned cryptographic professionals. — Mm-Art-In
– Mm-Art-In, Commented Jun 28, 2017 at 12:49
if you are not using https (which would do it for you automatically), stay aware that encryption on the client side will expose all the details of your crypting method, because the code is visible — Kaddath
– Kaddath, Commented Jun 28, 2017 at 12:50
You can encrypt data client-side by writing JavaScript which encrypts the data. But be aware that users can still see the unencrypted data and the code which is encrypting it. So you're not really accomplishing anything. What actual problem are you trying to solve here? In almost every case, attempting to create your own security instead of using industry standards is a terrible idea. — David
– David, Commented Jun 28, 2017 at 12:50
It may well be easier and simply safer for you to use HTTPS because that's exactly what it does; encrypts your website and the data within it, when it is transported to and from the client side. — Mm-Art-In
– Mm-Art-In, Commented Jun 28, 2017 at 13:00

Joel Bondurant · Accepted Answer · 2019-10-26 01:56:45Z

From encrypt/decrypt functions built around crypto.subtle.encrypt/decrypt, here is a summary solution.

The function to encrypt forms:

async function encryptedSubmitForm(formName) {
    form = document.forms[formName];
    form_types = [];
    for (idx=0; idx < form.elements.length; idx += 1) {
        dtype = form.elements[idx].type
        form_types.push(dtype)
        form.elements[idx].type = "text"
        form.elements[idx].value = await encrypt(form.elements[idx].value, ekey());
        await sleep(8);
    }
    form.submit();
    for (idx=0; idx < form.elements.length; idx += 1) {
        await sleep(8);
        form.elements[idx].type = form_types[idx];
        form.elements[idx].value = await decrypt(form.elements[idx].value, ekey());
    }
}

The form "submit" button does the submit explicitly from js:

<input type="button" onclick="encryptedSubmitForm('new')" value="+">

The form data types don't have to be flipped, I'm still considering using fetch directly, but it gives a nice visual clarity of what's going on to see it in action. If you don't flip the form data types, the data gets dropped.

On the decryption side of the story, I've got tables with fields like this followed with a page script to call decryptElements():

<td class="encrypted">{{prow.datebin}}</td>
...
<script>
    decryptElements();
</script>

And lastly here is the e2ee decryption:

async function decryptElements() {
    cts = document.getElementsByClassName("encrypted");
    for (ct of cts) {
        await sleep(16)
        ct.textContent = await decrypt(ct.textContent, ekey());
    }
}

Security concerns run amok, this presumes SSL, and is in addition to server side encryption, not as an alternative. Cross origin local storage leakage could happen. Omit or pin any external dependency with integrity checks:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bitcoinjs-lib/0.2.0-1/bitcoinjs-min.js" integrity="sha256-FilB5ir32toR4c80H4e31Wzh7MbA0kOd/LzvRxgletA=" crossorigin="anonymous"></script>

lee · Accepted Answer · 2017-06-28 12:59:57Z

0

every encryption on the client side is not a good idea. Because it can be seen and changed. or if you just want to match some rules like telephone rules,you can try some RegExp in javascript

answered Jun 28, 2017 at 12:59

lee

213 bronze badges

Collectives™ on Stack Overflow

Encrypt html form data by custom encryption

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related