权限体系之-20-passport 安全之 XSS

chat

是什么？

好的，咱们把 XSS 攻击一次讲透，从“是什么 → 怎么发生 → 有哪些类型 → 有多危险 → 如何防 → 实战最佳实践”全程打通。

---

一、什么是 XSS？

XSS（Cross-Site Scripting，跨站脚本攻击） 简单说就是：

攻击者把恶意 JavaScript 注入到页面中，当其他用户访问页面时，这段脚本就在他们浏览器中执行。

本质： 浏览器“信任了不该信任的内容”，把用户输入当成了代码执行。

核心公式：

用户输入 → 未过滤 → 直接渲染到页面 → 浏览器执行

---

二、XSS 能干什么？（为什么危险）

XSS 不只是弹个 alert，它是真·高危漏洞：

能力	实际后果
读取 Cookie / Token	劫持登录态，直接接管账号
模拟用户操作	自动发帖、转账、改资料
页面钓鱼	嵌入假登录框骗密码
远程加载木马	植入键盘记录，长期监控
绕过权限系统	构造后台请求

✅ 在企业系统里： XSS = 管理员权限沦陷 = 数据泄露 / 系统失控

---

三、XSS 的三大类型

1. 反射型 XSS（Reflected）

用户输入的数据立刻返回到页面中。

典型场景：

/search?keyword=<script>恶意代码</script>

页面直接渲染 keyword，就被执行。

特点：

• 需要诱导点击链接
• 不持久
• 常见于搜索、错误页面

---

2. 存储型 XSS（Stored）

恶意代码被存进数据库，所有访问者都会中招。

比如：

• 评论区
• 用户昵称
• 个人简介

攻击者提交：

<script>...</script>

后台存了，所有人加载页面就执行。

✅ 最危险的一种

---

3. DOM 型 XSS

不是后端问题，而是前端 JS 逻辑问题。

例如：

document.getElementById("box").innerHTML = location.hash;

攻击者构造 URL：

http://xxx.com/#<script>代码</script>

浏览器自己执行，服务器完全不知情。

---

四、XSS 常见触发点

🚩 高危位置：

• v-html
• innerHTML
• eval()
• setTimeout(“字符串”)
• new Function()
• document.write()
• location.href 动态拼接

🚩 高风险输入源：

• URL 参数
• 表单内容
• 评论、富文本
• Cookie
• localStorage
• WebSocket 推送

---

五、典型 XSS 漏洞示例

危险写法（Vue）：

<div v-html="userInput"></div>

如果 userInput = <script>steal()</script> 你网页就变攻击平台了。

危险写法（JS）：

element.innerHTML = userContent;

---

六、XSS 防御核心原则

一句话总结：

所有用户输入都是不可信的 所有输出都必须转义

四大防御策略：

1. ✅ 输出时统一转义（核心）
2. ✅ 不信任任何输入
3. ✅ 避免动态执行 JS
4. ✅ 强制 CSP 内容安全策略

---

七、XSS 防御的黄金公式

✅ 正确思想

场景	正确做法
普通文本	转义显示
HTML内容	白名单过滤
JSON数据	严格序列化
URL	encodeURIComponent

---

八、前端 Vue3 防 XSS 实战

1. 永远避免 v-html

❌ 错误：

<div v-html="content"></div>

✅ 安全：

<div><!-- Post Header -->
<header class="intro-header" style="background-image: url('/static/app/res/img/home-bg.jpeg')" >
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1">
        <div class="post-heading">
          <div class="tags">
            
            <a class="tag" href="/tags/#plateform" title="plateform">plateform</a>
            
            <a class="tag" href="/tags/#sh" title="sh">sh</a>
            
          </div>
          <h1>权限体系之-301-java 技术体系开源网关对比 最好是有成熟的限流等组件 可视化控台</h1>
          
          
          <h2 class="subheading"></h2>
          
          <span class="meta">
            Posted by
                    <a class="my-aw" href="/about/">houbb</a>
            on November 20, 2025
          </span>
        </div>
      </div>
    </div>
  </div>
</header>


<article class="post" itemscope itemtype="http://schema.org/BlogPosting">

  <div class="container" style="overflow-y:hidden;">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 post-container">

        <div class="post-content" itemprop="articleBody" style="min-height: 420px;">
          <h1 id="问题">问题</h1>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>java 技术体系开源网关对比 最好是有成熟的限流等组件 可视化控台
</code></pre></div></div>

