背景介绍

如果你想为企业业务设计一个大部分静态且现代的登录页面，你会怎么做？十年前的话，每个公司可能都会使用像 WordPress 这样的重量级 CMS，但站在黑客的角度，CMS 的攻击面是众所周知的，毕竟每天都会在CMS或CMS插件中发现一些严重级的漏洞。

如今，越来越多的公司转向更轻量级的解决方案，在过去的几年里，“静态”站点生成器（如 Nuxt、Hugo 和 Gatsby）的流行度正在呈爆炸式增长，其中最受欢迎的可能就是 NextJS，尽管它经常用于提供简单的静态内容，但默认情况下会启用大量服务器端功能。

本文将详细介绍在 NextJS 网站中发现一些常见错误配置，以及在该框架中如何发现漏洞。

_next/image 组件

NextJS 内置并默认启用了图像优化组件，如果你有一个大尺寸图片 duck.jpg，想要以较小的尺寸提供服务，或者以动态尺寸提供服务，那么将图片发送到客户端并使用 HTML 调整其大小会是一种资源浪费，但是可以在 React 中使用如下代码：

<Image
  src="/duck.jpg"
  width={256}
  quality={75}
  alt="Picture of a duck"
/>

COPY

这样就可以以正确的尺寸提供给客户端，此外，它可以被缓存，这就意味着服务器不必在每次请求时调整图像的大小。那么后端是如何运作的呢？实际上，NextJS 公开了一个 API 端点 _next/image，可以像下面这样使用它：

https://example.com/_next/image?url=/duck.jpg&w=256&q=75

Image 组件简单地制作一个像这样的请求并将其放置在普通的img标签内,当你第一次访问此 URL 时，NextJS 会向 //localhost/duck.jpg 发出请求，并且假设该 url 中存在图片，则在将其返回给用户之前，使用服务器端图片处理库调整其大小。

当然，想要提供来自其他域的图片也是很常见的， NextJS 在 next.config.js 文件中提供了remotePatterns功能来做到这一点；通过指定一个配置项，例如：

images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'cdn.example.com',
            },
            {
                protocol: 'https',
                hostname: 'third-party.com',
            },
        ],
    },

COPY

这样就可以从 cdn.example.com 和thirdparty.com 加载图片：

https://example.com/_next/image?url=https://cdn.example.com/i/rabbit.png&w=256&q=75

如果你是一名开发人员并且想要从任何站点加载图片，可以简单地将每个 URL 列入白名单：

images: {
    remotePatterns: [
        {
            protocol: "https",
            hostname: "**",
        },
        {
            protocol: "http",
            hostname: "**",
        },
    ],
  },

COPY

这看起来似乎有点荒唐，但这并不少见，尤其是开发人员并不清楚它的危害性。于是这就可能面临 SSRF 盲注攻击，例如：

https://example.com/_next/image?url=https://localhost:2345/api/v1/x&w=256&q=75

如果上游响应是有效图片，它将传递给用户端，在一些罕见的情况下，这种情况可能会进一步升级：

• 如果 NextJS 的版本较旧，或者 dangerouslyAllowSVG 设置为 true，可以链接到你所在域上托管的 SVG url，从而导致 XSS
• 如果 NextJS 的版本较旧，或者 dangerouslyAllowSVG 设置为 true，则可以通过 SSRF 泄露 XML 响应的完整内容。这是因为即使提供了 Content-Type 标头，NextJS 也使用嗅探来确定响应的内容类型，并且为了检查 SVG，NextJS 只检查以<?xml 开头的响应
• 如果任何内部主机不响应 Content-Type，则完整响应也将被泄露，这种情况虽然不太可能发生，但有时会在代理配置错误等情况下发生

更常见的情况是某些特定域被列入白名单，但是，图像渲染器遵循重定向,因此，如果你要在白名单域上找到任何开放的重定向，可以将其转变为 SSRF 盲注。

假设 third party.com 已列入白名单，并且你在 third party.com/logout?url=foo 处发现了开放重定向，就可以使用 SSRF 访问内部服务器，并发出如下请求：

https://example.com/_next/image?url=https://third-party.com/logout%3furl%3Dhttps%3A%2F%2Flocalhost%3A2345%2Fapi%2Fv1%2Fx&w=256&q=75

深入挖掘服务器操作中的SSRF

虽然许多人认为 NextJS 是一个“客户端”库，但 NextJS 提供了一个功能齐全的带有 Server Actions 的服务器端框架，这允许编写在调用时将在服务器上异步执行的 JS 代码。

这允许开发人员直接在 NextJS 中创建 API，而无需拥有单独的后端，并且因为它是同一代码库的一部分，所以你可以获得与使用 TypeScript 相关的所有类型安全性。

然而，此服务器端功能提供了很大的攻击面。

在审核 NextJS 源代码时，可以发现一些有趣的事情，如果调用服务器操作并且它以重定向进行响应，它将...

原文始发于微信公众号（骨哥说事）：如何在 NextJS 网站中挖掘 SSRF（部分）