乐闻
如何在 RxJS 中防止内存泄漏？## 内存泄漏的原因
在 RxJS 中，内存泄漏主要发生在以下几种情况：
### 1. 未取消订阅
最常见的内存泄漏原因是订阅了 Observable 但没有取消订阅。
```javascript
// ❌ 错误示例：内存泄漏
class MyComponent {
constructor() {
this.data$ = http.get('/api/data').subscribe(data => {
console.log(data);
});
}
}
// 组件销毁时，订阅仍然存在，导致内存泄漏
```
### 2. 长期运行的 Ob...
前端 · 2月19日 18:54
whistle 如何支持 WebSocket 代理和调试？## 答案
Whistle 提供了 WebSocket 代理功能，可以捕获、调试和修改 WebSocket 连接和消息。
### WebSocket 代理基础
#### 1. 基本 WebSocket 代理
**配置规则：**
```
ws://example.com host 127.0.0.1:8080
wss://example.com host 127.0.0.1:8080
```
**或者使用 forward 操作符：**
```
ws://example.com forward ws://127.0.0.1:8080
wss://example.com forwar...
前端 · 2月19日 16:35
whistle 在实际开发中有哪些应用场景和实战技巧？## 答案
Whistle 在实际开发中有许多实用的应用场景，可以大大提高开发效率和问题排查能力。
### 常见应用场景
#### 1. 本地开发调试
**场景描述：**
前端开发时需要调用后端接口，但后端服务在本地运行，需要将线上域名指向本地服务。
**解决方案：**
```
# 将线上域名指向本地服务
www.example.com host 127.0.0.1:3000
api.example.com host 127.0.0.1:3001
# 或者使用 forward 操作符
www.example.com forward http://127.0.0.1:3000
...
前端 · 2月19日 16:34
whistle 常见问题有哪些，如何排查和解决？## 答案
Whistle 在实际使用中可能会遇到各种问题，了解常见问题及其解决方法可以提高工作效率。
### 安装和启动问题
#### 1. 安装失败
**问题：**
```bash
npm install -g whistle
# 报错：EACCES: permission denied
```
**解决方法：**
**方法一：使用 sudo（Mac/Linux）**
```bash
sudo npm install -g whistle
```
**方法二：修改 npm 目录权限**
```bash
sudo chown -R $(whoami) ~/.npm
sud...
前端 · 2月19日 16:40
whistle 和 Charles 有什么区别，如何选择使用？## 答案
Whistle 和 Charles 都是常用的网络调试代理工具，但它们在设计理念、功能特性和使用场景上有所不同。
### 核心差异对比
| 特性 | Whistle | Charles |
|------|---------|---------|
| 开源性质 | 完全开源免费 | 商业软件（有免费版） |
| 开发语言 | Node.js | Java |
| 配置方式 | 规则配置，更灵活 | 图形界面，更直观 |
| 插件系统 | 支持插件扩展 | 支持扩展 |
| 跨平台 | 完美支持 Windows/Mac/Linux | 主要支持 Windows/Mac |...
前端 · 2月19日 16:31
什么是 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