课程进度 3% · 第1/10章第1/10章 · 标签 1/4
— 1 —
前端安全概述
1. 前端安全的重要性
前端安全是Web应用安全的第一道防线。随着Web应用的复杂性增加，前端面临的安全威胁也越来越多。前端安全不仅关系到用户体验，更关系到整个应用的安全性。
2. 同源策略（Same-Origin Policy）
同源策略是浏览器最基本的安全机制，它限制了来自不同源的文档或脚本之间的交互。同源的定义包括：协议相同、域名相同、端口相同。
javascript
1
// 同源示例
2
http://example.com/page1.html 和 http://example.com/page2.html 是同源
3
http://example.com 和 https://example.com 不是同源
4
http://example.com 和 http://api.example.com 不是同源
5
http://example.com:80 和 http://example.com:8080 不是同源
— 2 —
3. 内容安全策略（CSP）
CSP是一个额外的安全层，用于检测和减轻某些类型的攻击，如XSS和数据注入攻击。它通过指定允许加载的资源类型和来源来实现。
javascript
1
// CSP配置示例
2
Content-Security-Policy:
3
default-src 'self'; // 只允许从同源加载资源
4
script-src 'self' https://trusted-cdn.com; // 允许从指定CDN加载脚本
5
style-src 'self' 'unsafe-inline'; // 允许内联样式
6
img-src 'self' data: https:; // 允许从同源、data URL和HTTPS加载图片
7
connect-src 'self' https://api.example.com; // 允许向指定API发送请求
4. 跨域资源共享（CORS）
CORS是一种机制，允许Web应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。
javascript
1
// 服务器端CORS配置示例（Node.js/Express）
2
app.use(cors({
3
origin: 'https://trusted-site.com', // 允许的源
4
methods: ['GET', 'POST'], // 允许的HTTP方法
5
allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
6
credentials: true, // 允许发送凭证
7
maxAge: 86400 // 预检请求的缓存时间
8
}));
9
10
// 客户端跨域请求示例
11
fetch('https://api.example.com/data', {
12
method: 'POST',
13
credentials: 'include', // 包含凭证
14
headers: {
15
'Content-Type': 'application/json'
16
},
17
body: JSON.stringify({ data: 'example' })
18
});