<p>根据你的需求，我为你对比了Java技术体系下几个主流的开源API网关，其中“限流组件成熟度”和“可视化控制台”是你关注的重点。</p>

<p>下面的表格汇总了四个主流选项的核心信息，可以帮你快速了解。</p>

<table>
  <thead>
    <tr>
      <th style="text-align: left">特性/网关</th>
      <th style="text-align: left">Spring Cloud Gateway</th>
      <th style="text-align: left">Apache ShenYu</th>
      <th style="text-align: left">Netflix Zuul 2</th>
      <th style="text-align: left">WSO2 API Manager</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: left"><strong>核心定位</strong></td>
      <td style="text-align: left">Spring Cloud生态官方网关</td>
      <td style="text-align: left">高性能、全生命周期的API网关</td>
      <td style="text-align: left">Netflix OSS生态网关</td>
      <td style="text-align: left">企业级全功能API管理平台</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>技术架构</strong></td>
      <td style="text-align: left">响应式、非阻塞 (WebFlux + Netty)</td>
      <td style="text-align: left">响应式、非阻塞 (WebFlux)</td>
      <td style="text-align: left">异步非阻塞 (基于Netty)</td>
      <td style="text-align: left">传统、功能全面</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>限流能力</strong></td>
      <td style="text-align: left"><strong>集成主流组件</strong>：可与Sentinel、Resilience4j集成实现。内置基于Redis的请求限流器。</td>
      <td style="text-align: left"><strong>插件化支持强大</strong>：内置基于Redis的多种算法插件（令牌桶、滑动窗等），设计有SPI扩展点。也支持Sentinel等。</td>
      <td style="text-align: left"><strong>依赖自定义</strong>：主要通过编写过滤器实现，或集成Hystrix等外部库。</td>
      <td style="text-align: left"><strong>企业级功能</strong>：作为完整API管理平台的一部分，提供丰富的策略配置。</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>可视化控制台</strong></td>
      <td style="text-align: left"><strong>无官方控制台</strong>：依赖Spring Boot Actuator暴露指标，需自行集成Prometheus+Grafana等监控方案。</td>
      <td style="text-align: left"><strong>提供独立控制台 (ShenYu Admin)</strong>：支持动态配置路由、插件、用户权限等，开箱即用。</td>
      <td style="text-align: left"><strong>无官方控制台</strong>：监控能力有限，需自行集成。</td>
      <td style="text-align: left"><strong>提供完整管理控制台</strong>：包含API发布、生命周期管理、开发者门户、数据分析等全套可视化功能。</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>性能表现</strong></td>
      <td style="text-align: left"><strong>高</strong>：非阻塞模型，吞吐量高，延迟低。</td>
      <td style="text-align: left"><strong>高</strong>：同样基于响应式编程，为高性能设计。</td>
      <td style="text-align: left"><strong>中</strong>：性能优于Zuul 1，但通常低于响应式网关。</td>
      <td style="text-align: left"><strong>中</strong>：功能全面，但架构相对传统，性能非首要优势。</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>主要适用场景</strong></td>
      <td style="text-align: left">Spring Cloud技术栈的微服务项目，追求高性能和生态集成。</td>
      <td style="text-align: left">需要高性能及动态、可视化配置管理的API网关场景。</td>
      <td style="text-align: left">已深度集成Netflix OSS（如Eureka）的遗留项目。</td>
      <td style="text-align: left">需要完整API管理能力（设计、发布、运营、监控）的企业级场景。</td>
    </tr>
  </tbody>
</table>

<h3 id="-各网关详解与你的需求匹配度">🔍 各网关详解与你的需求匹配度</h3>

<p>为了帮你做出更适合的选择，下面对它们的特点和与“成熟限流”及“可视化控台”需求的匹配度进行具体分析：</p>

