前端、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、现代框架、漏洞扫描工具降低风险。
相关推荐
WebInfra1 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋2 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴2 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农3 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan3 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown4 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh4 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥4 小时前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球4 小时前
css新特性
前端·css
Nicholas684 小时前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端