Django login/ payload visible in plaintext in Chrome DevTools

Question

This is weird. I have created login functions so many times but never noticed this thing. When we provide a username and password in a form and submit it, and it goes to the server-side as a Payload like this, I can see the data in the Chrome DevTools network tab:

csrfmiddlewaretoken: 
mHjXdIDo50tfygxZualuxaCBBdKboeK2R89scsxyfUxm22iFsMHY2xKtxC9uQNni
username: testuser
password: 'dummy pass' #same as i typed(no encryption)

I got this in the case of incorrect creds because the login failed and it wouldn't redirect to the other page. But then I tried with valid creds and I checked the Preserve log box in the Chrome network tab. Then I checked there and I could still see the exact entered Username and password. At first I thought I might have missed some encryption logic or something. But then I tried with multiple reputed tech companies' login functionality and I could still see creds in the payload. Isn't this wrong?

It's supposed to be in the encrypted format right?

Models.py

from django.contrib.auth.models import User

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)

html

<form method="POST" class="needs-validation mb-4" novalidate>
    {% csrf_token %}
    <div class="form-outline mb-4">
       <input type="email" id="txt_email" class="form-control" 
          placeholder="Username or email address" required />
     </div>
  <div class="form-outline mb-4">
        <input type="password" id="txt_password" class="form-control" 
         placeholder="Password" required />
  </div>

                    <div class="d-grid gap-2">
                      <button class="btn btn-primary fa-lg gradient-custom-2 login_btn" type="submit" id="btn_login"><i class="fa fa-sign-in" aria-hidden="true"> </i> Sign in</button>
                      <div class="alert alert-danger" id="lbl_error" role="alert" style="display: none;">

                      </div>

                    </div>

</form>

login view

def authcheck(request):
    try:
        if request.method == "POST":
            username = request.POST["username"]
            password = request.POST["password"]
            user = authenticate(username=username, password=password)
            if user is not None:
                check_is_partner = Profile.objects.filter(user__username=username, is_partner=True).values("password_reset").first()
                if check_is_partner and check_is_partner['password_reset'] is True:
                    return JsonResponse(({'code':0 ,'username':username}), content_type="json")
                if check_ip_restricted(user.profile.ip_restriction, request):
                    return HttpResponse("ok_ipr", content_type="json")
                login(request, user)
                session = request.session
                session["username"] = username
                session["userid"] = user.id
                session.save()
                if check_is_partner:
                    return HttpResponse("1", content_type="json")
                else:
                    return HttpResponse("ok", content_type="json")
            else:
                return HttpResponse("nok", content_type="json")
    except Exception:
        return HttpResponse("error", content_type="json")

Answer 1

It's supposed to be in the encrypted format right?

No.

What you're seeing in Chrome DevTools is the username and password before they get encrypted.

If you were to run tcpdump or Wireshark when you make the request, you'd see that it is encrypted over the network.

In order for the data to be usable by anyone, it has to be unencrypted/decrypted at some point.

For example, you can also see the response data (status code, headers, payload) in Chrome DevTools, which is encrypted over the network, but it's shown to you after it's been decrypted.

---

Here's a similar answer to a similar question.

---

EDIT: This is all assuming you're on a site using https. If you're using plain ole http, anyone sniffing the network can see your username + password in plaintext.

Answer 2

Everything at the front end - the browser side is visible to everyone, and dev tools are no exception. Use HTTPS for security reasons.