Javascript 在Vercel上为简单的Next.js web应用程序添加基本密码保护的最佳方法是什么？

我正在尝试将一个简单的密码验证步骤添加到仪表板中，只有我和其他几个人会看到它。它不是超级敏感的数据，但我想添加一个基本的保护，这样就不只是任何人都可以查看它了。它几乎肯定不会成为黑客或任何东西的攻击目标，所以我不太关心如何让它完全不可穿透

因此，我使用密码在Vercel上设置了一个秘密环境变量，然后在

getStaticProps（）

中对其进行散列，并将散列作为一个道具传递给页面。然后在客户端，我对用户输入的密码进行散列，如果两个散列匹配，则执行/显示其他内容

我想这里最大的缺陷是，有人可以很容易地进入开发人员工具，只需设置我用来确定输入密码和真实密码的哈希是否匹配的任何标志

我认为这是这里最大的安全漏洞，对吗

是否有任何简单的额外“模糊处理”步骤可以添加到这里，使其更难通过，或者是否有任何“仅前端”/“无服务器”的简单方法来完成我想要的

我是一名前端开发人员，所以我对创建适当的后端身份验证或其他任何东西有点不了解，我意识到这可能是非常可笑的不安全。我找到的所有指南都是针对成熟的用户帐户创建和身份验证之类的。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;

import React，{useState}来自“React”；
var crypto=要求（“加密”）；
常量IndexPage=（{pwHash}）=>{
const[enteredPassword，setEnteredPassword]=useState（“”）；
const[correctPassword，setCorrectPassword]=useState（false）；
常量handlePassword=（e）=>{
e、 预防默认值（）；
设置输入的密码（如目标值）；
};
const checkPassword=（e）=>{
e、 预防默认值（）；
const enteredHash=crypto
.createHash（“md5”）
.更新（输入密码）
.摘要（“十六进制”）；
如果（pwHash==输入的Hash）{
警惕（“成功”）；
设置正确的密码（true）；
}否则{
设置输入的密码（“”）；
}
};
返回(
{correctPassword&&SECRET STUFF}
测试页
);
};
导出异步函数getStaticProps（）{
const pw=process.env.pw；
const hash=crypto.createHash（“md5”）.update（pw）.digest（“十六进制”）；
返回{
道具：{
pwHash:hash，
},
};
}
导出默认索引扩展；