15 分钟
全栈开发

Web 安全、性能与成本意识

三大注入盗用怎么防、HTTP 缓存与扩容、成本估算方法论

  • 能区分 XSS 三种类型、CSRF、SQL 注入并说出各自怎么防
  • 理解 CSP 怎么配、HTTPS 与 HTTP/2 的真实代价
  • 知道强缓存/协商缓存、CDN 命中率、Serverless 冷启动
  • 掌握「月活→请求→带宽→存储」的成本估算方法
💡高中搭桥:开店三件事

安全 = 给门上锁 + 装猫眼,不让坏人进;性能 = 走捷径而不是绕远路;成本 = 先算清楚每月电费再开店。这三件事决定你这门生意能不能活过第一年。

三大注入与盗用

ℹ️XSS / CSRF / SQL 注入

XSS:用户输入 <script> 被浏览器执行。防:输出转义、前端框架默认转义、设 CSP 头。CSRF:借用户登录态偷发请求。防:SameSite Cookie、校验 Referer/Token。SQL 注入:输入拼进 SQL 被当命令执行。防:ORM / 参数化查询,绝不拼字符串。

XSS 的三种类型

XSS 不是一种攻击,是三种,根因都是「把不可信内容当 HTML 执行了」,但危害路径不同。存储型:恶意脚本存进了数据库(比如评论区),所有看这条评论的人都会中招,危害最大。反射型:脚本藏在 URL 参数里,服务器「反射」回页面,攻击者得骗你点一个特制链接才中招。DOM 型:脚本根本没到服务器,是前端 JS 自己把 URL 里的内容写进了页面,服务端日志都看不到,最隐蔽。

三种的统一解法是输出转义——Vue/React 默认就帮你把插值转义了,别用 v-html / dangerouslySetInnerHTML 瞎塞不可信内容。一个快速自查方法:全局搜代码里所有把后端数据直接塞进 innerHTML / v-html / dangerouslySetInnerHTML 的位置,那就是潜在的 DOM XSS 点。转义是第一道墙,下面的 CSP 是第二道。

CSP 实际怎么配

CSP(内容安全策略)是一个响应头,一句话告诉浏览器:「这个页面只准从这些来源加载脚本、样式、图片」。一个常见配法是:default-src 设 'self'(默认只信自己域名),script-src 额外放行你的 CDN,img-src 放行 data: 和图片 CDN。一旦页面里被注入了一个来自恶意域名的 <script>,浏览器直接拒绝执行。

上线小技巧:先加 Content-Security-Policy-Report-Only 头,只报告不拦截,观察一周收集哪些资源被拦,规则调准了再切成真拦。一上来就硬拦,很容易把自己的正常功能也拦挂。除了 CSP,还有几个配套头:给敏感 Cookie 加 HttpOnly 让 JS 读不到 token、加 Secure 只在 HTTPS 下传输,这几条合起来才是完整的 XSS 防线。

HTTPS 是全站必须:HTTP 明文传输,登录密码和 token 会被中间人窃听。HTTPS 原理与证书深挖归 s15-m6。

HTTPS 握手成本与 HTTP/2 多路复用

老说法是「HTTPS 比 HTTP 慢」,那是 HTTP/1.1 时代的事。HTTPS 首次连接确实多一次 TLS 握手(一来一回),但 HTTP/2 多路复用能在一条连接上并行塞多个请求,省去了 HTTP/1.1 每个请求都建连的开销。对现代网站,开了 HTTPS + HTTP/2 通常反而更快,所以现在没有理由不上 HTTPS。

性能与扩容一句话

ℹ️性能工具箱

HTTP 缓存:响应头 Cache-Control 让浏览器/CDN 缓存静态资源,别每次都回源。垂直扩容:单机升级配置(加 CPU/内存),简单但有上限。水平扩容:加多台机器,靠负载均衡分发。读写分离:主库写、从库读,读多的场景提速。Serverless:按量计费、自动伸缩,冷启动是代价。深挖归 s13-m5-l4。

强缓存 vs 协商缓存

