当前位置：首页 > news >正文

XSS漏洞及常见处理方案

news 来源：原创 2025/8/26 16:55:45

文章背景：

在近期项目安全测试中，安全团队发现了一处潜在的 跨站脚本攻击（XSS）漏洞，该漏洞可能导致用户数据被篡改或会话劫持等安全风险。针对这一问题，项目组迅速响应，通过代码修复、输入过滤、输出编码等多层防护措施，彻底消除了隐患。

为系统性总结此次漏洞的成因、修复方案及防护经验，开发团队特别编写了《XSS漏洞及常见处理方案》知识文献，涵盖漏洞原理、攻击场景、修复建议及长期防护策略，旨在为后续项目提供参考，避免同类问题重现。在此，特别鸣谢公司开发团队的雷神及参与修复的开发同事的紧密协作，正是大家的专业与高效，才使得漏洞得以及时闭环，并为团队积累了宝贵的安全实践知识。未来，我们将持续强化安全开发意识，筑牢项目安全防线。

什么是 XSS 漏洞?

XSS 漏洞，全称为跨站脚本攻击（Cross-Site Scripting）漏洞，攻击者通过在⽬标⽹站中注

⼊恶意脚本，使得⽤⼾在访问该⽹站时，浏览器会执⾏这些恶意脚本，从⽽达到攻击者获取⽤

⼾信息、控制⽤⼾操作等⽬的的安全漏洞。

⼀般情况下，⽤⼾输⼊信息提交后，后端直接保存到数据库，⽤⼾需要查看信息时，后端直

接从数据库查询信息返回前端展⽰，如下图：

容易出现漏洞的地⽅基本和富⽂本都有关系，如⽹站后台⽂章编辑、前台评论区，如果⽤⼾

输⼊的内容包含脚本，直接保存到数据库，显⽰详情时再直接显⽰，就可能会执⾏脚本，例如

以下 XSS 脚本被浏览器渲染执⾏（即弹窗）。

<script>alert('XSS');</script>
<img src="x" onerror="alert('XSS')">
<input type="text" value="<script>alert('XSS')">
<svg/onload=alert('XSS')>
<img src="x" onerror="alert(String.fromCharCode(88,83,83))">
<script>document.write('<img src="x" onerror="alert(\'XSS\')">')</script>
<svg><animate onrepeat=top['ale'+'rt'](36) attributeName=x dur=1s repeatCount=2 />
<iframe src=‘http://www.baidu.com/123.js’></iframe>
<svg><animate+onrepeat=top['ale'+'rt'](36)+attributeName=x+dur=1s+repeatCount=2+/>
<iframe src=‘http://xxx.com/123.js’></iframe>
<u+onclick-alert(1)>aaa</u>

漏洞危害

1: 窃取⽤⼾信息

攻击者可通过 XSS 漏洞注⼊恶意脚本，当⽤⼾访问被攻击的⽹站时，脚本就会收集⽤⼾输

⼊的账号、密码等登录信息，并发送给攻击者，进⽽导致⽤⼾账号被盗⽤，个⼈隐私、财产安

全等受到威胁。同时获取⽤⼾在⽹站上填写的其他个⼈信息，如⾝份证号、联系⽅式、家庭住

址等，可能被⽤于精准诈骗。

2:篡改⽹站内容

利⽤ XSS 漏洞修改⽹站的⻚⾯内容，如替换⽹站内容、插⼊恶意⼴告等，使⽹站的正常展

⽰受到破坏，给⽤⼾带来误导性信息，给⽹站带来严重的负⾯影响。

其他还有如实施钓⻥攻击、传播恶意代码等⾏为。

常⻅处理⽅案

从前⾯时序图中可以看出，修复切⼊点可以这⼏步中考虑：

◦ 第 2 步：前端提交⽤⼾输⼊信息时，对输⼊内容进⾏脚本过滤。

◦ 第 3 步：后端对前端传⼊的内容也进⾏脚本过滤。

◦ 第 12 步：前端显⽰详情时禁⽤脚本渲染。

⽅案⼀：前端输⼊过滤

html 输⼊转义

使⽤第三⽅库类似 DOMPurify 来清理和转义输⼊的 html。

import DOMPurify from 'dompurify';
2
3 // 假设这是⽤⼾输⼊的 HTML 内容
4 const userInput = `<img src="x" onerror="alert('XSS')">Hello <b>world</
b>!</p>`;
5
6 // 使⽤ DOMPurify 清理⽤⼾输⼊
7 const sanitizedInput = DOMPurify.sanitize(userInput);
8
9 // 将清理后的内容安全地插⼊到⻚⾯中
10 document.getElementById('output').innerHTML = sanitizedInput;

