2016-07-09 62 views
0

我想在發送之前使用PGP JavaScript API加密表單。 PGP部分可以工作,但表單不會發送表單字段的js-modified值。表單沒有獲取更新的字段值

這裏是JavaScript:

<script> 
     function encryptForm() { 
      var password = document.getElementById("form_password"); 
      var email = document.getElementById("form_email"); 

      email.setAttribute("type", "hidden"); 
      password.setAttribute("maxlength", "2000"); 
      password.setAttribute("type", "hidden"); 

      var form = document.forms[index]; 
      var password = form.elements["password"]; 
      var email = form.elements["password"]; 

      encrypt(email.value).then(function(encrypted_msg) { 
        email.value = encrypted_msg; 
      }); 
      encrypt(password.value).then(function(encrypted_msg) { 
        password.value = encrypted_msg; 
      }); 

      form.submit(); 

      return true; 
     } 

     function encrypt(msg) { 
      if (msg.indexOf("-----BEGIN PGP MESSAGE-----") !== -1 && msg.indexOf("-----END PGP MESSAGE-----") !== -1) { 
       return msg; 
      } else { 
       var key = `<?php printf($eassec->getPubkey('server')); ?>`; 
       var publicKey = openpgp.key.readArmored(key).keys[0]; 
       return openpgp.encryptMessage(publicKey, msg).then(function(pgpMessage) { 
        return pgpMessage; 
       }); 
      } 
     } 
     </script> 

和表單元素:

<form onSubmit="return encryptForm()" class="EASboxForm" method="post"> 
           <input id="form_email" name="email" type="email" placeholder="email adress" required autofocus> 
           <input id="form_password" name="password" type="password" placeholder="password" maxlength="72" required> 
           <input name="action" type="hidden" value="connect"> 
            <input type="image" class="EASboxFormSend" src="resources/pics/icons/form_continue.svg" alt="Continue"> 
          </form> 

(你可以住在[刪除]測試 - PHP的一部分將顯示一條錯誤消息,如果發數據不是有效的PGP消息,如果一切正確,則散列密碼和電子郵件將顯示)

+0

您可以使用客戶端JavaScript加密,但它不是非常安全。 – gcampbell

+0

當然不會,因爲您在發送之前不等到加密完成。 – vsync

+0

@gcampbell更安全,不使用任何東西 – Squared

回答

2

由於encrypt()是異步功能,因此您必須在提交表單之前等待它完成。您可以使用Promise.all()等待多個承諾完成。

Promise.all([encrypt(email.value).then(function(encrypted_msg) { 
    email.value = encrypted_msg; 
    }), 
    encrypt(password.value).then(function(encrypted_msg) { 
    password.value = encrypted_msg; 
    }) 
]).then(function() { 
    form.submit(); 
}); 

您還需要return falseencryptForm()功能,防止正常的表單提交。

+0

事實上,我可以在該字段中看到加密的數據並不意味着表單有足夠的時間來處理它們? (仍然不起作用) – Squared

+0

不,它沒有。 'form.submit()'立即發生,在任何事情發生變化之前。你所看到的是瀏覽器在等待服務器處理提交時更新顯示。 – Barmar

+0

它仍然發送一切清楚。我複製了你的確切代碼。什麼可能是錯的? :/ – Squared

0

我能看到的是,function encrypt是一個異步函數,根據您的實現。但是javascript的執行流程是自上而下的。當代碼到達提交時,值可能沒有準備好。因此,您可能需要稍微更改程序的流程,如下所示。

encrypt(email.value).then(function(encrypted_msg) { 
    email.value = encrypted_msg; 

    encrypt(password.value).then(function(encrypted_msg) { 
    password.value = encrypted_msg; 

    form.submit(); 
    }); 

}); 
+0

不行,可悲... – Squared

+0

您可以在form.sumbit()中放置一個斷點並在提交表單之前檢查電子郵件和密碼的值 –

+0

如何做到這一點? ^^' – Squared