公开文集
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-072-前端安全深入
# Day 70: 前端安全深入 > Web 安全系列第 40 天 | 预计阅读时间:40 分钟 | 难度:★★★★☆ --- ## 清单 目录 1. [前端安全概述](#前端安全概述) 2. [XSS 防护进阶](#xss 防护进阶) 3. [CSP 内容安全策略](#csp 内容安全策略) 4. [前端框架安全](#前端框架安全) 5. [第三方依赖安全](#第三方依赖安全) 6. [客户端存储安全](#客户端存储安全) 7. [API 安全前端实现](#api 安全前端实现) 8. [前端安全测试](#前端安全测试) 9. [防护策略与最佳实践](#防护策略与最佳实践) 10. [总结与思考](#总结与思考) 11. [参考资料](#参考资料) --- ## 前端安全概述 ### 前端安全重要性 **为什么前端安全重要**: ``` 1. 直接面对用户 - 用户交互入口 - 敏感数据处理 - 信任边界 2. 攻击面大 - 多种攻击向量 - 第三方依赖 - 浏览器差异 3. 影响严重 - 用户数据泄露 - 会话劫持 - 钓鱼攻击 ``` **前端安全威胁**: ``` 1. 代码注入 - XSS 攻击 - 脚本注入 - 模板注入 2. 数据泄露 - 敏感数据暴露 - 本地存储泄露 - 网络窃听 3. 客户端攻击 - CSRF 攻击 - 点击劫持 - 表单劫持 4. 供应链攻击 - 第三方库漏洞 - CDN 污染 - 构建过程攻击 ``` ### 前端安全模型 **同源策略**: ``` 定义: - 协议相同 - 域名相同 - 端口相同 限制: - DOM 访问限制 - Cookie 访问限制 - 网络请求限制 例外: - CORS 跨域 - postMessage - document.domain ``` **信任边界**: ``` 前端信任边界: - 用户输入(不可信) - 服务器响应(部分可信) - 第三方脚本(不可信) - 本地存储(不可信) 原则: - 从不信任客户端 - 服务端验证 - 最小权限 ``` --- ## 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; } ``` **注意**: ``` 客户端验证局限: - 可被绕过 - 仅用于用户体验 - 服务端必须验证 最佳实践: - 客户端验证 + 服务端验证 - 不依赖客户端安全 - 防御深度 ``` --- ## CSP 内容安全策略 ### CSP 基础 **什么是 CSP**: ``` CSP(Content Security Policy)是一种安全机制, 通过指定哪些资源可以加载和执行, 减少 XSS 和其他代码注入攻击。 ``` **CSP 指令**: ``` default-src: 默认策略 script-src: 脚本来源 style-src: 样式来源 img-src: 图片来源 connect-src: 连接目标 font-src: 字体来源 object-src: 插件来源 frame-src: 框架来源 ``` ### CSP 配置 **基础配置**: ```html <!-- HTTP 头 --> Content-Security-Policy: default-src 'self' <!-- Meta 标签 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> ``` **严格配置**: ```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 - 限制回调 - 验证来源 ``` --- ## 前端框架安全 ### 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 ``` ### 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 # 自动依赖更新 # 安全策略 ``` --- ## 客户端存储安全 ### 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 安全前端实现 ### 认证令牌管理 **令牌存储**: ```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; } ``` --- ## 前端安全测试 ### 自动化测试 **SAST 工具**: ```bash # ESLint 安全插件 npm install -g eslint-plugin-security eslint --plugin security . # SonarQube # 代码质量平台 # 安全漏洞检测 # Snyk Code # 静态分析 # 漏洞检测 ``` **DAST 工具**: ```bash # OWASP ZAP # 动态扫描 # 前端安全测试 # Burp Suite # 手动测试 # 自动化扫描 # npm audit # 依赖审计 # 漏洞检测 ``` ### 手工测试 **测试清单**: ``` XSS 测试: □ 输入点测试 □ 输出点测试 □ 上下文测试 □ 框架测试 CSRF 测试: □ Token 验证 □ SameSite 检查 □ Referer 检查 存储测试: □ Cookie 安全 □ LocalStorage 检查 □ SessionStorage 检查 依赖测试: □ 漏洞扫描 □ 版本检查 □ 权限审计 ``` **测试工具**: ```javascript // 自定义测试脚本 class SecurityTester { async testXSS() { const payloads = [ '<script>alert(1)</script>', '<img src=x onerror=alert(1)>', '"><script>alert(1)</script>' ]; for (const payload of payloads) { // 测试输入点 await this.testInput(payload); } } async testCSRF() { // 测试 CSRF Token // 测试 SameSite // 测试 Referer } async testStorage() { // 检查 Cookie // 检查 LocalStorage // 检查 SessionStorage } } ``` --- ## 防护策略与最佳实践 ### 安全开发流程 **设计阶段**: ``` 1. 威胁建模 - 识别威胁 - 风险评估 - 缓解措施 2. 安全设计 - 安全架构 - 安全组件 - 安全接口 3. 安全要求 - 安全需求 - 安全标准 - 合规要求 ``` **开发阶段**: ``` 1. 安全编码 - 编码规范 - 安全库使用 - 代码审查 2. 依赖管理 - 依赖审计 - 版本锁定 - 持续监控 3. 构建安全 - 安全构建 - 签名验证 - 完整性检查 ``` **测试阶段**: ``` 1. 安全测试 - SAST - DAST - 渗透测试 2. 漏洞管理 - 漏洞修复 - 回归测试 - 安全验证 3. 发布检查 - 安全检查 - 配置验证 - 发布审批 ``` ### 运行时防护 **监控告警**: ```javascript // 异常监控 window.onerror = function(message, source, lineno, colno, error) { // 记录错误 logError({ message, source, lineno, colno, error: error?.stack }); // 检测异常 if (isSuspiciousError(error)) { // 发送告警 sendAlert('Suspicious error detected'); } }; // 安全事件监控 function monitorSecurityEvents() { // 监控 XSS 尝试 // 监控 CSRF 尝试 // 监控异常请求 } ``` **响应措施**: ```javascript // 自动响应 function handleSecurityIncident(incident) { switch (incident.type) { case 'XSS_ATTEMPT': // 记录并阻止 blockUser(incident.user); break; case 'CSRF_ATTEMPT': // 记录并使令牌失效 invalidateTokens(incident.user); break; case 'BRUTE_FORCE': // 限制请求 rateLimit(incident.ip); break; } } ``` --- ## 总结与思考 ### 核心要点回顾 1. **前端安全** - XSS 防护 - CSP 策略 - 框架安全 2. **依赖安全** - 依赖审计 - 版本管理 - 持续监控 3. **存储安全** - Cookie 安全 - LocalStorage - 令牌管理 ### 深入思考问题 1. **微前端安全**? - 多应用集成 - 信任边界 - 通信安全 2. **WebAssembly 安全**? - 新攻击面 - 性能与安全 - 检测挑战 3. **PWA 安全**? - Service Worker - 离线安全 - 推送安全 ### 实战建议 **开发人员**: 1. 安全编码 2. 框架最佳实践 3. 依赖管理 4. 安全测试 **安全人员**: 1. 前端测试 2. 代码审计 3. 监控告警 4. 事件响应 **架构师**: 1. 安全架构 2. CSP 设计 3. 认证设计 4. 持续改进 --- ## 参考资料 ### 学习资源 - [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) ### 工具资源 - [DOMPurify](https://github.com/cure53/DOMPurify) - [ESLint Security](https://github.com/nodesecurity/eslint-plugin-security) - [Snyk](https://snyk.io/) ### 书籍推荐 - 《前端安全》 - 《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) - [CSP Evaluator](https://csp-evaluator.withgoogle.com/) --- **标记 明日预告**:Day 71 - Web 安全综合实战 > 本文内容仅供学习和研究使用,请勿用于非法目的。所有实验请在隔离环境中进行。 --- *本文是 365 天信息安全技术系列的第 70 篇,Web 安全部分第 40 篇,精编版本*
myh0st
2026年4月13日 23:15
分享文档
收藏文档
上一篇
下一篇
微信扫一扫
复制链接
手机扫一扫进行分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码