如何通过HTML模板将JavaScript变量值传入Golang函数

你搞混了服务器端模板渲染和客户端JavaScript执行的时机：

• Go模板的{{.Encrypt}}函数是在服务器把HTML发送给浏览器之前执行的，这时候客户端的JS还没运行，raw_val根本不是用户输入的密码，只是字符串' + raw_val + '，所以你的Encrypt函数加密的就是这个字符串，自然得到错误结果。

方案1：客户端用JS自己实现加密 #

直接在浏览器里用JS完成密码加密，不用碰服务器端的模板函数。比如用Web Crypto API做哈希（如果是为了传输安全，HTTPS已经足够；如果是为了后续存储，建议服务器端加盐）：

修改后的完整代码：

<!DOCTYPE html>
<html>
<head></head>
<title>Buy Bot</title>
<body>
  <form name="login" action="/login" method="POST" onsubmit="encrypt()">
    <div>
      <label for="username">username:</label>
      <input id="username" type="text" name="username" placeholder={{.KycInfo}} required>
    </div>
    <br>
    <div>
      <label for="password">password:</label>
      <input id="password" type="password" name="password" placeholder="password" required>
    </div>
    <br>
    <div>
      remember me <input id="rememberme" type="checkbox" name="rememberme">
    </div>
    <br>
    <div>
      <input type="submit" value="login">
    </div>
  </form>
</body>
</html>

<script type="text/javascript">
async function encrypt(){
  const rawVal = document.getElementById("password").value;
  console.log("password: ", rawVal);
  
  // 用Web Crypto API生成SHA-256哈希（示例）
  const encoder = new TextEncoder();
  const data = encoder.encode(rawVal);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  
  // 把哈希转成Base64字符串
  const encrypted = btoa(String.fromCharCode(...new Uint8Array(hashBuffer)));
  console.log("encrypted: ", encrypted);
  
  document.login.password.value = encrypted;
  return true;
} 
</script>

方案2：服务器端接收明文后加密 #

如果必须用你写的Go Encrypt函数，那就别在客户端瞎折腾，直接提交明文（必须用HTTPS，不然密码会被截），到服务器端再加密：

客户端代码（去掉加密逻辑） #

<!DOCTYPE html>
<html>
<head></head>
<title>Buy Bot</title>
<body>
  <form name="login" action="/login" method="POST">
    <div>
      <label for="username">username:</label>
      <input id="username" type="text" name="username" placeholder={{.KycInfo}} required>
    </div>
    <br>
    <div>
      <label for="password">password:</label>
      <input id="password" type="password" name="password" placeholder="password" required>
    </div>
    <br>
    <div>
      remember me <input id="rememberme" type="checkbox" name="rememberme">
    </div>
    <br>
    <div>
      <input type="submit" value="login">
    </div>
  </form>
</body>
</html>

服务器端Go代码片段 #

func loginHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method != http.MethodPost {
        http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
        return
    }

    // 解析表单数据
    if err := r.ParseForm(); err != nil {
        http.Error(w, "Failed to parse form", http.StatusBadRequest)
        return
    }

    username := r.FormValue("username")
    rawPassword := r.FormValue("password")
    
    // 调用你的Encrypt函数加密密码
    encryptedPassword := Encrypt(rawPassword) // 替换成你自己的函数名
    
    // 后续处理：比如验证用户、写入数据库等
    // ...
}

• 要是为了存储密码，绝对不能只在客户端加密，必须在服务器端给密码加随机盐再哈希，防止彩虹表破解。
• 传输密码的话，只要开了HTTPS，明文传输也安全，HTTPS会自动加密整个请求。

内容的提问来源于stack exchange，提问作者kimathie