前端、XSS(跨站脚本攻击,Cross-Site Scripting)

XSS 攻击的三种主要类型

存储型 XSS(持久型)

  • 原理:恶意脚本被永久存储在服务器(如数据库、评论内容),用户访问包含恶意脚本的页面时触发
  • 示例:攻击者在论坛的评论区提交 ,其他用户查看评论时自动执行。

反射型 XSS(非持久型)

DOM 型 XSS

  • 原理:恶意脚本通过前端 DOM 操作直接修改页面内容,不经过服务器处理
  • 示例:攻击者利用 location.hash 或 document.write() 动态插入恶意代码。

XSS 攻击的危害

  • 窃取用户 Cookie(会话劫持
  • 伪造用户操作(如转账、发帖)
  • 钓鱼攻击(伪造登录页面)
  • 植入恶意软件

防御 XSS 的核心方法

1. 输入验证与过滤

  • 原则:对用户输入进行严格校验,过滤或转义危险字符(如 <, >, &, ", ')

    // 示例:过滤 HTML 标签
    function sanitizeInput(input) {
    return input.replace(/<[^>]*>/g, "");
    }

注意:不要依赖前端验证,必须结合服务端验证。

2.输出编码

  • 原则:将用户输入的内容在输出到页面时进行编码,确保浏览器将其视为文本而非可执行代码。

    HTML 内容:转义 <, >, & 等字符。

    function escapeHTML(str) {
    return str.replace(/[&<>'"]/g,
    tag => ({
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
    }[tag]));
    }

  • HTML 属性:使用 setAttribute 或框架内置的绑定语法。

  • JavaScript 内容:避免直接将用户输入拼接进

3.使用安全的前端框架

  • 现代框架(如 React、Vue、Angular)默认会进行输出编码,避免 XSS:

    // React 自动转义内容

    {userInput}

    例外:使用 dangerouslySetInnerHTML 或 v-html 时仍需手动过滤。

4. 设置 HTTP 安全头

  • Content Security Policy (CSP):限制脚本来源,禁止内联脚本:

    Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

  • HttpOnly Cookie:防止 JavaScript 读取敏感 Cookie:

    Set-Cookie: sessionId=abc123; HttpOnly; Secure

5. 避免直接操作 DOM

  • 使用 textContent 替代 innerHTML:

    // 错误:可能执行恶意代码
    element.innerHTML = userInput;

    // 正确:自动转义
    element.textContent = userInput;

6. 其他措施

  • CORS 配置:限制跨域资源访问。
  • XSS 漏洞扫描:使用工具(如 OWASP ZAP、Burp Suite)定期检测。

防御示例:综合方案

  • 服务端(Node.js + Express):

    const express = require("express");
    const app = express();
    const helmet = require("helmet");

    // 设置 CSP 和 HttpOnly
    app.use(helmet());
    app.use(helmet.contentSecurityPolicy({
    directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "trusted-cdn.com"]
    }
    }));

  • 前端(React):

    function Comment({ text }) {
    // 自动转义用户输入
    return

    {text}
    ;
    }

  • 数据库层:

存储用户输入前进行过滤。

总结

  • 核心原则:永远不要信任用户输入!
  • 多层次防御:输入过滤 + 输出编码 + 安全框架 + HTTP 头 + 安全编码习惯。
  • 工具化:使用 CSP、现代框架、漏洞扫描工具降低风险。
相关推荐
逃逸线LOF35 分钟前
品优购项目(HTML\CSS)
前端·css·html
困惑阿三1 小时前
解决 iTerm2 中 nvm 不生效的问题(Mac 环境)
开发语言·前端·macos·bash
charlee441 小时前
使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)
前端·javascript·vite·markdown·vditor
GISer_Jing2 小时前
前端工程化 Source Map(源码映射)详解
前端·webpack
layman05282 小时前
Vue中的 VueComponent
前端·javascript·vue.js
水星灭绝3 小时前
HTML 计算网页的PPI
前端·javascript·html
恶龙呼呼4 小时前
xhr、fetch和axios
前端
sunbyte5 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Split Landing Page(拆分展示页)
前端·javascript·css·vue·tailwindcss
疯狂的沙粒6 小时前
React与Vue的内置指令对比
开发语言·前端·javascript·vue.js
菥菥爱嘻嘻6 小时前
React---day4
前端·react.js·前端框架