乐闻
什么是 WAF（Web 应用防火墙）？如何使用 WAF 防止 XSS 攻击？## 答案
WAF（Web Application Firewall，Web 应用防火墙）是一种重要的安全设备，用于保护 Web 应用免受各种攻击，包括 XSS 攻击。WAF 通过检测和过滤 HTTP 流量，可以有效地阻止 XSS 攻击。
### WAF 的基本概念
**定义：**
WAF 是一种部署在 Web 应用前面的安全设备，用于监控、过滤和阻止进出 Web 应用的 HTTP 流量。它可以帮助保护 Web 应用免受各种攻击，如 SQL 注入、XSS、CSRF 等。
**工作原理：**
1. 监控所有进入 Web 应用的 HTTP 请求
2. 分析请求的内容、头部、参数等
3...
前端 · 2月19日 16:13
什么是 HttpOnly Cookie？如何使用 HttpOnly Cookie 防止 XSS 攻击？## 答案
HttpOnly Cookie 是一种重要的安全机制，用于防止 XSS 攻击窃取 Cookie。它是 Cookie 的一个属性，当设置为 true 时，JavaScript 无法通过 `document.cookie` 访问该 Cookie。
### HttpOnly Cookie 的核心概念
**定义：**
HttpOnly 是 Cookie 的一个属性，当设置为 true 时，浏览器会禁止 JavaScript 访问该 Cookie，从而防止恶意脚本通过 XSS 攻击窃取 Cookie。
**基本语法：**
```javascript
// 设置 HttpOnly...
前端 · 2月19日 15:56
什么是 SameSite Cookie？如何使用 SameSite Cookie 防止 CSRF 和 XSS 攻击？## 答案
SameSite Cookie 属性是防止 CSRF 和 XSS 攻击的重要安全机制。它控制浏览器是否在跨站请求中发送 Cookie，从而减少攻击面。
### SameSite Cookie 的基本概念
**定义：**
SameSite 是 Cookie 的一个属性，用于控制浏览器在跨站请求中是否发送 Cookie。它可以帮助防止 CSRF 攻击，并在一定程度上减少 XSS 攻击的影响。
**基本语法：**
```javascript
// 设置 SameSite Cookie
res.cookie('sessionId', sessionId, {
httpOn...
前端 · 2月19日 16:15
什么是 DOM 型 XSS？如何检测和防护 DOM 型 XSS？## 答案
DOM 型 XSS（DOM-based XSS）是一种特殊的 XSS 攻击类型，它与传统的存储型和反射型 XSS 有本质区别。DOM 型 XSS 的漏洞完全存在于客户端的 DOM（文档对象模型）操作中，不涉及服务器的数据处理。
### DOM 型 XSS 的核心原理
**定义：**
DOM 型 XSS 是指攻击者利用客户端 JavaScript 代码中的漏洞，通过修改 DOM 结构来注入恶意脚本。这种攻击不经过服务器，恶意脚本直接在浏览器中执行。
**与传统 XSS 的区别：**
- **存储型 XSS**：恶意脚本存储在服务器数据库中
- **反射型 XSS**：恶...
前端 · 2月19日 15:52
什么是 Content Security Policy（CSP）？如何使用 CSP 防止 XSS 攻击？## 答案
Content Security Policy（CSP，内容安全策略）是一种强大的安全机制，用于防止 XSS 攻击、数据注入攻击和其他类型的代码注入攻击。CSP 通过限制浏览器可以加载和执行的资源来源，有效地减少了攻击面。
### CSP 的核心概念
**定义：**
CSP 是一个 HTTP 响应头，它告诉浏览器哪些资源（如脚本、样式、图片、字体等）可以从哪些来源加载。通过定义白名单，CSP 可以防止恶意脚本的执行。
**基本语法：**
```
Content-Security-Policy: <policy-directive>; <policy-directive...
前端 · 2月19日 15:53
Chrome 浏览器的缓存机制有哪些？## 浏览器缓存机制
Chrome 浏览器使用多种缓存机制来提高页面加载速度和减少网络请求。
### 缓存类型
1. **强缓存**
- 通过 HTTP 头控制：Cache-Control 和 Expires
- Cache-Control: max-age=3600 表示缓存 1 小时
- 优先级高于协商缓存
2. **协商缓存**
- 通过 HTTP 头控制：ETag 和 Last-Modified
- ETag：资源内容的唯一标识
- Last-Modified：资源最后修改时间
- 需要向服务器验证资源是否变化
3. **Ser...
前端 · 2月20日 13:28
如何开发 whistle 插件，插件的基本结构是什么？## 答案
Whistle 支持插件系统，可以通过开发插件来扩展其功能，实现自定义的网络请求处理逻辑。
### 插件开发基础
#### 1. 创建插件项目
```bash
mkdir whistle-plugin-demo
cd whistle-plugin-demo
npm init -y
```
#### 2. 创建插件入口文件
创建 `index.js` 文件：
```javascript
module.exports = function(server, options) {
// 插件初始化逻辑
console.log('Whistle plugin de...
前端 · 2月19日 16:31
whistle 支持哪些协议，如何处理不同协议的代理？## 答案
Whistle 支持多种协议的代理，包括 HTTP、HTTPS、WebSocket、HTTP/2 等，可以满足不同场景的调试需求。
### 支持的协议
#### 1. HTTP 协议
**基本代理：**
```
www.example.com host 127.0.0.1:8080
```
**转发代理：**
```
www.example.com forward http://127.0.0.1:8080
```
**修改请求：**
```
www.example.com reqHeaders://{custom-headers.json}
```
#### ...
前端 · 2月19日 16:38
whistle 如何与其他开发工具集成，有哪些集成方案？## 答案
Whistle 支持与其他开发工具集成，可以构建完整的开发和调试工作流。
### 与浏览器集成
#### 1. Chrome DevTools 集成
**使用 Chrome DevTools 调试：**
1. 配置浏览器代理指向 whistle
2. 打开 Chrome DevTools
3. 查看 Network 标签
4. whistle 捕获的请求会显示在 DevTools 中
**优势：**
- 结合 Chrome DevTools 的强大功能
- 查看详细的请求和响应信息
- 使用 Chrome 的性能分析工具
#### 2. Firefox Devel...
前端 · 2月19日 16:39
whistle 如何实现数据模拟，有哪些常用的模拟方法？## 答案
Whistle 提供了强大的数据模拟功能，可以在前端开发中模拟接口返回数据，提高开发效率。
### 数据模拟方法
#### 1. 使用 resBody 操作符
直接指定模拟数据：
```
www.example.com/api/user resBody://{"code":0,"data":{"name":"张三","age":25}}
```
#### 2. 使用 Values 文件
创建 Values 文件存储模拟数据：
**创建文件：`mock-user.json`**
```json
{
"code": 0,
"data": {
"id...
前端 · 2月19日 16:31