Cache-Control指令集详解

Tue, 04 Mar 2025 09:31:00 +0000

回答

一、考察点分析

核心能力维度：HTTP缓存机制理解、缓存策略设计能力、业务场景分析能力
技术评估点：

Cache-Control指令优先级逻辑
浏览器与CDN的缓存行为差异
动态内容与静态资源的缓存特征
缓存验证机制（如ETag/Last-Modified）协同工作
不同业务场景下的TTL(Time To Live)设计原则

二、技术解析

关键知识点：缓存指令优先级 > 缓存存储规则 > 缓存验证流程

原理剖析：

优先级规则：
```
 no-store(禁用缓存) > must-revalidate(强制验证 > no-cache(协商缓存) > max-age(强缓存)
 
```
当存在冲突指令时，限制性更强的指令生效。例如同时设置no-store和max-age=3600时，浏览器不会存储任何缓存副本。
指令详解：
- max-age=N：资源在N秒内被视为新鲜，优先使用本地缓存（强缓存）
- no-cache：每次需携带验证信息到服务端检查（协商缓存）
- no-store：禁止任何形式的缓存存储
- must-revalidate：过期缓存必须验证有效性，但新鲜期内可直接使用
常见误区：
- 混淆no-cache与no-store：前者允许存储但需验证，后者完全禁止存储
- 误认为max-age=0等价于no-cache（实际需要配合must-revalidate）
- 忽略CDN对缓存指令的特殊处理（如部分CDN会忽略no-store）

三、问题解答

指令优先级：当响应头包含多个冲突指令时，按no-store > must-revalidate > no-cache > max-age顺序生效。例如同时设置no-cache, max-age=3600时，浏览器将执行协商缓存而非强缓存。

场景策略设计：

电商页面（动态内容）：
```
 Cache-Control: no-cache, max-age=0, must-revalidate
 
```
配合ETag实现秒级更新价格库存，避免用户看到过期数据。
静态资源站点：
```
 Cache-Control: public, max-age=31536000, immutable
 
```
通过文件哈希实现永久缓存，配合CDN边缘节点加速，资源更新时修改URL指纹。

四、解决方案

编码示例（Nginx配置）：

点击劫持与X-Frame防护

Tue, 04 Mar 2025 09:31:00 +0000

考察点分析

本题重点考察前端安全防护能力与HTTP安全头配置原理，主要评估：

安全威胁识别：是否理解点击劫持的攻击手法及危害
防护机制掌握：对X-Frame-Options响应头不同策略的应用场景理解
安全策略进阶：CSP规范中frame-ancestors指令的现代化防护方案
策略优先级判断：多安全头共存时的浏览器处理逻辑

技术解析

关键知识点

点击劫持攻击原理
X-Frame-Options响应头
CSP的frame-ancestors指令
安全头优先级逻辑

原理剖析

点击劫持通过透明iframe覆盖目标页面，诱导用户点击看似无害的UI元素（如虚假按钮），实际触发隐藏iframe内的敏感操作。攻击者常使用CSS控制iframe的透明度和定位：

 iframe {
 opacity: 0.5;
 position: absolute;
 z-index: 999;
}

X-Frame-Options：

DENY：完全禁止iframe加载
SAMEORIGIN：仅允许同源iframe嵌套
（历史方案ALLOW-FROM已被CSP取代）

CSP frame-ancestors：

语法：Content-Security-Policy: frame-ancestors 'self' https://trusted.com;
支持多域名白名单配置，比X-Frame-Options更灵活

优先级规则：当同时设置X-Frame-Options和CSP frame-ancestors时，CSP指令优先生效，因现代浏览器逐步采用CSP作为更强大的安全机制。

常见误区

误认为两个安全头会叠加生效
混淆SAMEORIGIN与frame-ancestors 'self'的作用域
未考虑IE11等老旧浏览器的兼容性问题

问题解答

点击劫持通过透明iframe覆盖诱导用户点击隐藏页面元素，实施未授权操作。防护方案中：

X-Frame-Options: DENY完全禁止嵌套
X-Frame-Options: SAMEORIGIN仅允许同源嵌套
Content-Security-Policy: frame-ancestors可指定允许域名白名单

当同时设置时，CSP的frame-ancestors优先级高于X-Frame-Options。现代浏览器优先采用CSP指令，旧版浏览器可能仍参照X-Frame-Options。

解决方案

服务端配置示例（Nginx）

 add_header X-Frame-Options "SAMEORIGIN";
add_header Content-Security-Policy "frame-ancestors 'self';";

最佳实践

现代项目优先使用CSP，兼容旧系统时保留X-Frame-Options
敏感操作页面建议直接使用DENY策略
监控安全头配置有效性（可使用SecurityHeaders.com扫描）

深度追问

如何检测网站是否存在点击劫持漏洞？ 使用浏览器开发者工具检查响应头配置，或通过在线安全检测工具扫描

HTTP头部 on ZiYang FrontEnd Interview

Cache-Control指令集详解

回答 link

一、考察点分析 link

二、技术解析 link

三、问题解答 link

四、解决方案 link

点击劫持与X-Frame防护

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

服务端配置示例（Nginx） link

最佳实践 link

深度追问 link

回答