<ul>
  <li><strong>Spring Cloud Gateway</strong>
    <ul>
      <li><strong>特点</strong>：与Spring Boot/Cloud生态无缝集成，配置灵活（YAML或Java DSL），社区活跃。</li>
      <li><strong>匹配度分析</strong>：
        <ul>
          <li><strong>限流</strong>：通过与Sentinel等成熟组件集成，完全可以实现强大的限流功能。</li>
          <li><strong>可视化</strong>：这是它的主要短板。官方不提供图形化管理界面，你需要额外搭建和配置一整套监控系统（如Prometheus + Grafana）来获得可视化监控，增加了复杂度。</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><strong>Apache ShenYu</strong>
    <ul>
      <li><strong>特点</strong>：国产Apache顶级项目，原生支持热插拔和动态配置。2025年发布的新版本已升级支持JDK 17和Spring Boot 3.x。</li>
      <li><strong>匹配度分析</strong>：
        <ul>
          <li><strong>限流</strong>：<strong>高度匹配</strong>。其“限流插件”设计成熟，提供了多种算法（令牌桶、滑动窗口等）和基于Redis的高性能实现，并有详细的SPI扩展机制文档。</li>
          <li><strong>可视化</strong>：<strong>高度匹配</strong>。独立的 <code class="language-plaintext highlighter-rouge">ShenYu Admin</code> 控制台提供了API、插件、流量的可视化配置与监控管理，开箱即用。</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><strong>Netflix Zuul 2</strong>
    <ul>
      <li><strong>特点</strong>：Zuul的异步非阻塞升级版，适合Netflix OSS技术栈。</li>
      <li><strong>匹配度分析</strong>：与你的需求<strong>匹配度较低</strong>。它没有成熟的内置限流组件和可视化控制台，更多依赖自行开发集成，且社区活跃度已不如前者，通常不建议在新项目中使用。</li>
    </ul>
  </li>
  <li><strong>WSO2 API Manager</strong>
    <ul>
      <li><strong>特点</strong>：一个<strong>完整的API管理平台</strong>，而非单纯的网关。它包含网关、开发者门户、API生命周期管理、计费等功能。</li>
      <li><strong>匹配度分析</strong>：
        <ul>
          <li><strong>限流与可视化</strong>：<strong>完全满足且超出预期</strong>。它提供企业级的流量治理策略和非常完善的可视化管理控制台。</li>
          <li><strong>注意</strong>：它的架构比轻量级网关更重，学习和部署成本更高，更适合需要完整API管理解决方案的大型企业。</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<h3 id="-如何选择">💡 如何选择</h3>
<p>综合来看，你可以根据以下思路进行选择：</p>

<ol>
  <li><strong>首选 Apache ShenYu</strong>：如果你的核心诉求是寻找一个<strong>兼具高性能、成熟开箱即用的限流功能和可视化控制台</strong>的Java网关，ShenYu是最贴合你要求的选择。</li>
  <li><strong>考虑 Spring Cloud Gateway</strong>：如果你的团队<strong>技术栈深度绑定Spring Cloud</strong>，且愿意为集成Sentinel等限流组件和搭建可视化监控体系（如Grafana）付出额外工作，它是一个性能优异的基础。</li>
  <li><strong>评估 WSO2 API Manager</strong>：如果你的项目规模较大，需求超出了“网关”范畴，需要<strong>包含API设计、文档、全生命周期管理和高级运营能力</strong>的整套平台，那么它是一个强大的企业级选择。</li>
</ol>

<p>如果你能分享一下你的具体应用场景（例如，是管理内部微服务还是对外提供API？团队规模和技术栈如何？），我可以为你提供更具体的建议。</p>

<h1 id="shenyu-评价">shenyu 评价</h1>

<p>对 Apache ShenYu 的评价，可以从技术定位、适用场景、优缺点、与其他 API Gateway（如 APISIX、Spring Cloud Gateway、Kong）对比来给出一个全面、可落地的判断。</p>

<hr />

<h1 id="一shenyu-是什么--定位与本质">一、ShenYu 是什么 —— 定位与本质</h1>

<p><strong>Apache ShenYu（神盾网关）是一个基于 Java 构建的动态网关 / 服务代理层</strong>，它强调：</p>

<ul>
  <li>多协议支持（HTTP、gRPC、Dubbo、Spring Cloud、WebSocket 等）</li>
  <li>动态路由规则</li>
  <li>插件式扩展</li>
  <li>支持流量治理功能（限流、熔断、路由、鉴权等）</li>
  <li>与 Spring 生态深度整合</li>
</ul>

<p>简而言之，它是一个 <strong>“Java 生态下的统一网关应用层”</strong>，本质上比传统 API Gateway 更强调<strong>服务协议适配与协议互通</strong>。</p>

<hr />

<h1 id="二shenyu-的技术特点对比同类产品">二、ShenYu 的技术特点（对比同类产品）</h1>

