向 Vercel 上的簡單 Next.js web 應用程序添加基本密碼保護的最佳方法是什么？

Question

我正在嘗試向只有我和其他幾個人會查看的儀表板添加一個簡單的密碼驗證步驟。 這不是超級敏感的數據，但我想添加一個基本的保護，這樣不只是任何人都可以看到它。 它幾乎肯定不會成為黑客或任何東西的目標，所以我不太擔心讓它完全無法穿透——足夠好。

因此，我使用密碼在 Vercel 上設置了一個秘密環境變量，然后在getStaticProps()中對其進行哈希處理，並將 hash 作為道具傳遞給頁面。 然后在客戶端，我 hash 用戶輸入的密碼，如果兩個哈希匹配，做/顯示一些其他的東西。

我想這里最大的缺陷是有人可以輕松地將 go 放入開發人員工具中，然后設置我用來確定輸入密碼的 hash 是否與真實密碼匹配的任何標志。

我是否正確認為這是這里最大的安全漏洞？

是否有任何簡單的“混淆”附加步驟我可以添加到它以使其更難通過，或者是否有任何“僅前端”/簡單的無服務器方式來完成我想要的？

我是一名前端開發人員，所以我在創建適當的后端身份驗證或任何東西方面有點超出我的深度，我意識到這可能是非常可笑的不安全。 我找到的所有指南都是針對成熟的用戶帳戶創建和身份驗證之類的。 Vercel 可以選擇密碼保護部署，但每月 150 美元，我不想為這個小項目付錢。

這可能是一個非常愚蠢的方法，但同樣，這不是超級敏感數據，所以即使只有 web 開發人員或知道如何閱讀 JavaScript 的人可以闖入，那么我現在可能對此很好。

這是我的/pages/index.js文件的樣子：

import React, { useState } from "react";
var crypto = require("crypto");

const IndexPage = ({ pwHash }) => {
  const [enteredPassword, setEnteredPassword] = useState("");
  const [correctPassword, setCorrectPassword] = useState(false);

  const handlePassword = (e) => {
    e.preventDefault();
    setEnteredPassword(e.target.value);
  };

  const checkPassword = (e) => {
    e.preventDefault();

    const enteredHash = crypto
      .createHash("md5")
      .update(enteredPassword)
      .digest("hex");

    if (pwHash === enteredHash) {
      alert("success");
      setCorrectPassword(true);
    } else {
      setEnteredPassword("");
    }
  };

  return (
    <div>
      {correctPassword && <div>SECRET STUFF</div>}
      <div>
        <h1>
          Testing page
        </h1>
        <form onSubmit={checkPassword}>
          <input
            type="password"
            name="password"
            value={enteredPassword}
            onChange={handlePassword}
          />
        </form>
      </div>
    </div>
  );
};

export async function getStaticProps() {
  const pw = process.env.PW;
  const hash = crypto.createHash("md5").update(pw).digest("hex");

  return {
    props: {
      pwHash: hash,
    },
  };
}

export default IndexPage;

Answer 1

如果您有此站點的自定義域（默認的*.vercel.app以外的任何域）， Octauthent可以幫助您使用密碼保護您的 web 應用程序。

Octauthent 是一種無代碼解決方案，而且是免費的（具有高級功能）。

這是 Vercel 上托管的網站的詳細教程