JS `Blob URL` / `Data URL` 注入与 `Arbitrary Code Execution`

各位观众，欢迎来到今天的“Blob URL/Data URL 注入与 Arbitrary Code Execution”脱口秀…啊不，技术讲座！我是你们的老朋友，今天就让我们一起揭开这些看似神秘的 URL 背后隐藏的风险。

先来个热身，我们都见过 URL，每天都在用，但 Blob URL 和 Data URL 又是啥？它们跟安全又有啥关系？别急，咱们慢慢聊。

第一幕：URL 的那些事儿

URL，也就是 Uniform Resource Locator，统一资源定位符，简单说就是网址。我们熟悉的 https://www.example.com/index.html 就是一个 URL。但是，URL 家族可不止这么一个成员，还有两位“特立独行”的兄弟：Blob URL 和 Data URL。

Blob URL (Binary Large Object URL)：这玩意儿就像一个“临时身份证”，指向浏览器内存中存储的二进制数据（比如图片、视频、音频）。它不是指向服务器上的文件，而是指向浏览器自己“创造”出来的数据。

举个例子，你用 JavaScript 从摄像头获取了一段视频数据，就可以用 URL.createObjectURL() 方法创建一个 Blob URL，然后把这个 URL 放到 <video> 标签的 src 属性里，就能播放刚才录的视频了。
```
// 假设 videoData 是一个 Blob 对象，包含了视频数据
const videoURL = URL.createObjectURL(videoData);
const videoElement = document.createElement('video');
videoElement.src = videoURL;
document.body.appendChild(videoElement);
```
用完之后，记得用 URL.revokeObjectURL(videoURL) 来释放内存，不然浏览器会一直保存着这个数据，时间长了可能会卡爆。
Data URL：这货更直接，它把数据直接编码到 URL 里面，就像一个“自给自足的小包裹”，不需要额外的文件。Data URL 的格式是 data:[<mime type>][;charset=<character set>][;base64],<data>。

比如，一个简单的 Data URL 可能长这样：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+oAAwD9j4otJu07nwAAAABJRU5ErkJggg==。 (这是一个极小的透明 PNG 图片的 base64 编码)