<table>
  <thead>
    <tr>
      <th>维度</th>
      <th>Apache ShenYu</th>
      <th>Spring Cloud Gateway</th>
      <th>Apache APISIX</th>
      <th>Kong</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>核心语言</td>
      <td>Java</td>
      <td>Java (Reactor)</td>
      <td>Lua/Nginx + Go</td>
      <td>Lua/Nginx</td>
    </tr>
    <tr>
      <td>多协议支持</td>
      <td>HTTP, WebSocket, gRPC, Dubbo 等</td>
      <td>HTTP/WebFlux</td>
      <td>HTTP/gRPC (插件生态)</td>
      <td>HTTP</td>
    </tr>
    <tr>
      <td>轻量程度</td>
      <td>中等</td>
      <td>高（轻量）</td>
      <td>高（高性能）</td>
      <td>中等</td>
    </tr>
    <tr>
      <td>插件机制</td>
      <td>Java + SPI</td>
      <td>Java Filter</td>
      <td>Lua Plugin</td>
      <td>Lua Plugin</td>
    </tr>
    <tr>
      <td>控制面</td>
      <td>配置/注册中心</td>
      <td>配置中心</td>
      <td>配置中心/Admin API</td>
      <td>Admin API</td>
    </tr>
    <tr>
      <td>生态化能力</td>
      <td>强（Java 工程能力强）</td>
      <td>强（与 Spring 绑定强）</td>
      <td>强（插件丰富）</td>
      <td>强</td>
    </tr>
    <tr>
      <td>性能</td>
      <td>较好</td>
      <td>舒适</td>
      <td>很高</td>
      <td>高</td>
    </tr>
    <tr>
      <td>适合</td>
      <td>多协议网关</td>
      <td>微服务路由</td>
      <td>开放API平台</td>
      <td>传统 API Gateway</td>
    </tr>
  </tbody>
</table>

<hr />

<h1 id="三shenyu-的优势">三、ShenYu 的优势</h1>

<h2 id="1-协议兼容性强">1. <strong>协议兼容性强</strong></h2>

<p>如果你的系统既有 HTTP，又有 gRPC、Dubbo、WebSocket 服务需要统一治理，ShenYu 是很合适的。
这是它最大亮点，特别在 <strong>Java 微服务体系中想统一管理多个协议</strong> 时非常有价值。</p>

<hr />

<h2 id="2-java-技术栈一致性">2. <strong>Java 技术栈一致性</strong></h2>

<p>对你现在使用 Java Stack（UMS / 移动后管 / 权限 / SSO），ShenYu 的学习成本低于 Lua/Nginx 体系的网关：</p>

<ul>
  <li>插件可以用 Java 写 → 工程能力复用</li>
  <li>更容易集成 Spring Security、OAuth2、JWT</li>
  <li>与现有 SpringBoot/SpringCloud 服务联调更好</li>
</ul>

<hr />

<h2 id="3-动态路由与规则中心">3. <strong>动态路由与规则中心</strong></h2>

<p>ShenYu 支持动态规则下发，你可以结合：</p>

<ul>
  <li>Nacos</li>
  <li>ZooKeeper</li>
  <li>Apollo</li>
  <li>Etcd
进行路由规则、限流策略分发</li>
</ul>

<p>对于快速迭代 API 定制非常方便。</p>

<hr />

<h2 id="4-插件体系支持丰富">4. <strong>插件体系支持丰富</strong></h2>

<p>ShenYu 现有插件支持：</p>

<ul>
  <li>限流</li>
  <li>认证（JWT/OAuth2）</li>
  <li>权限</li>
  <li>参数转换</li>
  <li>请求响应过滤等</li>
</ul>

<p>配合你已有后管权限体系非常契合。</p>

<hr />

<h1 id="四shenyu-的不足或限制">四、ShenYu 的不足或限制</h1>

<h2 id="1-社区生态不如-apisix--kong">1. <strong>社区生态不如 APISIX / Kong</strong></h2>

<p>APISIX/Kong 的插件、生态、社区更成熟、更大，尤其在企业生产级场景下更稳定。</p>

<hr />

<h2 id="2-性能不如轻量级网关">2. <strong>性能不如轻量级网关</strong></h2>

<p>虽然 ShenYu 性能不错，但在<strong>高并发场景</strong>下，其 JVM 本身的 GC/内存开销相比 APISIX/Kong 会略显劣势。</p>

<p>如果你预期对外 API 访问量极大，还是建议采用 Lua/Nginx 这种高性能网关。</p>

<hr />

<h2 id="3-文档企业案例相对较少">3. <strong>文档、企业案例相对较少</strong></h2>

<p>国内很多推荐文章主要是探讨“微服务 Gateway 更优雅”，实际企业级落地文档数量相对 APISIX 要少，这会增加学习成本。</p>

<hr />

