前端安全之所以经常被误解，是因为很多人以为安全问题只在服务端。可浏览器恰恰是风险最密集的执行环境之一：它既加载外部资源，又执行脚本，还承载用户身份和交互，一旦边界模糊，问题就会非常直接地暴露出来。真正成熟的前端开发，不可能只会写页面而不理解安全。
这一篇会把几个最核心的浏览器安全概念放到一起讲：同源策略决定默认边界，XSS 和 CSRF 是最常见的攻击模型，CSP 是重要防护手段，鉴权协作则把这些问题拉回真实业务链路。重点不是记住缩写，而是理解浏览器在替你防什么、又要求你主动避免什么。
同源策略为什么是浏览器安全的基础？
浏览器不是一个对所有页面、所有脚本都毫无隔离的环境。同源策略的核心价值，在于限制不同来源的脚本和资源之间能随意互相读写敏感数据。如果没有这层默认隔离，用户只要打开任意页面，身份和数据就很容易被别的站点滥用。
所以同源策略不是“麻烦的限制”，而是浏览器默认给你的安全护栏。很多跨域问题之所以需要额外配置，本质上就是因为浏览器先选择保护用户，再决定哪些场景可被明确放行。
XSS 为什么总是前端必须亲自重视？
XSS 的本质是让不可信内容进入可执行上下文。它危险的地方在于，一旦恶意脚本在页面里跑起来，就可能读取页面上下文、操作 DOM、发起请求、盗取信息。很多看似普通的“渲染内容”行为，如果没有正确转义和边界控制，就可能演变成漏洞。
前端在这里的责任非常直接：不要轻易把不可信内容当成 HTML 或脚本上下文执行，不要随意拼接可执行内容，不要把第三方输入无脑注入页面。尤其是在富文本、评论区、模板拼接和第三方脚本接入场景里，风险会明显提高。
第三方脚本为什么是很多团队容易忽略的风险入口？
因为它们经常以“接个统计、接个客服、接个埋点、接个地图 SDK”的形式进入项目，看起来像普通集成工作，但本质上是在把额外执行能力引入页面上下文。一旦来源控制、版本管理或加载策略不严格，这部分脚本就可能扩大攻击面，甚至直接影响性能和稳定性。
所以第三方脚本接入不能只看“功能能不能用”，还要评估来源可信度、权限范围、加载时机和后续维护责任。
CSRF 为什么常常和 cookie 鉴权绑在一起？
CSRF 的关键不是窃取数据，而是利用用户已登录状态诱导浏览器发出非本人意图的请求。因为浏览器会自动附带某些身份信息，所以如果系统缺乏额外校验，就可能在用户不知情时完成危险操作。
这也是为什么一谈 CSRF，大家往往会同时讨论 cookie、SameSite、来源校验和 CSRF Token。它不是前端单独能完全解决的问题，但前端至少必须理解：哪些请求天然容易携带身份、哪些防护机制是后端在依赖浏览器行为完成、页面层面如何避免把风险进一步放大。
前后端在安全里最容易互相误解的点是什么？
很常见的一种情况是，前端以为“后端已经验过了”，后端以为“前端会限制住”。结果就是：前端只做按钮隐藏却没有真正权限校验概念，后端只返回一个笼统错误却没区分认证失败和权限不足，双方都觉得对方会补上最后一道防线。安全协作最怕这种模糊地带。
更稳的做法是把责任明确拆开：前端负责减少暴露面和误操作，后端负责真正的权限裁决和敏感操作校验，双方再通过统一错误语义和登录失效流程协同。
CSP 为什么是很重要但常被忽略的能力？
CSP，也就是内容安全策略，可以理解成浏览器层面的脚本和资源加载白名单约束。它的价值不在于“完全替代代码安全”，而在于即便某些注入风险存在，也能通过更严格的执行策略降低攻击成功概率。
很多团队平时不太关注 CSP，原因往往不是它不重要，而是它涉及前端资源加载、第三方脚本引入、部署配置和服务端响应头协作，落地成本相对更高。但恰恰因为如此，它更像一条成熟工程线，而不是临时补丁。
鉴权为什么必须和安全一起看？
鉴权不是“登录成功拿到 token 就结束”，而是身份在浏览器里如何被保存、如何被携带、如何失效、如何防止被滥用的一整条链。你选择把身份信息存在哪里、如何附带到请求里、页面刷新后怎样恢复、退出登录如何清理，都会直接影响安全边界。
很多项目安全问题，不是单点漏洞，而是多处小决策堆出来的。例如某些敏感信息暴露在脚本可读上下文、跨域请求策略不严、退出登录只清前端状态不清服务端会话，都会让鉴权链变脆。
跨域协作为什么不能只当成“请求配置问题”？
跨域问题的表面形式通常是浏览器拦截请求，但它背后其实是来源隔离和身份携带边界。只把它当成“后端多加几个头”很容易忽略真正的风险点：哪些来源应该被信任，哪些请求应允许带凭证，哪些接口不应该轻易暴露给跨站上下文。
所以每次讨论跨域，其实都应该同时讨论信任边界，而不只是“让它通”。
安全不是“修 bug”，而是“先有边界”
成熟项目对安全的处理思路，通常不是等出事再补，而是在设计阶段就先明确边界：
- 哪些内容能进页面，哪些必须清洗；
- 哪些资源来源可信，哪些必须限制；
- 哪些请求会自动附带身份，哪些需要额外校验；
- 哪些状态可以在浏览器暴露，哪些不能；
- 哪些第三方依赖进入页面后会扩大攻击面。
这就是为什么安全意识其实是工程意识的一部分。
为什么权限按钮隐藏永远不等于安全？
这是很多前端项目里特别常见的误区。把某个危险按钮在 UI 上隐藏起来，确实能改善体验、减少误操作，但它从来不是安全本身。只要服务端没有做真正的权限校验，调用者完全可以绕过界面直接构造请求。
所以前端权限控制更准确的定位应该是“体验层约束”，而不是“安全层裁决”。这两个层级只要混淆，团队后面就很容易出现错误安全感。
常见误区
这一章常见误区包括：
- 把跨域问题只看成“前端请求麻烦”，忽略它背后的安全意义；
- 认为 XSS 只会出现在很老旧的写法里；
- 只知道 CSRF 名字，却不知道它和浏览器自动携带身份的关系；
- 把鉴权只看成存 token；
- 完全不考虑 CSP 和第三方脚本引入的风险。
写在最后
前端安全不是附属知识，而是浏览器开发的基本素养。同源策略、XSS、CSRF、CSP 和鉴权协作，串起来看才是真正完整的安全主线。下一篇我们继续拆性能，把“为什么页面会慢”这件事从渲染和主线程角度讲得更透。