这个 URL 包含了图片类型（image/png）和经过 Base64 编码的图片数据。你可以直接把这个 URL 放到 <img> 标签的 src 属性里，就能显示图片了。
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+oAAwD9j4otJu07nwAAAABJRU5ErkJggg==">
```
Data URL 的优点是简单方便，不需要额外的 HTTP 请求。缺点是体积通常比原始文件大（Base64 编码会增加大约 33% 的大小），而且 URL 长度有限制（不同浏览器限制不同）。

第二幕：安全隐患，危机四伏

Blob URL 和 Data URL 本身不是漏洞，但是如果使用不当，就可能引入安全风险，甚至导致 Arbitrary Code Execution (ACE)，也就是任意代码执行。这可不是闹着玩的，意味着攻击者可以在你的电脑上为所欲为。

咱们先来看看可能出现问题的地方：

Blob URL 的信任问题：
- 场景：假设你开发了一个在线图片编辑器，允许用户上传图片进行编辑。为了提高性能，你使用了 Blob URL 来显示上传的图片。
- 风险：如果攻击者上传了一个精心构造的“图片”，但实际上它是一个包含恶意 JavaScript 代码的 HTML 文件（MIME 类型被伪装成 image/jpeg），那么当你把这个“图片”的 Blob URL 放到 <img> 标签的 src 属性里时，浏览器可能会把它当成 HTML 来解析执行。
```
// 危险的代码示例
const maliciousHTML = '<img src=x onerror=alert("ACE!")>'; // 恶意 HTML 代码
const blob = new Blob([maliciousHTML], { type: 'image/jpeg' }); // 伪装成图片
const blobURL = URL.createObjectURL(blob);
document.getElementById('myImage').src = blobURL; // 把 Blob URL 放到 <img> 标签里
```
  在这个例子中，攻击者通过 onerror 事件注入了 JavaScript 代码 alert("ACE!")，当图片加载失败时，这段代码就会被执行。
- 缓解措施：
  - MIME 类型验证：在创建 Blob URL 之前，一定要严格验证上传文件的 MIME 类型，确保它真的是一个图片。不要信任客户端发送的 MIME 类型，而应该在服务器端进行验证。
  - Content Security Policy (CSP)：使用 CSP 可以限制页面可以加载的资源来源，防止恶意脚本的执行。例如，你可以设置 script-src 'self' 来只允许加载同源的脚本。
  - 避免直接使用 Blob URL：尽量避免直接将 Blob URL 赋值给 <img>、<video> 等标签的 src 属性，可以先将 Blob 对象读取为 ArrayBuffer 或 Data URL，然后进行安全处理。
Data URL 的注入攻击：
- 场景：你的网站允许用户输入一些富文本内容，并将其显示在页面上。你使用了 Data URL 来显示用户上传的图片或自定义的字体。
- 风险：如果攻击者在富文本内容中插入恶意的 Data URL，例如包含 JavaScript 代码的 Data URL，那么这段代码可能会被执行。
```
// 危险的代码示例
const maliciousDataURL = 'data:text/html,<script>alert("ACE!")</script>'; // 恶意 Data URL
document.getElementById('myDiv').innerHTML = '<img src="' + maliciousDataURL + '">'; // 把 Data URL 放到 <img> 标签里
```
  在这个例子中，攻击者利用 data:text/html Data URL 直接注入了一段 HTML 代码，这段代码包含了 alert("ACE!") JavaScript 代码。
- 缓解措施：
  - Data URL 过滤：对用户输入的 Data URL 进行严格的过滤和验证，只允许特定的 MIME 类型（例如 image/png、image/jpeg），并且限制 Data URL 的大小。
  - Content Security Policy (CSP)：同样可以使用 CSP 来限制 Data URL 的使用。例如，你可以设置 default-src 'self' 来禁止加载任何外部资源，包括 Data URL。
  - 富文本内容的安全处理：使用专业的 HTML Sanitizer 库（例如 DOMPurify）来清理用户输入的富文本内容，移除潜在的恶意代码。
URL Scheme 的滥用：
- 场景：你的网站允许用户输入 URL，并将其显示在页面上，例如用于链接到外部网站。
- 风险：攻击者可能会利用一些特殊的 URL Scheme 来执行恶意操作。例如，javascript: URL Scheme 可以直接执行 JavaScript 代码。
```
// 危险的代码示例
const maliciousURL = 'javascript:alert("ACE!")'; // 恶意 URL
document.getElementById('myLink').href = maliciousURL; // 把 URL 放到 <a> 标签里
```
  当用户点击这个链接时，alert("ACE!") JavaScript 代码就会被执行。
- 缓解措施：
  - URL Scheme 验证：对用户输入的 URL 进行验证，只允许特定的 URL Scheme（例如 http、https），禁止使用 javascript: 等危险的 Scheme。
  - URL 编码：对 URL 进行编码，防止攻击者利用特殊字符来绕过验证。
  - 使用 rel="noopener noreferrer"：对于链接到外部网站的链接，使用 rel="noopener noreferrer" 属性可以防止目标网站访问你的网站的 window.opener 对象，从而防止一些跨站脚本攻击。

第三幕：防御策略，步步为营

说了这么多风险，难道我们就只能瑟瑟发抖了吗？当然不是！只要我们掌握了正确的防御策略，就能有效地保护我们的应用程序。

攻击方式	防御策略
Blob URL 注入	1. MIME 类型验证：在服务器端验证上传文件的 MIME 类型，只允许特定的图片类型。 2. Content Security Policy (CSP)：使用 CSP 限制页面可以加载的资源来源。 3. 避免直接使用 Blob URL：尽量避免直接将 Blob URL 赋值给 `<img>`、`<video>` 等标签的 `src` 属性，可以先将 Blob 对象读取为 ArrayBuffer 或 Data URL，然后进行安全处理。
Data URL 注入	1. Data URL 过滤：对用户输入的 Data URL 进行严格的过滤和验证，只允许特定的 MIME 类型，并且限制 Data URL 的大小。 2. Content Security Policy (CSP)：使用 CSP 限制 Data URL 的使用。 3. 富文本内容的安全处理：使用专业的 HTML Sanitizer 库（例如 DOMPurify）来清理用户输入的富文本内容，移除潜在的恶意代码。
URL Scheme 滥用	1. URL Scheme 验证：对用户输入的 URL 进行验证，只允许特定的 URL Scheme（例如 `http`、`https`），禁止使用 `javascript:` 等危险的 Scheme。 2. URL 编码：对 URL 进行编码，防止攻击者利用特殊字符来绕过验证。 3. 使用 `rel="noopener noreferrer"`：对于链接到外部网站的链接，使用 `rel="noopener noreferrer"` 属性可以防止目标网站访问你的网站的 `window.opener` 对象，从而防止一些跨站脚本攻击。

一些额外的建议：

最小权限原则：只给用户必要的权限，避免用户执行不必要的操作。
输入验证：对所有用户输入进行验证，包括 URL、Data URL、Blob URL 等。
输出编码：对所有输出到页面的内容进行编码，防止 XSS 攻击。
定期更新：保持你的应用程序和依赖库的更新，及时修复已知的安全漏洞。
安全意识：提高开发人员的安全意识，让他们了解常见的安全风险和防御策略。

第四幕：实战演练，防患未然

光说不练假把式，咱们来个简单的实战演练，看看如何利用 DOMPurify 来清理用户输入的富文本内容，防止 Data URL 注入攻击。

// 引入 DOMPurify 库
import DOMPurify from 'dompurify';

// 获取用户输入的富文本内容
const userInput = '<img src="data:text/html,<script>alert('ACE!')</script>">';

// 使用 DOMPurify 清理富文本内容
const cleanHTML = DOMPurify.sanitize(userInput);

// 将清理后的 HTML 内容显示在页面上
document.getElementById('myDiv').innerHTML = cleanHTML;

// 输出：<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

在这个例子中，DOMPurify 会自动移除 data:text/html Data URL 中的 JavaScript 代码，并将其替换为一个空的 GIF 图片 Data URL，从而防止了恶意代码的执行。

总结

Blob URL 和 Data URL 就像两把双刃剑，用好了可以提高性能和灵活性，用不好就可能引入安全风险。只要我们保持警惕，采取正确的防御策略，就能有效地保护我们的应用程序，远离 Arbitrary Code Execution 的威胁。

记住，安全是一个持续的过程，需要我们不断学习和实践。希望今天的讲座能帮助大家更好地理解 Blob URL 和 Data URL 的安全风险，并在开发过程中更加注意安全问题。

好了，今天的脱口秀…啊不，技术讲座就到这里了。感谢大家的观看，我们下期再见！

发表回复 取消回复

发表回复取消回复