gin-gonic 重定向 POST 之后的 HTML，来自 Javascript XMLHttpRequest答案

【问题标题】：gin-gonic Redirecting HTML following of POST, from Javascript XMLHttpRequestgin-gonic 重定向 POST 之后的 HTML，来自 Javascript XMLHttpRequest
【发布时间】：2021-09-07 08:11:45
【问题描述】：

我正在尝试使用 Gin-gonic 构建登录页面，但在重定向浏览器时遇到了麻烦。

main.go

router.GET("/login", getLoginPage)
router.POST("/login", authentication.Login)
router.GET("/dashboard", showMainPage)

如果用户在 html 中按下按钮

login.html

<input a href="javascript:void(0);" class="btn btn-primary btn-user btn-block" id="loginButton" value="Login"></input>

然后，Javascript 功能将起作用。我这样编码的原因是，我了解到在发送到服务器之前应该对 UserID 和 Password 进行哈希处理。（据我所知，由于一些安全问题，如窃听）

login.js

document.getElementById("loginButton").addEventListener("click", tryLogin, false);
// Get user inputs like ID and PW
var request = new XMLHttpRequest();
request.open("POST", "/login");
request.send(formData);

现在，router.POST("/login", authentication.Login) 可以工作了。

auth.go

func Login(c *gin.Context) {
  id := c.PostForm("id")
  pw := c.PostForm("pw")

  // Hash password again, Check Validation and Find user in database

  // If all inputs are correct, Logged in.
  c.Header("Content-Type", "text/html")
  c.HTML(http.StatusOK, "dashboard.html", gin.H{
      "title":        "title of my page",
      "username":     "I want to send some data like this",
      "usernickname": "TyeolRik",
  })  // But the thing is c.HTML not directing as I want. but it returns well checked in Postman.
}

但是 c.HTML 没有在浏览器中显示渲染的 HTML 屏幕（检查了 Chrome 和 Edge），而且，c.Redirect() 也不起作用。

auth.go

func Login(c *gin.Context) {
  id := c.PostForm("id")
  pw := c.PostForm("pw")
  // Hash password again, Check Validation and Find user in database
  c.Redirect(http.StatusMovedPermanently, "/dashboard")
}

如何轻松重定向 HTML？我在 Javascript 中暂时使用了window.location.href = '/dashboard';。但它不能像使用gin.H{something}一样渲染

对我有什么建议吗？

【问题讨论】：

@CeriseLimón 很抱歉让您感到困惑。我的意思是我从c.Header() 删除到c.HTML 并写c.Redirect()。没有同时运行代码:)
@CeriseLimón 我马上编辑了代码！和你一样，有些人可能会感到困惑！
一旦XMLHttpRequest收到来自服务器的响应你必须选择如何处理它并执行它。如果响应包含要显示的 html，则需要编写 javascript 来执行此操作。如果响应有 3xx 状态码并且您希望重定向被遵循，您需要编写 javascript 来执行此操作。
@PenelopeStevens 感谢您的建议。如果是这样，是否所有提供 https 的网站（如 google、youtube 或一些大公司）都在不经过哈希的情况下发送登录数据？
@Penelope 抱歉回复晚了。 JavaScript 中的 SHA3。和服务器中的 SHA3-shakesum。我不明白你为什么说“通过 HTTPS 发布比散列更安全” 据我所知，没有散列冲突攻击（不是 SHA1 而是 SHA2），而且 HTTPS 可能会受到攻击等物理安全攻击的攻击。

标签： javascript html go authentication go-gin

【解决方案1】：

感谢@mkopriva，我发现javascript中的XMLHttpRequest()不适用于gin.gonic的*gin.Context.HTML()

浏览器不会在服务器返回时使用XMLHttpRequest() 重定向。

最终代码（运行良好）

login.js

function tryLogin() {
    const email = document.getElementById("loginFormEmail").value;
    const pw = document.getElementById("loginFormPassword").value;
    var hashedPW = sha3_512(pw);

    var hashedForm = document.createElement("form");
    hashedForm.setAttribute("charset", "UTF-8");
    hashedForm.setAttribute("Content-Type", "multipart/form-data");
    hashedForm.setAttribute("method", "POST");  // Post
    hashedForm.setAttribute("action", "/login"); // URL destination

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "email");
    hiddenField.setAttribute("value", email);
    hashedForm.appendChild(hiddenField);

    hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "password");
    hiddenField.setAttribute("value", hashedPW);
    hashedForm.appendChild(hiddenField);

    document.body.appendChild(hashedForm);
    hashedForm.submit();
}

当服务器验证 POST-ed 登录时，然后

auth.go

// Some validation
// If ID and PW is right,
c.Redirect(http.StatusMovedPermanently, "/dashboard")

这行得通。

【讨论】：

最终代码（运​​行良好）

最终代码（运行良好）