使用静态分析发现和修复基于DOM的XSS攻击

尽管在修复跨站脚本（XSS）方面付出了诸多努力，它仍然持续被评为软件中最危险的安全问题之一。特别是基于DOM的XSS正变得越来越重要：这种XSS形式完全存在于客户端代码（例如JavaScript）中。事实上，越来越多的Web应用程序完全使用前端技术实现其UI代码：单页应用程序（SPA）更容易受到这种漏洞的影响，主要是因为它们比其他Web应用程序更依赖JavaScript。然而，Electron应用程序中的XSS由于框架中可用的系统级API（例如读取本地文件和执行程序）可能造成更大的危险。

以下文章将深入探讨Mozilla基于ESLint的工具，用于检测和预防基于DOM的XSS，以及它如何对您现有的Web应用程序有用。该ESLint插件是作为我们缓解Firefox浏览器中注入攻击的一部分而开发的，其用户界面也是用HTML、JavaScript和CSS编写的。

背景：基于DOM的XSS的实际示例

让我们先花点时间看看基于DOM的XSS的典型来源。想象一下像这样的JavaScript代码：

1
2
3
4
5
6
7


let html = `
  <div class="image-box">
    <img class="image"
         src="${imageUrl}"/>
  </div>`;
// (...)
main.innerHTML = html;

您首先会注意到一个名为html的变量，它使用JavaScript模板字符串构造了一段HTML。它还包含另一个变量imageUrl，用于src属性。然后将完整的html字符串分配给main.innerHTML。

如果我们假设imageUrl变量由攻击者控制，那么他们可能很容易突破src属性语法，并输入任意选择的HTML来发起XSS攻击。

这个例子展示了意外实现DOM XSS漏洞是多么容易：应用程序期望一个图片URL，但也接受各种字符串，然后这些字符串被解析为HTML和JavaScript。这足以启用XSS攻击。

如果我们想避免这些错误，我们需要找到应用程序将字符串解析为HTML的所有实例，然后确定它是否可以从外部控制（例如，表单输入、URL参数等）。

为了高效地做到这一点，我们需要检查源代码中的各种模式。首先，让我们看看所有对innerHTML或outerHTML的赋值。为了不错过其他XSS来源，我们还需要检查以下函数的调用：insertAdjacentHTML()、document.write()、document.writeln()。

当我们最初自己尝试时，在Mozilla使用了像grep或ripgrep这样的文本搜索工具，但并没有成功：即使是一个复杂的搜索模式也给了我们数千个结果，并包含许多误报（例如，安全、硬编码字符串的赋值）。我们知道我们需要一些更懂语法的东西。

代码检查和静态分析

静态分析只是另一种说法，表示我们想要自动检查源代码。我们的静态分析方法建立在现有的JavaScript代码检查工具ESLint之上，它支持强大的JS源代码解析，并且还支持新的JavaScript语法扩展。此外，提供的插件API帮助我们以相对较少的新代码构建自动化检查。然而，有一些限制：

注意事项

由于我们正在扫描JavaScript源代码，有一些事情我们不容易做到：

静态分析几乎无法看到变量的内容（即有害、无害、攻击者控制、硬编码）。
在JavaScript中，源代码不会告诉我们变量的类型（例如，数字、字符串、数组、对象）。
静态分析很容易被压缩、打包或混淆所欺骗。

在Mozilla，我们设法接受了这些限制，因为我们可以建立在现有的工程实践之上：

所有提议的补丁都要经过代码审查。
存储库包含所有相关的JavaScript源代码（例如，第三方库是内置的）。