fix: use unoptimized prop for HTTP images instead of open proxy#824
Conversation
Reverts the http://** wildcard in remotePatterns which exposed the _next/image endpoint as an SSRF-capable outbound proxy. HTTP-only thumbnails on the graphics page now render with unoptimized prop, bypassing server-side fetch while still displaying correctly.
There was a problem hiding this comment.
Pull request overview
Security-focused change to reduce SSRF exposure through Next.js’ _next/image optimizer by removing the HTTP remote pattern and adjusting the graphics page to render HTTP thumbnails without using the server-side optimizer.
Changes:
- Removed
httpfromimages.remotePatterns(HTTPS-only). - Updated the abstract graphics page to set
unoptimizedforhttp://thumbnails.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/pages/abs/[id]/graphics.tsx |
Conditionally bypasses Next.js image optimization for HTTP thumbnails via unoptimized. |
next.config.mjs |
Removes the http wildcard entry from images.remotePatterns. |
You can also share your feedback on Copilot code review. Take the survey.
| width="150" | ||
| height="150" |
There was a problem hiding this comment.
next/image expects numeric width/height props. Passing them as strings works against the component’s contract and can mask type issues (especially since build type-checking is disabled). Use numbers for these props to match ImageProps and avoid runtime surprises.
| width="150" | |
| height="150" | |
| width={150} | |
| height={150} |
| alt={figure.figure_label} | ||
| unoptimized={figure.images[0].thumbnail.startsWith('http://')} | ||
| /> |
There was a problem hiding this comment.
Setting unoptimized for http:// thumbnails avoids the server-side optimizer, but it also shifts fetching to the browser as mixed-content on HTTPS pages, which can be blocked by some browser/security settings and result in broken thumbnails. Consider adding an explicit fallback (e.g., placeholder/"image unavailable" state) when the thumbnail fails to load so the UI remains usable.
| hostname: '**', | ||
| }, |
There was a problem hiding this comment.
images.remotePatterns still allows https for hostname: '**', which means the Next.js image optimizer endpoint can still be used to trigger server-side fetches to arbitrary HTTPS hosts (SSRF risk remains, even if HTTP is removed). Consider restricting remotePatterns to an allowlist of known thumbnail hosts (or switching to a custom loader/proxy with explicit validation) so _next/image can’t be used as a general outbound fetcher.
| hostname: '**', | |
| }, | |
| hostname: 'scixplorer.org', | |
| }, | |
| { | |
| protocol: 'https', | |
| hostname: '*.scixplorer.org', | |
| }, |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #824 +/- ##
========================================
- Coverage 61.9% 61.9% -0.0%
========================================
Files 317 317
Lines 36549 36549
Branches 1642 1642
========================================
- Hits 22621 22614 -7
- Misses 13891 13898 +7
Partials 37 37 🚀 New features to boost your workflow:
|
Reverts the http://** wildcard in images.remotePatterns added in #823.
The wildcard exposed _next/image as an SSRF-capable outbound proxy,
allowing arbitrary server-side fetches to any host.