url 转义

处理 url 输⼊的时候，使⽤ encodeURIComponent 来避免⽤⼾输⼊的恶意链接引发的攻

击。

// ⽤⼾输⼊的内容
2 const userInput = "Hello world & welcome to XSS <script>alert('XSS')</s
cript>";
3
4 // 使⽤ encodeURIComponent 对⽤⼾输⼊进⾏编码
5 const encodedInput = encodeURIComponent(userInput);
6
7 // 构建带有查询参数的 URL
8 const url = `https://example.com/search?query=${encodedInput}`;

严格输⼊验证

除了转义外常规的表单类型提交，尽可能对⽤⼾输⼊进⾏严格的验证，确保输⼊内容符合预

期格式。例如对于数字、⽇期等特定类型的输⼊，可以使⽤正则表达式来限制输⼊的格式。

// 验证邮箱格式
2 const validateEmail = (_, value) => {
3 if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(valu
e)) {
4 return Promise.reject(new Error('请输⼊正确的邮箱地址'));
5 }
6 return Promise.resolve();
7 };

使⽤成熟框架

使⽤ React/Vue 等框架，框架⾃带编译器会将模板 /jsx 解析为树，在 redderer ⾥调⽤

DOM API，减少 encode 操作避免较⼤部分的 xss 隐患。

标签属性异常处理

关注 prerender / SSR 的 hydrate 过程会⽣成 html 、dangerouslySetInnerHTML、

οnlοad= 字符串、href= 字符串、onrepeat= 字符串和⼀些常规的标签属性的过滤异常处

理。

1 import React, { useEffect } from 'react';
2 import ReactDOM from 'react-dom';
3
4 // 安全过滤函数
5 const sanitizeHTML = (html) => {
6 // 简单的正则过滤：去除 onload, href 等事件处理程序
7 return html
8 .replace(/on\w+="[^"]*"/g, '') // 去除所有事件属性如 onload, onerror
等
9 .replace(/<script.*?>.*?<\/script>/g, '') // 去除 <script> 标签
10 .replace(/<iframe.*?>.*?<\/iframe>/g, '') // 去除 <iframe> 标签
11 .replace(/javascript:/g, ''); // 去除 javascript: 协议
12 };
13
14 // ⽰例组件
15 const PrerenderedComponent = ({ unsafeHTML }) => {
16 useEffect(() => {
17 // 仅对 SSR 渲染时进⾏ HTML 安全过滤
18 const safeHTML = sanitizeHTML(unsafeHTML);
19 document.getElementById('content').innerHTML = safeHTML;
20 }, [unsafeHTML]);
21
22 return (
23 <div id="content">
24 {/* 使⽤ dangerouslySetInnerHTML 且已清理的 HTML */}
25 <div dangerouslySetInnerHTML={{ __html: unsafeHTML }} />
26 </div>
27 );
28 };
29
30 // SSR 或 Prerender 渲染时传⼊的潜在不安全内容
31 const unsafeHTML = `
32 <h1>Welcome</h1>
33 <p>Click here: <a href="javascript:alert('XSS')">Link</a></p>
34 <img src="image.jpg" onload="alert('XSS')">
35 <script>alert('XSS')</script>
36 `;
37
38 ReactDOM.hydrate(
39 <PrerenderedComponent unsafeHTML={unsafeHTML} />,
40 document.getElementById('root')
41 );

避免使⽤内联事件

使⽤原⽣ html 时候应该避免在 HTML 中直接使⽤内联事件处理程序，改⽤外部脚本⽂件。

富⽂本过滤

使⽤ textContent 或 innerText 来设置⽤⼾输⼊的内容，⽽不是 innerHTML 。

使⽤富⽂本或者脚本编辑器等⻚⾯⽅案的时候输⼊的过滤采⽤ DOMPurify 进⾏处理。

1import React, { useState } from 'react';
2 import DOMPurify from 'dompurify';
3
4 const RichTextEditor = () => {
5 const [inputValue, setInputValue] = useState('');
6 const [sanitizedContent, setSanitizedContent] = useState('');
7
8 // 处理输⼊框变化
9 const handleInputChange = (e) => {
10 setInputValue(e.target.value);
11 };
12
13 // 提交并清理输⼊的 HTML
14 const handleSubmit = () => {
15 // 使⽤ DOMPurify 清理⽤⼾输⼊的 HTML
16 const cleanContent = DOMPurify.sanitize(inputValue);
17 setSanitizedContent(cleanContent);
18 };
19
20 return (
21 <div>
22 <h2>富⽂本编辑器</h2>
23
24 {/* 富⽂本编辑器 */}
25 <textarea
26 value={inputValue}
27 onChange={handleInputChange}
28 placeholder="请输⼊内容..."
29 rows="5"
30 cols="40"
31 ></textarea>
32 <br />
33
34 <button onClick={handleSubmit}>提交</button>
35
36 <h3>清理后的内容：</h3>
37 <div
38 id="output"
39 dangerouslySetInnerHTML={{ __html: sanitizedContent }}
40 ></div>
41 </div>
42 );
43 };
44
45 export default RichTextEditor;

