第 7 卷
• 输入合法性校验:根据业务场景,对用户输入的数据类型、格式、长度进行严格校验,拒绝不符合
符合邮箱格式。
- 实现方式:使用正则表达式校验(如手机号正则 /^1[3-9]\d{9}$/),校验不通过则禁止提
交请求。
• 特殊字符过滤/转义:对用户输入中的SQL特殊字符(如单引号'、双引号"、分号;、逗号,、星号*、-
-、OR、AND等)进行过滤或转义,避免恶意SQL代码被拼接。
- 示例:将单引号'转义为'',防止用户输入的单引号打破SQL语句的字符串闭合。
- 注意:前端过滤仅为辅助,后端必须再次进行过滤/转义(前端过滤可被绕过,如攻击者直接调用
接口)。
- 限制输入长度,减少攻击空间
• 对所有用户输入字段设置合理的长度限制(如用户名3-20位、密码6-20位、评论内容0-500字),
超出长度则禁止提交。
• 目的:缩短攻击者可注入的恶意SQL代码长度,降低攻击成功率(复杂的恶意SQL语句通常需要较
长字符)。
- 避免前端拼接SQL相关字符串
• 禁止在前端将用户输入拼接到任何类似SQL的字符串中(即使是前端模拟数据展示),避免被攻击
者利用前端代码构造恶意SQL。
• 示例:前端搜索功能,禁止将用户输入的关键词直接拼接到类似 SELECT * FROM goods
WHERE name='xxx' 的字符串中展示,仅传递关键词给后端,由后端处理。
- 使用安全的请求方式与接口设计
• 敏感操作使用POST请求:GET请求的参数会暴露在URL中,易被攻击者篡改和利用;敏感接口
(如登录、注册、数据提交)优先使用POST请求,参数放在请求体中。
• 避免在URL中暴露敏感参数:如用户ID、订单ID、数据库表名等敏感信息,不要作为URL参数传递
(易被攻击者猜测和篡改),可通过Session、Token等方式在后端获取。
- 前端提示与安全引导
• 对用户输入的非法内容,给出明确的错误提示(如“用户名仅允许字⺟、数字、下划线”),引导
用户输入合法数据。
• 避免给出详细的错误信息:如用户登录失败时,提示“用户名或密码错误”,而非“用户名不存
在”或“密码错误”,防止攻击者通过错误信息猜测数据库结构。
- 配合后端实现参数化传递
• 前端向后端传递用户输入时,采用“键值对”的形式传递原始数据(而非拼接后的字符串),让后
• 示例:登录请求传递 {username: "admin", password: "123456"},而非传递拼接后的
字符串 "username=admin&password=123456"(后端仍需参数化处理)。
- 关键提醒:前端所有防御措施仅为“辅助防护”,无法替代后端的核心防御(如参数化查询、ORM
框架、最小权限原则等),最终安全保障必须由后端实现。
- HTTPS如何保证Web通信的安全性?
HTTPS(Hyper Text Transfer Protocol Secure)是HTTP协议的安全版本,通过在HTTP和TCP之间加入SSL/TLS加密层,实现对Web通信过程中数据的加密传输、身份认证和数据完整性校验,解决
HTTP协议明文传输带来的窃听、篡改、伪造等安全问题。其核心目标是保证通信的「机密性」「完整性」「真实性」。
一、HTTPS的核心安全机制(SSL/TLS协议)
HTTPS的安全性依赖于SSL/TLS协议(目前主流为TLS 1.2/1.3),其核心机制包括「握手协议」「记录协议」和「密钥交换算法」,具体通过以下4个关键步骤保证安全:
- 身份认证:验证服务器身份,防止伪装攻击
• 核心原理:服务器需部署由权威CA(证书颁发机构,如Let's Encrypt、Verisign)签发的数字证
书,证书中包含服务器的公钥、域名、证书有效期等信息。客户端(浏览器)与服务器建立连接时,会验证服务器证书的合法性,确保连接的是真实的目标服务器,而非攻击者伪装的服务器。
• 验证流程:
- 服务器向客户端发送数字证书。
- 客户端验证证书:检查证书是否由可信CA签发、证书是否在有效期内、证书中的域名是否与当前
访问的域名一致、证书是否被篡改(通过CA的公钥验证证书的数字签名)。
- 验证通过:继续建立连接;验证失败:浏览器提示“证书不安全”,阻止用户访问。
- 密钥协商:生成对称加密密钥,保证密钥安全
• 核心问题:加密传输需要密钥,但密钥本身不能明文传输(否则会被窃听)。HTTPS通过「非对称
加密」协商生成「对称加密」的密钥,兼顾安全性和传输效率。
• 协商流程(以RSA算法为例):
- 客户端生成一个随机数(预主密钥),用服务器证书中的公钥对其加密后发送给服务器。
- 服务器用自己的私钥解密,获取预主密钥。
- 客户端和服务器分别使用预主密钥和各自生成的随机数,通过相同的算法生成「会话密钥」(对
称加密密钥),后续通信均使用该密钥加密。
• 优化(TLS 1.3):采用ECDHE(椭圆曲线Diffie-Hellman密钥交换)算法,支持“0-RTT”握手,
• 加密方式:密钥协商完成后,客户端与服务器之间的所有数据传输(HTTP请求头、请求体、响应
头、响应体)均使用「对称加密」(如AES算法)进行加密,加密后的内容为密文,即使被攻击者窃听,也无法还原为明文。
• 为什么用对称加密?:对称加密算法(如AES)加密/解密速度快,适合大量数据传输;非对称加密
(如RSA)速度慢,仅用于密钥协商阶段。
- 数据完整性校验:防止数据被篡改
• 核心原理:客户端和服务器在传输数据时,会对数据进行哈希运算(如SHA-256)生成「消息摘
要」(数据的唯一指纹),并将摘要与数据一起加密传输。接收方解密后,对数据重新进行哈希运算,对比生成的摘要与接收的摘要是否一致,若不一致则说明数据被篡改,直接丢弃。
- 实现方式:SSL/TLS的记录协议会自动对数据进行完整性校验,无需应用层(HTTP)额外处理。
二、HTTPS与HTTP的核心区别
| 维度 | HTTP | HTTPS |
|---|---|---|
| 传输方式 | 明文传输,无加密 | SSL/TLS加密传输 |
| 端口 | 80 | 443 |
| 身份认证 | 无,无法验证服务器身份 | 有,通过数字证书验证服务器 |
身份
数据完整性无校验,易被篡改有,通过消息摘要校验,防止篡改
安全性低,存在窃听、篡改、伪造风高,解决上述安全风险险
性能开销低,无额外加密/解密开销略高,握手阶段和加密/解密有轻微开销(TLS 1.3已大幅
优化)
三、HTTPS的局限性补充
- HTTPS仅保证「传输过程」的安全,无法保证服务器端数据存储的安全(如数据库被攻击)。
- 若数字证书被伪造或CA机构不可信,HTTPS的身份认证机制会失效(需选择权威CA签发证书)。
- HTTPS无法防御XSS、CSRF等应用层漏洞(需配合其他安全措施)。
全站分卷索引 · 10 卷
- 1第 1 卷
- 浏览器缓存核心面试题全解析
- 浏览器缓存核心面试题(全解析)
- 1. 浏览器缓存的工作原理
- 完整工作流程
- ◦ ✅ 缓存有效:直接读取本地缓存(强缓存),不发起网络请求,状态码 200 OK (from
- ◦ ❌ 缓存失效:发起条件请求到服务器,服务器根据资源标识判断资源是否更新:
- ▪ 资源未更新:返回 304 Not Modified,无资源体,浏览器复用本地缓存(协商缓
- 缓存存储位置(优先级从高到低)
- • Memory Cache(内存缓存):速度最快,生命周期随浏览器标签页关闭而消失,存储小体积、高
- • Disk Cache(磁盘缓存):速度稍慢,持久化存储,关闭浏览器后仍存在,存储大体积、低频使用
- • Service Worker Cache:独立于浏览器的缓存,可自定义缓存规则,支持离线访问(PWA核
- 2. HTTP头中与缓存策略相关的字段
- 2第 2 卷
- 4. 强缓存和协商缓存(核心区别+定义)
- ✅ 强缓存(本地缓存直接生效,无网络请求)
- • Cache-Control: max-age=xxx 未过期
- • Expires 时间戳未到(客户端时间未超过该值)
- • 无网络请求,加载速度最快
- • 状态码: 200 OK (from disk cache/memory cache)
- • 核心控制字段: Cache-Control(主)、 Expires(辅)
- ✅ 协商缓存(需与服务器验证,轻量网络请求)
- • 强缓存过期( max-age 到期/ Expires 超时)
- • 手动刷新页面(F5),强制跳过强缓存
- • 资源设置 Cache-Control: no-cache
- • 有网络请求,但仅传输少量头部信息,带宽消耗低
- 3第 3 卷
- ✅ 四、CDN缓存协同优化(生产必备)
- ✅ 五、避坑要点(缓存策略常见问题)
- ✅ 六、最终缓存策略总结(生产环境标配)
- 追加交付物提议
- 6. 浏览器缓存如何影响HTTP请求?不同的缓存策略会如何改变请求响
- 一、浏览器缓存对HTTP请求的核心影响
- • 拦截请求:强缓存生效时,浏览器直接复用本地缓存,不向服务器发起任何HTTP请求,彻底跳过
- • 优化请求:协商缓存时,浏览器发起“条件请求”(仅携带资源标识等少量头部信息),服务器仅
- • 改变响应逻辑:缓存存在时,服务器可能返回304(资源未更新)而非200(新资源),浏览器需复
- • 延长资源复用周期:合理的缓存策略可让资源在本地重复使用,减少同一资源的重复下载请求,提
- 二、不同缓存策略对请求响应的具体改变
- • 强制刷新(Ctrl+F5):完全禁用缓存,请求头携带Cache-Control: no-cache、Pragma: no-
- 4第 4 卷
- • Local Storage/Session Storage:虽非HTTP缓存,但可查看页面存储的本地数据,辅助判断是
- • Clear storage:一键清除所有缓存(包括磁盘/内存缓存、Service Worker缓存),方便重新测试
- 三、调试缓存的核心流程(实战步骤)
- 8. 描述浏览器如何处理强缓存和协商缓存的决策过程
- 完整决策流程(步骤拆解)
- 特殊决策场景(影响流程的关键因素)
- • 资源无缓存规则:服务器未返回任何缓存相关HTTP头,浏览器默认不缓存该资源,每次请求都从
- • 设置Cache-Control: no-cache:强制跳过强缓存流程,直接进入协商缓存,每次请求都需向服务
- • 设置Cache-Control: no-store:完全禁用缓存,浏览器不存储任何资源副本,每次请求都从服务
- • 手动/强制刷新:手动刷新(F5)强制跳过强缓存,进入协商缓存;强制刷新(Ctrl+F5)禁用所有
- 9. 其他缓存相关的问题
- 一、缓存穿透(缓存未命中,请求直达服务器)
- 5第 5 卷
- • 核心解决方案:
- 四、CDN缓存与浏览器缓存的协同
- • 核心原则:CDN缓存作为“中间代理缓存”,应与浏览器缓存规则保持一致,同时承担“就近分
- • 协同策略:
- 五、HTTP1.0与HTTP1.1缓存机制的差异
- • HTTP1.0:仅支持Expires(绝对时间戳)和Pragma: no-cache,依赖客户端本地时间,易出现缓
- • HTTP1.1:新增Cache-Control(支持max-age、public/private等多指令)、ETag,优先级高于
- 一、XSS攻击的三种主要类型
- • 攻击流程:攻击者将恶意脚本注入到目标网站的数据库中(如评论区、用户资料、留言板等可提交
- • 攻击流程:攻击者构造包含恶意脚本的URL → 诱导用户点击该URL → 目标网站将URL中的恶意脚
- • 特点:恶意脚本不存储在服务器,仅存在于攻击URL中,需用户主动点击才能触发,危害相对存储
- • 攻击流程:攻击者构造包含恶意脚本的URL → 用户点击后,目标网站的前端JavaScript代码从URL
- 6第 6 卷
- 11. 解释跨站请求伪造(CSRF)攻击及其防御机制
- 一、CSRF攻击的核心原理与流程
- • 核心前提:用户已登录目标网站,浏览器保存了该网站的身份凭证(如Session Cookie),且
- • 攻击流程:
- 二、CSRF攻击的典型场景
- 三、CSRF的核心防御机制(前端+后端协同)
- • 原理:服务器为每个登录用户生成一个唯一的、随机的CSRF Token(令牌),并将Token存储在
- • 实现流程:
- • 前端注意事项:AJAX请求需主动在请求头中携带Token,避免遗漏;禁止将Token存储在Cookie
- • 原理:HTTP请求头中的Referer字段记录了请求的来源页面URL,Origin字段记录了请求的来源域
- • 实现方式:
- • 局限性:Referer可能被浏览器插件、代理服务器篡改或隐藏(如用户设置隐私模式),无法作为唯
- 7第 7 卷
- • 输入合法性校验:根据业务场景,对用户输入的数据类型、格式、长度进行严格校验,拒绝不符合
- • 特殊字符过滤/转义:对用户输入中的SQL特殊字符(如单引号'、双引号"、分号;、逗号,、星号*、-
- • 对所有用户输入字段设置合理的长度限制(如用户名3-20位、密码6-20位、评论内容0-500字),
- • 目的:缩短攻击者可注入的恶意SQL代码长度,降低攻击成功率(复杂的恶意SQL语句通常需要较
- • 禁止在前端将用户输入拼接到任何类似SQL的字符串中(即使是前端模拟数据展示),避免被攻击
- • 示例:前端搜索功能,禁止将用户输入的关键词直接拼接到类似 SELECT * FROM goods
- • 敏感操作使用POST请求:GET请求的参数会暴露在URL中,易被攻击者篡改和利用;敏感接口
- • 避免在URL中暴露敏感参数:如用户ID、订单ID、数据库表名等敏感信息,不要作为URL参数传递
- • 对用户输入的非法内容,给出明确的错误提示(如“用户名仅允许字⺟、数字、下划线”),引导
- • 避免给出详细的错误信息:如用户登录失败时,提示“用户名或密码错误”,而非“用户名不存
- • 前端向后端传递用户输入时,采用“键值对”的形式传递原始数据(而非拼接后的字符串),让后
- • 示例:登录请求传递 {username: "admin", password: "123456"},而非传递拼接后的
- 8第 8 卷
- 14. 解释同源策略(SOP)及其对Web安全的意义
- 一、同源的定义(三个条件必须同时满足)
- • 协议(Protocol)相同:如都是HTTP或都是HTTPS(http://example.com与
- • 域名(Domain)相同:如example.com与www.example.com不同源(子域名不同),
- • 端口(Port)相同:如http://example.com:80与http://example.com:8080不同源(默认端口可
- 二、同源策略的核心限制范围
- • 不同源的脚本无法访问当前源页面的DOM元素,如通过iframe嵌入的不同源页面,父页面无法获取
- • 示例:攻击者在恶意网站中嵌入银行网站的iframe,由于同源策略限制,恶意脚本无法获取iframe
- • 不同源的脚本无法访问当前源的本地存储数据,包括Cookie、localStorage、sessionStorage、
- • 示例:恶意网站的脚本无法读取用户访问银行网站时存储在localStorage中的用户信息,也无法获
- • 不同源的脚本无法向当前源发起AJAX/Fetch请求(跨域请求),浏览器会拦截该请求,返回CORS
- • 示例:前端项目部署在http://frontend.com,无法直接通过AJAX请求http://backend.com的接口
- 9第 9 卷
- • 场景描述:PWA(渐进式Web应用)等支持离线访问的应用,对离线存储的业务数据(如离线订
- 二、前端加密的核心限制(不可替代后端加密)
- • 前端加密的密钥必须存储在前端代码中(如JS文件)或通过网络传输到前端,攻击者可通过查看源
- • 示例:前端使用RSA加密密码,公钥存储在JS文件中,攻击者可直接获取公钥,无法保证加密的安
- • 前端代码完全暴露在客户端,攻击者可通过修改JS代码篡改加密逻辑(如禁用加密、替换为明文传
- • 示例:攻击者通过浏览器开发者工具修改登录页面的JS代码,绕过密码加密逻辑,直接提交明文密
- • 前端加密依赖浏览器的加密API(如Web Crypto API),若浏览器存在安全漏洞,或用户使用被篡
- • 前端加密仅能保证数据传输过程的安全性,无法保证后端接收数据后的数据存储、处理过程的安全
- • 前端加密(尤其是非对称加密)需要消耗浏览器的CPU资源,可能影响页面性能(如复杂加密逻辑
- • 部分旧浏览器不支持现代加密API(如Web Crypto API),存在兼容性问题,需额外处理降级方
- 三、前端加密的使用原则
- • 前端加密仅作为「补充防护」,核心安全保障必须依赖后端加密(如HTTPS、后端参数验证、数据
- 10第 10 卷
- • 实现方式:使用AJAX请求拦截器,对需要特定权限的接口,前端先验证用户是否拥有该权限,无权
- • 注意:前端接口级权限控制仅为辅助,后端必须对每个敏感接口再次验证用户权限,防止攻击者绕
- 三、前端认证和授权的安全加固措施
- • 使用HTTPS协议:所有认证相关的请求(登录、令牌刷新、敏感接口)必须通过HTTPS传输,防
- • 安全存储令牌:
- • 设置合理的令牌有效期:JWT令牌有效期不宜过长(如2小时),同时实现令牌刷新机制(Refresh
- • 防范XSS攻击窃取令牌:开启CSP(内容安全策略)、对用户输入进行过滤编码、避免使用
- • 防范CSRF攻击:若使用Cookie存储令牌,必须设置SameSite属性;同时对敏感操作(如修改密
- • 用户退出登录时清理数据:用户点击退出登录后,前端需清除存储的令牌、权限信息等,同时调用
- • 敏感操作二次验证:对核心敏感操作(如修改密码、绑定手机号、大额转账),添加验证码、短信
- 四、常见问题与避坑要点
- • ❌ 仅依赖前端权限控制:后端必须对所有敏感接口进行权限验证,前端权限控制仅为用户体验优