Javascript 在使用 AES 发送前加密表单

Question

我正在尝试使用本地 En/Decryption 构建一个日记系统，这样条目只能由使用密码的用户读取，密码不会存储在服务器上。 Crypto 应该使用 Javascript(CryptoJS) 完成，但我必须在发送之前处理 HTML-form 的数据。如果可能的话，由于性能和带宽的原因，应该在没有 JQuery 的情况下完成。因为我对 java 脚本比较陌生，所以我不知道如何在单击提交按钮时操作表单的数据？ :)

var encrypted = CryptoJS.AES.encrypt("Message", "Secret Passphrase");

Answer 1

我不知道为什么您认为 jquery 很慢或给您发送大量数据。但是你可以将任何 jquery 代码转换为正常的 javascript 所以这应该没有问题。我会在 jquery 中给出一些提示，因为我不知道纯 js 中的所有内容，也不会 google 这个给你 :)

$("#submitbutton").click(function(event){
    event.preventDefault(); //Prevent form beeing send
    var allFormDatas = {}; //Object thats stores all form data
    $.each($("#youtform").find("input"),function() { //loop over all inputs in the form
        allFormDatas[$(this).attr("name")] = $(this).val(); //Gets the value from an form element and puts into "allFormDatas"
    });

    var stringForEncryption = JSON.stringify(allFormDatas); //Now we have one long Json string for encryption
    var encrypted = CryptoJS.AES.encrypt(stringForEncryption, "Secret Passphrase");
    //Now use $.post here to send post data to your backend.
});

//Encryption should be 
encrypted>decrypt>parseJson>jsObject

PS：这没有经过测试，不会得到下拉菜单和复选框元素，但我希望你能明白 :)

编辑：更聪明的解决方案...感谢@dandavis：

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  var formString = $( this ).serialize(); // All data in one String.
  var encrypted = CryptoJS.AES.encrypt(formString, "Secret Passphrase");
  //Now use $.post here to send post data to your backend.
});

Javascript 在使用 AES 发送前加密表单

Javascript Encrypt Form before sending with AES

javascript

encryption