采取上述步骤，能在多数情况下确保传⼊接⼝的参数是筛选、处理后的安全内容。但现在多

为前后端分离架构，攻击者可绕过前端，直接调⽤后端 API 接⼝存储含 XSS 隐患的内容。因

此，前端输⼊过滤只是预防⼿段，实际还需结合后⾯两个⽅案。

⽅案⼆：后端存储过滤

后端使⽤开源⼯具 worm-toolkit-valid 来对前端传⼊字符串进⾏验证，该⼯具使⽤注解的⽅

式进⾏⾃定义的验证，⽤法简单，使⽤⽅法如下：

引⼊ jar 包：

<dependency>
2 <groupId>com.worm</groupId>
3 <artifactId>worm-toolkit-valid</artifactId>
4 <version>1.0.6-SNAPSHOT</version>
5 </dependency>

依赖底层 jar 包：

1 <dependency>
2 <groupId>com.googlecode.owasp-java-html-sanitizer</groupId>
3 <artifactId>owasp-java-html-sanitizer</artifactId>
4 </dependency>

下⾯为具体的实现逻辑，⾃定义注解：

@Documented
2 @Target({ElementType.METHOD, ElementType.FIELD, ElementType.ANNOTATION_
TYPE, ElementType.CONSTRUCTOR, ElementType.PARAMETER, ElementType.TYPE_
USE})
3 @Retention(RetentionPolicy.RUNTIME)
4 @Repeatable(NoScriptValid.List.class)
5 @Constraint(validatedBy = {NoScriptValidValidator.class})
6 public @interface NoScriptValid {
7 /**
8 * 提⽰信息(存在错误时，当前字段使⽤)
9 */
10 String message() default "Input must not contain JavaScript code";
11
12 /**
13 * 分组
14 */
15 Class<?>[] groups() default {};
16
17 /**
18 * 扩展对象
19 */
20 Class<? extends Payload>[] payload() default {};
21
22 @Documented
23 @Target({
24 ElementType.METHOD,
25 ElementType.FIELD,
26 ElementType.ANNOTATION_TYPE,
27 ElementType.CONSTRUCTOR,
28 ElementType.PARAMETER,
29 ElementType.TYPE_USE
30 })
31 @Retention(RetentionPolicy.RUNTIME)
32 @interface List {
33 NoScriptValid[] value();
34 }
35 }
Java
1 public class NoScriptValidValidator implements ConstraintValidator<NoS
criptValid, String> {
2 /**
3 * PolicyFactory 是 OWASP Java HTML Sanitizer 提供的⼀个⼯⼚类，⽤于创建
清理策略。
4 * Sanitizers.FORMATTING.and(Sanitizers.LINKS).and(Sanitizers.BLOCK
S).and(Sanitizers.IMAGES).and(Sanitizers.STYLES).and(Sanitizers.TABLE
S) 组合了多种清理策略，例如格式化、链接、块元素、图像、样式和表格等。
5 */
6 private final PolicyFactory policy = Sanitizers.FORMATTING.and(San
itizers.LINKS).and(Sanitizers.BLOCKS).and(Sanitizers.IMAGES).and(Saniti
zers.STYLES).and(Sanitizers.TABLES);
7
8 @Override
9 public boolean isValid(String value, ConstraintValidatorContext con
text) {
10 if (CharSequenceUtil.isBlank(value)) {
11 return true;
12 }
13 // 对输⼊值进⾏清理，然后将清理后的值与原始值进⾏⽐较。如果两者相等，说明输
⼊中不包含需要清理的 HTML 或脚本，验证通过；否则，验证失败。
14 String sanitize = policy.sanitize(value);
15 return CharSequenceUtil.equalsAnyIgnoreCase(sanitize, value);
16 }
17 }

NoScriptValidValidator 为⼀个内置的验证器，⾥⾯集合了⼀些清理策略，如果不满⾜项⽬

需求，可以参照此类重新写⼀个验证器，并设置 policy。

