前言

在设计新型业务的现代着陆页时，尤其是那些主要由静态内容构成的页面，选择合适的技术栈至关重要。过去，企业通常依赖如WordPress这样的重型内容管理系统（CMS），这些系统虽然功能强大，但也带来了较大的攻击面。随着时间的发展，越来越多的企业开始转向更轻量级的解决方案，例如Nuxt、Hugo和Gatsby等静态网站生成器。特别是Next.js，它不仅能够处理静态内容，还支持丰富的服务器端功能，因此受到广泛欢迎。

尽管Next.js主要用于提供静态内容，但其默认启用了许多服务器端特性，这使得它成为安全研究中的一个热点领域，揭示了一些常见的配置错误及潜在的安全漏洞。本文将深入探讨Next.js中的图像优化组件以及与其相关的SSRF（服务器端请求伪造）漏洞，并解释如何将其转化为易于理解的内容。

_next/image组件

NextJS内置并默认启用了图像优化组件。这个理念很简单：如果有一张大图像duck.jpg，想要以较小的尺寸或动态尺寸提供，直接发送大文件给客户端并通过HTML调整大小是不经济的。相反，在React代码中引用这张图片，NextJS会自动调整其大小并缓存处理后的版本，避免每次请求都重新调整大小。

该组件通过_next/imageAPI端点实现这一功能，用户访问这个URL时，NextJS向指定源地址发起请求，获取图像后进行处理。

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

此外，NextJS允许通过remotePatterns功能从其他域名加载图像，只需在配置文件中添加相应的域名即可。然而，如果不谨慎地配置了白名单，可能会无意中允许从任意网站加载图像，这就为SSRF攻击提供了机会。攻击者可以通过构造特定URL访问内部网络资源或触发跨站脚本攻击（XSS），尤其是在旧版本NextJS或者当dangerouslyAllowSVG被设为true时更为严重。

现在可以从cdn.xxxxx.com和xxxxxx.com加载图像：

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

如果希望从任何网站加载图像，可以简单地将每个URL添加到白名单中：