FrontEnd Interview

Appearance

深入浅出理解 XSS 攻击：原理与防御措施 ​

在前端安全领域，XSS 攻击如同隐藏在网络世界的 "隐形刺客"，常常在开发者不经意间侵入系统，窃取用户信息甚至操控用户行为。作为前端开发者，理解 XSS 攻击的本质并掌握有效的防御手段，是保障 Web 应用安全的基础功课。

一、XSS 攻击的原理 ​

1. 攻击定义 ​

跨站脚本攻击（Cross-Site Scripting，简称 XSS）是一种常见的 Web 安全漏洞，指攻击者通过在网页中注入恶意脚本，当用户浏览该网页时，恶意脚本会被执行，从而达到窃取用户 Cookie、会话令牌、个人信息，或者篡改网页内容、发起钓鱼攻击等目的。

打个比方，正常的网页就像一家餐厅，用户（食客）通过浏览器（点餐方式）获取网页内容（食物）。而 XSS 攻击就像有人在餐厅正常的食材里偷偷混入了有害物质，当食客享用时，就会受到伤害。这里的 "有害物质" 就是恶意脚本，"食客" 就是浏览网页的用户。

2. 技术原理 ​

XSS 攻击的核心原理是 Web 应用程序对用户输入的数据没有进行严格的验证和过滤，导致攻击者可以将恶意的 JavaScript 代码注入到网页中。当其他用户访问包含这些恶意代码的网页时，浏览器会误以为这些代码是网页自身的一部分，从而执行它们。

在 Web 开发中，数据从用户输入到在页面展示通常要经过几个环节：用户输入数据→服务器接收并存储→服务器将数据返回给浏览器→浏览器解析并执行。如果在这个过程中的任何一个环节没有对数据进行安全处理，就可能给 XSS 攻击留下可乘之机。

例如，一个简单的评论功能，如果不对用户输入的评论内容进行处理，攻击者输入<script>alert('XSS')</script> ，当这条评论被其他用户浏览时，浏览器就会执行这个脚本，弹出提示框。

3. 常见类型 ​

根据恶意脚本的注入方式和执行场景，XSS 攻击主要分为以下三种类型：

  • 存储型 XSS：也称为持久型 XSS，攻击者将恶意脚本提交到目标网站的数据库中。当其他用户访问该网站时，网站从数据库中读取恶意脚本并在页面中展示，导致恶意脚本被执行。这种类型的 XSS 攻击危害较大，因为它可以影响所有访问该页面的用户。常见于论坛、博客、评论区等可以提交内容并被长期存储的场景。

比如，攻击者在某论坛发布一条包含恶意脚本的帖子，这条帖子被存储在论坛的数据库中。当其他用户浏览这个帖子时，恶意脚本就会被执行，可能导致这些用户的信息被窃取。

  • 反射型 XSS：也称为非持久型 XSS，攻击者将恶意脚本通过 URL 参数等方式传递给目标网站，网站接收到参数后，将恶意脚本反射到页面中，当用户访问包含恶意参数的 URL 时，恶意脚本被执行。这种类型的 XSS 攻击通常需要诱骗用户点击特定的 URL 才能触发，危害相对存储型 XSS 较小，但传播范围可能较广。常见于搜索框、跳转页面等场景。

例如，某网站的搜索功能，搜索内容会作为参数放在 URL 中，如 http://example.com/search?query=``搜索内容。如果攻击者构造一个包含恶意脚本的 URLhttp://example.com/search?query=<script> alert``('XSS')</script>，当用户点击这个 URL 时，网站会将query参数的值直接显示在页面上，导致恶意脚本执行。

  • DOM 型 XSS：DOM 型 XSS 是基于文档对象模型（DOM）的一种 XSS 攻击。攻击者注入的恶意脚本不会经过服务器，而是通过修改页面的 DOM 结构来执行。当浏览器解析页面时，恶意脚本被执行。这种类型的 XSS 攻击完全发生在客户端，服务器端不会存储恶意脚本。

比如，页面中有一段 JavaScript 代码，它会从 URL 的hash部分获取值并将其插入到页面中：

var x = location.hash;

document.getElementById("content").innerHTML = x;

攻击者可以构造 URLhttp://example.com/page#<script>alert``('XSS')</script>，当用户访问这个 URL 时，hash 部分的恶意脚本会被插入到页面中并执行。

二、XSS 攻击的防御措施 ​

了解了 XSS 攻击的原理和类型后，我们需要采取有效的防御措施来保护 Web 应用程序。防御 XSS 攻击的核心思想是对用户输入的数据进行严格的验证和过滤，以及对输出到页面的数据进行适当的编码。

1. 输入过滤 ​

输入过滤是指在用户输入数据进入应用程序之前，对其进行检查和处理，去除或转义其中可能包含的恶意脚本。可以通过以下方式实现：

  • 白名单验证：只允许输入符合特定规则的字符或内容，例如对于用户名，只允许字母、数字和下划线。

  • 黑名单过滤：禁止输入已知的恶意字符或脚本片段，如<script>、eval等。但黑名单过滤存在一定的局限性，攻击者可能通过变形的方式绕过黑名单，所以白名单验证更为可靠。