验证代码：

1 public class ExpressSaveDto {
2
3 /**
4 * 计价数量
5 */
6 @NoScriptValid(message = "表达式脚本不能输⼊javascript脚本")
7 private String valuationQuantity;
8
9 /**
10 * 计价单价
11 */
12 @NoScriptValid(message = "表达式脚本不能输⼊javascript脚本")
13 private String valuationUnitPrice;
14 }

如果使⽤嵌套验证的⽅式，需要明确在内部需要校验的对象上加上@Valid 注解

@Data
2 public class ExpFormulaSaveDto {
3
4 /**
5 * 公式名称
6 */
7 @NotBlank(message = "公式名称不能为空")
8 @Size(max = 32, message = "公式名称由⻓度不超过32的⽂本组成")
9 private String name;
10
11 @Valid
12 private List<ExpressSaveDto> expressSaveDtos;
13 }
Java
1 @PostMapping("/saveExpress")
2 public BaseResult<Boolean> saveExpress(@RequestBody @Valid ExpFormulaSa
veDto expFormulaSaveDto) {
3 // TODO
4 return BaseResult.ok();
5 }

当前端传给后端的 valuationQuantity 和 valuationUnitPrice 字段中包含脚本时，后端将提

⽰“表达式脚本不能输⼊ javascript 脚本”。

⽅案三：前端渲染过滤

直接渲染类型的内容前转义

防⽌通过 innerHTML 或 document.write 等⽅法，使⽤ textContent 或

innerText 来进⾏替代。不可避免使⽤ innerHTML 的时候使⽤第三⽅库类似 DOMPurify 来

清理和转义接⼝获取的 html 内容。

1 import React, { useState } from 'react';
2 import DOMPurify from 'dompurify';
3
4 const SafeContentRenderer = () => {
5 const [userInput, setUserInput] = useState('');
6 const [outputHTML, setOutputHTML] = useState('');
7
8 // 处理⽤⼾输⼊
9 const handleInputChange = (e) => {
10 setUserInput(e.target.value);
11 };
12
13 // 渲染⽂本内容，避免使⽤ innerHTML
14 const renderText = () => {
15 const textContainer = document.getElementById('textContainer');
16 textContainer.textContent = userInput; // 使⽤ textContent 安全渲染
⽂本
17 };
18
19 // 渲染 HTML 内容，使⽤ DOMPurify 进⾏清理
20 const renderHTML = () => {
21 const sanitizedHTML = DOMPurify.sanitize(userInput);
22 setOutputHTML(sanitizedHTML); // 渲染经过清理的 HTML
23 };
24
25 return (
26 <div>
27 <h2>直接渲染内容⽰例</h2>
28
29 <textarea
30 value={userInput}
31 onChange={handleInputChange}
32 placeholder="请输⼊内容..."
33 rows="5"
34 cols="40"
35 ></textarea>
36
37 <div>
38 <button onClick={renderText}>渲染为⽂本</button>
39 <button onClick={renderHTML}>渲染为HTML</button>
40 </div>
41
42 {/* 渲染纯⽂本内容，避免使⽤ innerHTML */}
43 <div id="textContainer" style={{ marginTop: '20px', fontSize: '16
px' }}></div>
44
45 {/* 渲染 HTML 内容，使⽤ DOMPurify 清理过的内容 */}
46 <div id="htmlOutput" style={{ marginTop: '20px' }} dangerouslySet
InnerHTML={{ __html: outputHTML }}></div>
47 </div>
48 );
49 };
50
51 export default SafeContentRenderer;

设置 CSP

设置 Content Security Policy （ CSP ）头，限制⻚⾯可以加载和执⾏的资源规则，防⽌

恶意脚本的注⼊和执⾏。

1 setHeader('Content-Security-Policy', "default-src 'self'; script-src 's
elf' 'sha256-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self'
data:;");

模板引擎

需要使⽤动态脚本插⼊的时候，使⽤ Handlebars 、 Mustache 等模板引擎执⾏。

<script id="entry-template" type="text/x-handlebars-template">
2 <div>{{message}}</div>
3 </script>

总结

XSS 防护的核⼼是通过严格控制⽤⼾输⼊和输出的内容，避免恶意脚本被注⼊并执⾏。前端

通过转义输⼊、使⽤安全的渲染⽅法、实施 CSP 等措施来防⽌脚本执⾏。后端则应确保输⼊验

证、输出转义，并结合框架⾃带的防护机制，确保数据在渲染时是安全的。前后端共同合作，

形成多层防护，才能有效防⽌ XSS 攻击。

相关文章：