<h1 id="五什么时候选-shenyu">五、什么时候选 ShenYu</h1>

<h2 id="场景-a非常适合">场景 A（非常适合）</h2>

<p>你目前处于：</p>

<ul>
  <li><strong>Java 全栈技术体系</strong></li>
  <li>想要统一解决 HTTP、gRPC、Dubbo 协议接入</li>
  <li>想和现有权限中心、认证中心、令牌体系做深度集成</li>
  <li>期望把授权鉴权逻辑写成 Java 代码</li>
</ul>

<p><strong>那么 Apache ShenYu 是非常合理的选择。</strong></p>

<hr />

<h2 id="场景-b慎重考虑">场景 B（慎重考虑）</h2>

<p>如果你的外部开放 API <strong>对性能和高并发要求极高</strong>，且希望未来做成真正 SaaS/API 商业化，要考虑：</p>

<ul>
  <li>API Gateway 的吞吐能力</li>
  <li>QPS 可控能力</li>
  <li>插件成熟度</li>
  <li>DevOps 能力</li>
  <li>多租户隔离</li>
</ul>

<p>这时候推荐的是 <strong>APISIX / Kong</strong>。</p>

<hr />

<h1 id="六与其他主流网关的对比建议">六、与其他主流网关的对比建议</h1>

<h2 id="1-shenyu-vs-spring-cloud-gateway">1. ShenYu vs Spring Cloud Gateway</h2>

<ul>
  <li><strong>ShenYu 更适合协议多样化、插件扩展性</strong></li>
  <li><strong>SCG 更适合轻量 API Gateway + Spring 结合</strong></li>
</ul>

<p>如果你对外对内都要走网关，在 Java 体系里，两者都能满足，但 ShenYu 的插件体系更充足。</p>

<hr />

<h2 id="2-shenyu-vs-apisix--kong">2. ShenYu vs APISIX / Kong</h2>

<ul>
  <li>性能：APISIX / Kong 优</li>
  <li>插件生态：APISIX &gt; Kong &gt; ShenYu</li>
  <li>协议支持：ShenYu（HTTP + RPC 协议）</li>
  <li>Java 友好程度：ShenYu ≥ SCG &gt; APISIX &gt; Kong</li>
</ul>

<p>对于你未来<strong>做外部 API 平台 + SDK</strong>的场景：</p>

<p><strong>优先推荐：APISIX（商业化、稳定、生态）
其次是：ShenYu（如果你希望插件开发全部基于 Java）
再次是：Spring Cloud Gateway（仅内部轻量场景）</strong></p>

<hr />

<h1 id="七如果选-shenyu-我能给你的落地方案">七、如果选 ShenYu 我能给你的落地方案</h1>

<p>如果你决定采用 ShenYu，我可以提供：</p>

<ol>
  <li><strong>ShenYu + Passport OAuth2 + Permission 集成方案</strong></li>
  <li><strong>认证/授权插件工程模板（Java）</strong></li>
  <li><strong>动态规则中心（Nacos/Etcd）方案</strong></li>
  <li><strong>OpenAPI 对外暴露 + 限流/配额设计</strong></li>
  <li><strong>SDK 自动生成与 API 文档设计</strong></li>
</ol>