以下是一个使用 JavaScript 实现的简单输入过滤函数，用于过滤 HTML 标签：

function filterInput(input) {

&#x20; // 移除所有HTML标签

&#x20; return input.replace(/<\[^>]\*>/g, '');

}

// 示例使用

var userInput = '\<script>alert("XSS")\</script>';

var filteredInput = filterInput(userInput);

console.log(filteredInput); // 输出：alert("XSS")

2. 输出编码 ​

输出编码是指在将数据输出到页面时，对数据进行编码处理，使浏览器将其当作普通文本而不是可执行的脚本。不同的输出场景需要使用不同的编码方式：

  • HTML 编码：当数据要插入到 HTML 标签内部时，需要进行 HTML 编码，将特殊字符（如<、>、&、"、'）转换为对应的实体编码。例如， <转换为&lt;，>转换为&gt;。

  • JavaScript 编码：当数据要插入到 JavaScript 代码中时，需要进行 JavaScript 编码，将特殊字符转换为 Unicode 转义序列。

  • URL 编码：当数据要作为 URL 参数时，需要进行 URL 编码。

以下是一个 HTML 编码的实现示例：

function htmlEncode(input) {

&#x20; var el = document.createElement('div');

&#x20; el.textContent = input;

&#x20; return el.innerHTML;

}

// 示例使用

var userInput = '\<script>alert("XSS")\</script>';

var encodedInput = htmlEncode(userInput);

console.log(encodedInput); // 输出：\&lt;script\&gt;alert(\&quot;XSS\&quot;)\&lt;/script\&gt;

// 将编码后的数据插入到页面

document.getElementById("content").innerHTML = encodedInput;

在上面的示例中，通过textContent将用户输入设置为元素的文本内容，然后获取元素的innerHTML ，此时特殊字符已经被转换为实体编码，再将其插入到页面中，浏览器会将其当作普通文本显示，而不会执行其中的脚本。

3. CSP 应用 ​

内容安全策略（Content Security Policy，简称 CSP）是一种由浏览器提供的安全机制，用于限制网页可以加载和执行的资源，从而有效防御 XSS 攻击等注入式攻击。

CSP 通过设置 HTTP 响应头Content-Security-Policy或在 HTML 页面的<meta>标签中定义策略，指定哪些来源的脚本、样式、图片等资源可以被加载和执行。

以下是一些常见的 CSP 指令及其作用：

  • default-src 'self'：默认情况下，只允许加载来自当前域名的资源。

  • script-src 'self' ``https://trusted-cdn.com：只允许执行来自当前域名和https://trusted-cdn.com的脚本。

  • style-src 'self'：只允许加载来自当前域名的样式表。

  • img-src 'self' data:：允许加载来自当前域名的图片和数据 URI 形式的图片。

  • object-src 'none'：禁止加载任何插件资源。

通过设置 CSP，即使攻击者成功注入了恶意脚本，浏览器也会因为该脚本的来源不在允许的范围内而拒绝执行。

以下是一个在 HTTP 响应头中设置 CSP 的示例：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self'; img-src 'self' data:; object-src 'none'

也可以在 HTML 页面的<head>标签中通过<meta>标签设置 CSP：

\<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self'; img-src 'self' data:; object-src 'none'">

4. 其他防御手段 ​

除了上述三种主要防御措施外，还有一些其他的方法可以增强 Web 应用程序对 XSS 攻击的防御能力：

  • 使用 HttpOnly Cookie：将 Cookie 设置为HttpOnly属性，使得 JavaScript 无法通过document.cookie访问 Cookie，从而防止攻击者通过 XSS 攻击窃取 Cookie。

设置示例（在服务器端设置）：

Set-Cookie: sessionId=123456; HttpOnly; Secure; SameSite=Strict
  • 开启浏览器的 XSS 过滤功能：现代浏览器通常都内置了 XSS 过滤功能，可以检测并阻止一些明显的 XSS 攻击。可以通过设置 HTTP 响应头X-XSS-Protection来开启或配置该功能。
X-XSS-Protection: 1; mode=block

  • 避免使用innerHTML、document.write等危险的 API：这些 API 可以直接将字符串解析为 HTML 并插入到页面中，容易引发 XSS 攻击。尽量使用textContent、setAttribute等更安全的方法。

  • 定期进行安全审计和漏洞扫描：使用专业的安全工具对 Web 应用程序进行定期扫描，及时发现和修复潜在的 XSS 漏洞。

总结 ​

XSS 攻击是 Web 应用程序面临的主要安全威胁之一，其原理是通过注入恶意脚本来执行非法操作。了解 XSS 攻击的类型和原理，采取输入过滤、输出编码、应用 CSP 等防御措施，可以有效降低 XSS 攻击的风险。

在实际开发中，没有一种防御措施是绝对安全的，需要综合运用多种防御手段，形成多层次的安全防护体系。同时，开发者要保持安全意识，不断学习和更新安全知识，以应对不断变化的安全威胁。

（注：文档部分内容可能由 AI 生成）