在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;回答 1
Stack Overflow用户
发布于 2021-12-01 09:39:01
如果此网站有自定义域(默认*.vercel.app以外的任何域)，Octauthent可以帮助您对web应用程序进行密码保护。
Octauthent是一个无代码的解决方案，而且它是免费的(具有高级功能)。
Vercel上托管的网站的Here is a detailed tutorial
https://stackoverflow.com/questions/65163069
复制相似问题
腾讯云开发者
