密碼和用戶名是否應該在.network 選項卡的請求選項卡中可見？

Question

我正在開發一個登錄系統（當前代碼以更改密碼為例，但這是相對的）；

使用 axios 更改密碼的代碼示例；

（請不要評論當前的 localStorage 代碼，我知道它的缺陷。這是測試目的，這個問題與密碼嚴格相關）

axios.put(
        'http://localhost:5001/auth/changePassword',
        {
            currentPassword: password.currentPassword,
            newPassword: password.newPassword,
        },
        {
            headers: { accessToken: localStorage.getItem('accessToken') },
        }
    )
    .then((response) => {
        if (response.data.error) {
            alert(response.data.error)
        } else {
            alert(response.data.message)
        }
    })

如果我單擊請求選項卡，我可以看到明文密碼，這有點刺耳，未經授權的人不可能以類似的方式看到這個嗎？ 我在服務器端有散列沒問題和身份驗證令牌等等。但是能夠像這樣簡單地看到密碼......這實際上是一個問題嗎？

Answer 1

長話短說：博士； 不，你不能隱藏它，不，這沒有問題。*

第 1 部分：Devtools 和網絡選項卡

Chrome 正在從您的設備發出這些請求。 這是無可爭議的，因為這正是 inte.net 的工作方式。 最終用戶應該能夠看到提交的字段是有道理的。 您可以通過某種方式混淆明文，但這並不是特別有問題。

這不太可能給最終用戶帶來重大風險。 正如您在評論中提到的，devtools window 也必須首先打開以記錄請求。

第 2 部分：HTTPS - 快速總結

大多數瀏覽都是通過HTTPS: Hypertext Transfer Protocol (Secure)完成的。 HTTPS 以加密方式保護您的設備與目標服務器之間的整個對話，這意味着沒有任何中間人可以在沒有一些重大欺騙的情況下讀取您的流量的明文（其中大部分需要首先對您的設備進行一定程度的訪問。）

當然，這並不完美，但幾乎可以肯定地說，更大的風險是由您的機器本身帶來的——這更容易受到攻擊，這可能會讓攻擊者訪問這些憑據。

---

注意：我不是專家，這是對過程的極大簡化。 如果您想更好地了解幕后發生的事情，我建議您閱讀協議本身。

* 非常特殊的情況除外。