<ul id="markdown-toc">
  <li><a href="#问题" id="markdown-toc-问题">问题</a>    <ul>
      <li><a href="#-各网关详解与你的需求匹配度" id="markdown-toc--各网关详解与你的需求匹配度">🔍 各网关详解与你的需求匹配度</a></li>
      <li><a href="#-如何选择" id="markdown-toc--如何选择">💡 如何选择</a></li>
    </ul>
  </li>
  <li><a href="#shenyu-评价" id="markdown-toc-shenyu-评价">shenyu 评价</a></li>
  <li><a href="#一shenyu-是什么--定位与本质" id="markdown-toc-一shenyu-是什么--定位与本质">一、ShenYu 是什么 —— 定位与本质</a></li>
  <li><a href="#二shenyu-的技术特点对比同类产品" id="markdown-toc-二shenyu-的技术特点对比同类产品">二、ShenYu 的技术特点（对比同类产品）</a></li>
  <li><a href="#三shenyu-的优势" id="markdown-toc-三shenyu-的优势">三、ShenYu 的优势</a>    <ul>
      <li><a href="#1-协议兼容性强" id="markdown-toc-1-协议兼容性强">1. <strong>协议兼容性强</strong></a></li>
      <li><a href="#2-java-技术栈一致性" id="markdown-toc-2-java-技术栈一致性">2. <strong>Java 技术栈一致性</strong></a></li>
      <li><a href="#3-动态路由与规则中心" id="markdown-toc-3-动态路由与规则中心">3. <strong>动态路由与规则中心</strong></a></li>
      <li><a href="#4-插件体系支持丰富" id="markdown-toc-4-插件体系支持丰富">4. <strong>插件体系支持丰富</strong></a></li>
    </ul>
  </li>
  <li><a href="#四shenyu-的不足或限制" id="markdown-toc-四shenyu-的不足或限制">四、ShenYu 的不足或限制</a>    <ul>
      <li><a href="#1-社区生态不如-apisix--kong" id="markdown-toc-1-社区生态不如-apisix--kong">1. <strong>社区生态不如 APISIX / Kong</strong></a></li>
      <li><a href="#2-性能不如轻量级网关" id="markdown-toc-2-性能不如轻量级网关">2. <strong>性能不如轻量级网关</strong></a></li>
      <li><a href="#3-文档企业案例相对较少" id="markdown-toc-3-文档企业案例相对较少">3. <strong>文档、企业案例相对较少</strong></a></li>
    </ul>
  </li>
  <li><a href="#五什么时候选-shenyu" id="markdown-toc-五什么时候选-shenyu">五、什么时候选 ShenYu</a>    <ul>
      <li><a href="#场景-a非常适合" id="markdown-toc-场景-a非常适合">场景 A（非常适合）</a></li>
      <li><a href="#场景-b慎重考虑" id="markdown-toc-场景-b慎重考虑">场景 B（慎重考虑）</a></li>
    </ul>
  </li>
  <li><a href="#六与其他主流网关的对比建议" id="markdown-toc-六与其他主流网关的对比建议">六、与其他主流网关的对比建议</a>    <ul>
      <li><a href="#1-shenyu-vs-spring-cloud-gateway" id="markdown-toc-1-shenyu-vs-spring-cloud-gateway">1. ShenYu vs Spring Cloud Gateway</a></li>
      <li><a href="#2-shenyu-vs-apisix--kong" id="markdown-toc-2-shenyu-vs-apisix--kong">2. ShenYu vs APISIX / Kong</a></li>
    </ul>
  </li>
  <li><a href="#七如果选-shenyu-我能给你的落地方案" id="markdown-toc-七如果选-shenyu-我能给你的落地方案">七、如果选 ShenYu 我能给你的落地方案</a></li>
</ul>

        </div>

        <div class="more-learn-wrapper">
          <h2 id="更多学习">更多学习</h2>
          <li>
            <a class="my-a" href="https://github.com/houbb"><span class="icon icon--github"><svg viewBox="0 0 16 16"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
</span>&nbsp;个人 Github</a>
          </li>
          <li>
            <i class="fa fa-fw fa-wechat text-muted" title="wechat"></i>&nbsp;个人公众号
          </li>
          <p>更多实时资讯，前沿技术，生活趣事。尽在【老马啸西风】</p>
          <p>交流社群：<a href="https://mp.weixin.qq.com/s/rkSvXxiiLGjl3S-ZOZCr0Q">交流群信息</a></p>
          <p><img src="/SIGN.png" alt="image" /></p>
        </div>

        <!--文章上下篇 START-->
        <nav class="article-page-warp" style="margin-top: 20px;">
          <div class="pagination-list">
            
            <a class="prev pull-left my-a" href="/2025/11/20/sso-300-open-api-gateway-intro" rel="bookmark">
              <i class="fa fa-angle-left"></i> &nbsp; 权限体系之-300-开放接口网关介绍
            </a>
            

            
            <a class="next pull-right my-a" href="/2025/11/20/sso-31-passport-safe-security-xss" rel="bookmark">
              权限体系之-20-passport 安全之 XSS &nbsp; <i class="fa fa-angle-right"></i>
            </a>
            
          </div>
        </nav>
        <!--文章上下篇 END-->

      </div>
    </div>
  </div>

</article>
</div>

Vue 默认会自动转义。

---

2. 使用 DOMPurify（专业级过滤）

npm install dompurify

import DOMPurify from 'dompurify'

const safeHtml = DOMPurify.sanitize(dirtyHtml);

配合 v-html 才可安全使用。

---

3. 禁止使用 eval / new Function

任何动态 JS 字符串执行 = XSS 温床。

---

九、后端 Spring Boot 防御方案

1. 全局 XSS Filter（推荐）

