gin-gonic Redirecting HTML following of POST, from Javascript XMLHttpRequest

Question

I am trying to build login pages with Gin-gonic, but I got trouble in redirecting browser.

main.go

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

If user press the button in html

login.html

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

Then, Javascript function will be working. The reason why I coded like this is that, I learned that UserID and Password should be hashed before sending to server. (Due to some sort of security problems like tapping, as far as I know)

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);

And now, router.POST("/login", authentication.Login) will work.

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.
}

But c.HTML doesn't showing rendered HTML screen in browser (Chrome and Edge checked) and also, c.Redirect() doesn't work neither.

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")
}

How can I redirect HTML easily? I temporarily used window.location.href = '/dashboard'; in Javascript. But It cannot be rendered like using gin.H{something}

Is there any tips for me?

@CeriseLimón Sorry to confuse you. I meant I deleted from ```c.Header()``` to ```c.HTML``` and write ```c.Redirect()```. Not running code at same time :) — TyeolRik, Jun 23 '21 at 18:52
@CeriseLimón I edited the code right away! As you do, Some people could be confused! — TyeolRik, Jun 23 '21 at 18:53
Once `XMLHttpRequest` receives the response from the server *you* must choose what to do with it and implement it. If the response contains html that you want to display, you need to write javascript to do that. If the response has a 3xx status code and you want the redirect to be followed, you need to write javascript to do that. — mkopriva, Jun 23 '21 at 19:10
@PenelopeStevens Thanks to your advice. If so, **does all websites, who provide https (like google, youtube or some big company), send login data without hashing?** — TyeolRik, Jun 24 '21 at 11:24
@Penelope Sorry for late response. SHA3 in javascript. And SHA3-shakesum in server. I didn't understand why you said "POST over HTTPS is more secure than hashing" As far as I know, there is no hash collision attack (not SHA1 but SHA2) and also, HTTPS could be attacked by physical security attack like tapping. — TyeolRik, Jun 28 '21 at 15:26
@PenelopeStevens Yes. Of course, attacker can replicate all functions because **javascript code is officially available to anyone** who access login page. I know what is javascript, the front-end is, giving client source code and letting him use his computing power. Let me say a scenario. If attacker can watch all data which are on HTTPS, **it is better that attacker get Hashed Password**, not raw Password. isn't it? Because Hash function is not reversible. This answer represent my comments more clearly. https://stackoverflow.com/a/21716654/7105963 — TyeolRik, Jun 30 '21 at 16:57

score 1 · Answer 1 · answered Jul 01 '21 at 22:00

Thanks to @mkopriva, I found out that XMLHttpRequest() in javascript doesn't work with *gin.Context.HTML() of gin.gonic

Browser doesn't redirect with XMLHttpRequest() as server returns.

Final code (works well)

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();
}

When server validate POST-ed login, then

auth.go

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

This works.

gin-gonic Redirecting HTML following of POST, from Javascript XMLHttpRequest

1 Answers1

Final code (works well)