前端安全防护指南(三)反射型XSS

什么是反射型XSS

恶意脚本通过URL参数等方式传递给服务器，服务器将其嵌入响应页面并返回给用户，脚本在用户浏览器中执行。
通常通过诱骗用户点击恶意链接实现。

反射型XSS示例

场景：一个搜索功能将用户输入的内容直接显示在页面上。
攻击原理：攻击者构造一个包含恶意脚本的URL，诱骗用户点击。
示例

javascript 复制代码

 假设网页代码如下：
 
 <p>搜索结果：<?php echo $_GET['query']; ?></p>
 攻击者构造以下URL：
 http://example.com/search?query=<script>alert('XSS')</script>
 当用户点击该链接时，服务器返回的页面会直接执行脚本：
 <p>搜索结果：<script>alert('XSS')</script></p>
 用户的浏览器会弹出一个警告框，表明脚本已执行。

代码示例

python 复制代码

from flask import Flask, request
from html import escape

app = Flask(__name__)

# ======================
# 漏洞示例（反射型XSS）
# ======================
@app.route('/vulnerable')
def vulnerable_search():
    # 直接获取用户输入（未做任何过滤）
    user_input = request.args.get('query', '')
    
    # 将用户输入直接拼接到HTML中（存在XSS漏洞）
    return f'''
    <!DOCTYPE html>
    <html>
    <head>
        <title>搜索功能演示</title>
    </head>
    <body>
        <h1>搜索功能（存在漏洞）</h1>
        <form method="GET">
            <input type="text" name="query" placeholder="输入搜索内容">
            <button type="submit">搜索</button>
        </form>
        <p>搜索结果：{user_input}</p>
    </body>
    </html>
    '''

# ======================
# 防御示例（输入转义）
# ======================
@app.route('/safe')
def safe_search():
    # 获取用户输入并进行HTML转义
    user_input = request.args.get('query', '')
    safe_input = escape(user_input)  # 关键防御步骤
    
    return f'''
    <!DOCTYPE html>
    <html>
    <head>
        <title>安全搜索功能</title>
    </head>
    <body>
        <h1>搜索功能（已修复）</h1>
        <form method="GET">
            <input type="text" name="query" placeholder="输入搜索内容">
            <button type="submit">搜索</button>
        </form>
        <p>搜索结果：{safe_input}</p>
    </body>
    </html>
    '''

if __name__ == '__main__':
    app.run(debug=True)

代码运行示例说明

html 复制代码

反射型XSS示例

运行程序：python app.py

访问：http://localhost:5000/vulnerable?query=<script>alert('XSS')</script>
或使用更可靠的payload：http://localhost:5000/vulnerable?query=<img+src=x+onerror=alert('XSS')>

特别注意：python版本：3.13.2
特别声明：上述仅是反射型XSS的简单示例，禁止任何人利用示例用来违反法律。