@Component
@WebFilter(urlPatterns = "/*")
public class XssFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        chain.doFilter(new XssHttpServletRequestWrapper((HttpServletRequest) request), response);
    }
}

配合 Wrapper 过滤：

public class XssHttpServletRequestWrapper extends HttpServletRequestWrapper {

    public XssHttpServletRequestWrapper(HttpServletRequest request) {
        super(request);
    }

    @Override
    public String getParameter(String name) {
        String value = super.getParameter(name);
        return HtmlUtils.htmlEscape(value);
    }
}

---

2. JSON 输出防护

配置 Jackson：

@Bean
public ObjectMapper objectMapper() {
    ObjectMapper mapper = new ObjectMapper();
    mapper.getFactory().setCharacterEscapes(new HtmlCharacterEscapes());
    return mapper;
}

---

十、浏览器层防护：CSP（最强防线）

HTTP 头：

Content-Security-Policy:
default-src 'self';
script-src 'self';
object-src 'none';

Spring Boot 配置：

http.headers().contentSecurityPolicy(
    "default-src 'self'; script-src 'self'; object-src 'none';"
);

效果：

• 禁止页面执行外部恶意脚本
• 阻断内联脚本

---

十一、完整防御体系推荐

✅ 前端

• 禁用 v-html
• DOMPurify 清洗富文本
• 路由参数统一 encode
• 不拼接 HTML

✅ 后端

• XSS Filter 全局过滤
• Controller 参数校验
• 默认 HTML escape

✅ 浏览器

• CSP
• HttpOnly Cookie
• SameSite

---

十二、推荐的综合最佳实践

✅ 最安全组合

层级	防护
Vue	自动转义显示
API	HTML Escape 处理
Header	CSP 强制策略
Cookie	HttpOnly + Secure

---

十三、简单总结（白话版）

XSS 就是别人把代码塞到你页面里，然后借你的系统攻击你的用户。

防御核心只有一句话：

✅ 不信任任何用户输入 ✅ 永远不要直接渲染未处理的内容 ✅ 所有输出必须经过转义或清洗

---

落地方案

明白，我给你整理一套 Spring Boot + Vue3 企业级防 XSS 攻击完整配置，覆盖前端、后端、浏览器策略，企业级可直接落地。我们按层级拆解：

---

一、前端 Vue3 防 XSS

1️⃣ 避免 v-html

❌ 错误写法：

<div v-html="userInput"></div>

✅ 安全写法：

<div></div>

• Vue3 默认会自动对 `` 插值进行 HTML 转义。

---

2️⃣ 富文本或 HTML 内容需要安全处理

使用 DOMPurify 过滤用户输入的 HTML：

npm install dompurify

import DOMPurify from 'dompurify'

const safeHtml = DOMPurify.sanitize(dirtyHtml, {
  ALLOWED_TAGS: ['b','i','u','p','br','ul','li','a','img'],
  ALLOWED_ATTR: ['href','src','alt','title']
})

然后再渲染：

<div v-html="safeHtml"></div>

✅ 注意：

• 不允许直接执行 JS（如 onerror、onclick 等事件）
• ALLOWED_TAGS/ATTR 可根据业务精简

---

3️⃣ URL 参数处理

const keyword = encodeURIComponent(route.query.keyword)

• 防止反射型 XSS

---

4️⃣ 避免动态执行 JS

// 不安全
eval(userInput)
new Function(userInput)

---

二、后端 Spring Boot 防 XSS

1️⃣ 全局 XSS Filter

import jakarta.servlet.*;
import jakarta.servlet.annotation.WebFilter;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Component;
import org.springframework.web.util.HtmlUtils;

import java.io.IOException;

@Component
@WebFilter(urlPatterns = "/*")
public class XssFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        chain.doFilter(new XssHttpServletRequestWrapper((HttpServletRequest) request), response);
    }
}

Wrapper 对用户输入统一转义

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletRequestWrapper;
import org.springframework.web.util.HtmlUtils;

public class XssHttpServletRequestWrapper extends HttpServletRequestWrapper {

    public XssHttpServletRequestWrapper(HttpServletRequest request) {
        super(request);
    }

    @Override
    public String getParameter(String name) {
        String value = super.getParameter(name);
        return value != null ? HtmlUtils.htmlEscape(value) : null;
    }

    @Override
    public String[] getParameterValues(String name) {
        String[] values = super.getParameterValues(name);
        if (values == null) return null;
        for (int i = 0; i < values.length; i++) {
            values[i] = HtmlUtils.htmlEscape(values[i]);
        }
        return values;
    }