浏览器缓存分两级。强缓存(Cache-Control: max-age=31536000):一年内浏览器根本不找服务器,直接用本地缓存,最省。文件名带内容 hash(app.abc123.js)就是为这个设计的——内容变了 hash 变、文件名变,强制浏览器拉新的。协商缓存(ETag / Last-Modified):强缓存到期后,浏览器带 ETag 问服务器「变了没」,没变返回 304 不传输 body。经验法则:频繁变的 HTML 用协商缓存,带 hash 的静态资源用长强缓存。最常见的配置失误就是给 index.html 也设一年强缓存,结果发版后用户还拿着旧 HTML 去引用已经不存在的旧 JS,页面直接白屏;正确做法是 HTML 设 no-cache 每次协商,带 hash 的 JS/CSS 才长缓存。

CDN 命中率与 Serverless 冷启动

扩容也有先后顺序,别一上来就加机器。正确顺序是:先加缓存挡读、再做垂直扩容(单机升配),顶不住了才水平扩容加多台机器。绝大多数小站点根本走不到水平扩容那一步——缓存做好、数据库索引加对,一台 2核2G 能扛很久。盲目加机器是最贵的优化。

防恶意流量(DDoS、刷接口)靠分层:Nginx/网关入口限流挡第一层,应用层对登录、验证码等敏感接口再限一次,上面成本课里的 RateLimiter 就是应用层那道闸。安全这块最后补一句心法:不要自己造加密、不要信前端传来的任何数据、默认所有用户输入都是恶意的——这三条做到,能挡掉绝大多数新手级漏洞。

CDN 命中率 = CDN 直接返回的请求数 ÷ 总请求数。命中率 95% 意味着只有 5% 的请求回源到你的服务器,源站带宽成本降到大约 1/20。命中率低通常是缓存没配好:HTML 被缓存导致更新不及时,或缓存时间太短频繁回源。读写分离也是同理——把读压力分摊到从库,主库只扛写,读多写少的场景能线性提速,但它引入了主从延迟这个新问题,不是免费的午餐。

Serverless 按量计费很诱人,但函数长时间没人调用后会被「冻结」,第一次请求要重新冷启动(几十到几百毫秒),对延迟敏感的接口(支付、搜索)首包会抖。解法是保持预热,或对延迟敏感的接口别用 Serverless。

成本估算方法论

云产品价格、版本随时在变,一律以官方最新为准。方法比数字重要:先估算月活用户,再算人均请求量,最后乘数据库、带宽、对象存储的单价。估算最容易漏两项:一是数据库/服务器是包月固定成本,不管有没有人用都得算钱;二是流量费常常比服务器本身贵——小站点服务器几十块一个月,CDN 流量可能几百块。所以先把流量和带宽算清楚,再回头谈机器规格,别本末倒置。下面用纯 Python 跑一个限流计数器,再把「请求→带宽→存储」三段成本一起粗算。

示例代码(可运行)
🐍交叉引用不重写

安全深挖(CSP/HTTPS/OWASP)归 s15-m6 与 s10-m8,性能深挖归 s13-m5-l4。这一课只建立意识:知道有哪些坑、各用哪类手段防,真刀真枪的加固在后面阶段。

选择题

有人在评论框输入 <script>steal()</script>,评论存进数据库后所有访客页面都执行了脚本,这是什么类型的 XSS?

选择题

你的站点 CDN 命中率是 95%。这意味着回源到你自己服务器的请求大约占多少?

填空题填写空白处的代码
防 SQL 注入的核心是用 ORM 或 查询,而不是拼接 SQL 字符串。

资深工程师加餐

底层原理 · 大厂视角 · 工程经验,点卡片展开

网络侧:DNS→TCP/TLS→HTTP 请求与响应;浏览器侧:解析 HTML 建 DOM、解析 CSS 建 CSSOM、合并成渲染树,再经过布局(Layout)、绘制(Paint)、合成(Composite)上屏。前端性能优化几乎都围绕这条链路:减小资源体积、优化关键渲染路径、避免频繁触发重排重绘。

挑战任务

粗算月度云成本

简单+50 XP

场景:老板让你拍板这个月的云预算。写 monthly_cost(mau, req_per_user, price_per_10k):总请求 = mau*req_per_user,成本 = 总请求/10000*单价,保留两位小数。这就是成本估算的最小骨架。

粗算月度云成本
1 个测试用例

课后作业

估算你的应用月成本

中等+25 XP

场景:你的应用 1 万月活、人均每天 20 次请求、每次响应约 50KB。请按「月活→月请求→月出带宽→CDN 成本」四步粗算,写出你的估算过程(单价用示例口径即可)。

估算你的应用月成本
1 个测试用例