不得不知的网络安全知识

本文最初发布于Bits and Pieces博客。
 
去年年底，我在申请前端和全栈职位时经历了一些编码挑战。虽然细节上有些差别，但任务的主要内容是一样的。令我高兴的是，我确实已经学到了不少东西。在这里，我的目的是记录我在安全方面获得的新知识。
本文主要涵盖了以下内容：

 
由于我主要从事前端和全栈开发工作，所以这些例子都是用TypeScript编写的。当然，这些概念是语言无关的。
设置
让我们创建一个可靠的Express代码库作为构建基础。
HTTPS
2022年了，要使用传输层安全（TLS）。免费的，这个安全层可以确保你的网站免受中间人攻击、窃听和篡改。你唯一需要的是一个证书。
 
对于本地开发，要么创建一个，要么使用，后者唯一的工作是将任何请求反射到你自己的（对于子域名特别方便）。
 
当你将应用程序托管在外时，所有现代化的服务——Vercel、Netlify、Heroku——都会帮你处理证书。如果你发现自己需要一个证书，会帮到你，而且是免费的。
报头（Headers）
，使用Helmet对报头做恰当的设置，以防范众所周知的Web漏洞。
 
值得注意的是，Helmet禁用了（那个泄露应用程序引擎的头字段），启用了HSTS（告诉浏览器优先选择HTTPS），并禁用了MIME类型嗅探（这很危险，例如，当你正在加载一个文本文件，但你的浏览器认为它是）。如果你想了解所有的细节，可以看看。这确实让人感觉很合理。
 
因此，Express服务器的基本代码可能会是下面这个样子：
import express from "express";
import fs from "fs";
import helmet from "helmet";
import https from "https";
import path from "path";
const app = express();
// 避免手动调整CSP、HSTS、X-Powered-By、MIME-sniffing等；尽可能设置最严格的CSP。
app.use(helmet({ contentSecurityPolicy: { directives: { defaultSrc: "\'self\'" } } }));
app.use(express.json());
const client = path.resolve(__dirname, "../build");
if (fs.existsSync(client)) app.use(express.static(client));
app.get("/healthz", (_, res) => { res.send({ message: "We\'re live