如何在 2022 年使用登录和数据库保护 web 应用程序？

Question

我的安全知识很老了，我想刷新我的全栈开发工具。 我正在学习 Oauth2、JWT、Next.JS、Auth0 等等，但我不知道如何将所有这些结合在一起。 请耐心等待我，我在这个问题上付出了努力:)

假设我想构建一个 web 应用程序，用户可以在其中注册到建筑物。 他正在输入他的个人数据并收到一个人性化的登记号码（例如 A00001 - Z99999）。

o/    ___              
/▌   |App| --POST---> API --> Add User to MySQL, create number-|
/\    ———  <---------------------Send number back--------------|            

1. 如何保护此/user POST 路径，以避免被黑客发送垃圾邮件？

现在大楼门口有一名保安人员，使用管理应用程序。 他得到所有用户，并在用户进入建筑物时单击“确定”。

 O/    _________  ---PUT---> API --> Modify User                       
/▌    |Admin App| ---GET---> API --> All Users -|
/\     —————————  <-------send all users--------|

2. 如何保护此/user GET 路径，以便只有经过身份验证的管理员才能获取所有用户？
3. 如何保护此/user PUT 路径，以便只有经过身份验证的管理员才能更新用户？
4. 用户应该能够登录，但不能注册。 只有一个管理员帐户。

管理员无需注册。 只有一位管理员使用用户名和密码登录。 用户不需要 GET /user/[id] 。 但是，当我向他们发送带有 32 位 hash 的链接然后我打开 GET /user/[hash]时，它是否安全？

对于那些希望如何帮助我编写代码的人，我会提出一些问题：

// pages/checkin.js
export default function Checkin() {

    const checkin = async (e) => {
        e.preventDefault();
        try {
            await fetch('https://myapi.com/user', {method: "POST", data});
        } catch (err) {
            console.log(err);
        }
    }

    return (
        <div>
            <form onSubmit={checkin}>
                {/* ... */}
            </form>        
        </div>
    )
}

// pages/_app.js
import { UserProvider } from "@auth0/nextjs-auth0";

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}
export default MyApp;

// pages/api/auth/[...auth0].js
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

// pages/userList.js
import { useUser } from '@auth0/nextjs-auth0';

export default function UserList() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  {/*
    * How and where do I fetch the secured users?
    */}

  const ok = async (id) => {
      try {
          /*
           * How to secure the PUT?
           */
        await fetch('https://myapi.com', {method: 'PUT', data: {id, ok: true}})
      } catch (err) {
          console.log(err);
      }
  }

  return (
    user && (
      <div>
        {users.map((user) => (
            <div key={user.id}>
                {user.human_numer} - <button onClick={() => ok(user.id)}>OK</button>
            </div>
        ))}
      </div>
    )
  );
}

Answer 1

所以，我的一些安全提示（请注意，我不是安全专家，只是对 web 应用程序进行了很多编码）：

• 使用 bcrypt ( https://www.npmjs.com/package/bcrypt )。 这是迄今为止我见过的最简单和最安全的模块。
• 如果您使用的是 nodejs（可能是）并且如果您使用 express 设置了应用程序，则可以使用 express-ratelimit 中间件来避免垃圾邮件。
• 老实说，保护 GET 让我很头疼。 因为互联网是按设计开放的，所以有时很难禁止内容。 您可以：
  • 仅将您的 ip（如果它是静态的）列入白名单或将其与您的用户代理等匹配，并禁止所有其他 IP。 请注意，如果您想在旅行中工作，这可能会很麻烦。
  • 使用一次性使用的临时不记名令牌。 请注意，如果您的数据库持有这些或令牌生成器被黑客入侵，您的整个应用程序可能会崩溃，所以要小心。
• 唯一登录没有注册很容易。 只需手动在数据库中输入凭据即可。
• 就个人而言，我认为您不需要将所有内容都连接到单个域。 设置本地（或不设置）仪表板并从那里直接 PUT 用户。 同样，仅将您的 ip 列入白名单并禁止其他人。