前端、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、现代框架、漏洞扫描工具降低风险。
相关推荐
患得患失94917 分钟前
【前端】【总复习】HTML
前端·html
zhangguo20021 小时前
Vue之脚手架与组件化开发
前端·javascript·vue.js
夏子曦6 小时前
webpack 的工作流程
前端·webpack·node.js
麻芝汤圆6 小时前
在 Sheel 中运行 Spark:开启高效数据处理之旅
大数据·前端·javascript·hadoop·分布式·ajax·spark
yrldjsbk7 小时前
uniapp开发09-设置一个tabbar底部导航栏且配置icon图标
前端·uni-app
源码方舟7 小时前
【HTML5】显示-隐藏法 实现网页轮播图效果
前端·javascript·html·css3·html5
二川bro7 小时前
依赖注入详解与案例(前端篇)
前端
神秘代码行者9 小时前
Vue项目Git提交流程集成
前端·vue.js·git
阿黄学技术10 小时前
Vite简单介绍
前端·前端框架·vue
264玫瑰资源库11 小时前
网狐飞云娱乐三端源码深度实测:组件结构拆解与部署Bug复盘指南(附代码分析)
java·开发语言·前端·bug·娱乐