    @Override
    public String getHeader(String name) {
        String value = super.getHeader(name);
        return value != null ? HtmlUtils.htmlEscape(value) : null;
    }
}

---

2️⃣ JSON 输出统一转义

import com.fasterxml.jackson.core.io.CharacterEscapes;
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class JacksonConfig {

    @Bean
    public ObjectMapper objectMapper() {
        ObjectMapper mapper = new ObjectMapper();
        mapper.getFactory().setCharacterEscapes(new HtmlCharacterEscapes());
        return mapper;
    }

    static class HtmlCharacterEscapes extends CharacterEscapes {
        private final int[] asciiEscapes;

        public HtmlCharacterEscapes() {
            asciiEscapes = standardAsciiEscapesForJSON();
            asciiEscapes['<'] = CharacterEscapes.ESCAPE_STANDARD;
            asciiEscapes['>'] = CharacterEscapes.ESCAPE_STANDARD;
            asciiEscapes['&'] = CharacterEscapes.ESCAPE_STANDARD;
            asciiEscapes['"'] = CharacterEscapes.ESCAPE_STANDARD;
            asciiEscapes['\''] = CharacterEscapes.ESCAPE_STANDARD;
        }

        @Override
        public int[] getEscapeCodesForAscii() {
            return asciiEscapes;
        }

        @Override
        public SerializableString getEscapeSequence(int ch) {
            return null;
        }
    }
}

✅ 这样返回给前端的 JSON 自动转义 <, >, ', " 等特殊字符，防止注入。

---

3️⃣ CSP（Content Security Policy）安全头

在 Spring Security 中设置：

http.headers()
    .contentSecurityPolicy("default-src 'self'; script-src 'self'; object-src 'none'; style-src 'self'; img-src 'self' data:;")
    .and()
    .xssProtection(xss -> xss.block(true));

• default-src 'self'：默认只允许本域名资源
• script-src 'self'：禁止加载外部 JS
• object-src 'none'：禁止 Flash/插件执行
• style-src 'self'：只允许本地样式
• img-src 'self' data:：允许 base64 图片

---

4️⃣ Cookie 安全策略

response.setHeader("Set-Cookie", "SESSION=xxx; HttpOnly; Secure; SameSite=Strict");

• 防止 XSS 偷 Cookie

---

三、前后端综合防护流程

1. 前端：

   • 避免 v-html
   • 富文本过滤 DOMPurify
   • URL 参数 encode
   • 不动态执行 JS

2. 后端：

   • XSS Filter 全局参数转义
   • JSON 输出转义
   • 富文本可用 Jsoup/HTML Sanitizer 做白名单过滤

3. 浏览器：

   • CSP 强制策略
   • HttpOnly + Secure Cookie
   • SameSite Cookie

---

四、额外建议

• chat
  • 是什么？
• 一、什么是 XSS？
• 二、XSS 能干什么？（为什么危险）
• 三、XSS 的三大类型
  • 1. 反射型 XSS（Reflected）
  • 2. 存储型 XSS（Stored）
  • 3. DOM 型 XSS
• 四、XSS 常见触发点
• 五、典型 XSS 漏洞示例
• 六、XSS 防御核心原则
  • 四大防御策略：
• 七、XSS 防御的黄金公式
  • ✅ 正确思想
• 八、前端 Vue3 防 XSS 实战
  • 1. 永远避免 v-html
  • 2. 使用 DOMPurify（专业级过滤）
  • 3. 禁止使用 eval / new Function
• 九、后端 Spring Boot 防御方案
  • 1. 全局 XSS Filter（推荐）
  • 2. JSON 输出防护
• 十、浏览器层防护：CSP（最强防线）
• 十一、完整防御体系推荐
  • ✅ 前端
  • ✅ 后端
  • ✅ 浏览器
• 十二、推荐的综合最佳实践
  • ✅ 最安全组合
• 十三、简单总结（白话版）
• 落地方案
  • 一、前端 Vue3 防 XSS
    • 1️⃣ 避免 v-html
    • 2️⃣ 富文本或 HTML 内容需要安全处理
    • 3️⃣ URL 参数处理
    • 4️⃣ 避免动态执行 JS
  • 二、后端 Spring Boot 防 XSS
    • 1️⃣ 全局 XSS Filter
    • 2️⃣ JSON 输出统一转义
    • 3️⃣ CSP（Content Security Policy）安全头
    • 4️⃣ Cookie 安全策略
  • 三、前后端综合防护流程
  • 四、额外建议