Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Regression) embedding images via CSS on other origins fails in dev #77344

Closed
MattIPv4 opened this issue Mar 20, 2025 · 2 comments · Fixed by #77395
Closed

(Regression) embedding images via CSS on other origins fails in dev #77344

MattIPv4 opened this issue Mar 20, 2025 · 2 comments · Fixed by #77395
Labels
Image (next/image) Related to Next.js Image Optimization.

Comments

@MattIPv4
Copy link
Contributor

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/interesting-rhodes-l4rv48

To Reproduce

  1. Start the application in development mode
  2. On another origin, add the image as a background in CSS
  3. Ensure the other origin is in allowedDevOrigins

Current vs. Expected behavior

Image fails to load, blocked by Next.js. It should load.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4242
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.3.0-canary.15 // Latest available version is detected (15.3.0-canary.15).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image (next/image), Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I suspect this is a regression caused by #76880

@MattIPv4
Copy link
Contributor Author

MattIPv4 commented Mar 22, 2025

@ztanner I'm concerned by this:

In a future major release, this will not be opt-in, and will require explicitly providing the allowed origins that can access the special /_next endpoints.

As I noted in this issue, CSS image requests cannot pass CORS headers, so unless there is going to be a way to completely disable this check for /_next/image, this issue is just going to reocurr when this is switched to not being opt-in again?

@ztanner
Copy link
Member

ztanner commented Mar 22, 2025

@ztanner I'm concerned by this:

In a future major release, this will not be opt-in, and will require explicitly providing the allowed origins that can access the special /_next endpoints.

As I noted in this issue, CSS image requests cannot pass CORS headers, so unless there is going to be a way to completely disable this check for /_next/image, this issue is just going to reocurr when this is switched to not being opt-in again?

Thanks for flagging this-- we'll make sure that we get a test-case for this landed before we make the flag opt-in by default.

ztanner added a commit that referenced this issue Mar 23, 2025
Excludes `/_next/image` and `/_next/static/media` as they don't contain sensitive information and prevents complications loading them in cases where they are inlined in CSS, as they'll be requested with `sec-fetch-mode: no-cors`. 

x-ref: #77344
ijjk pushed a commit that referenced this issue Mar 24, 2025
…ut (#77395)

To avoid breaking local development proxies and more complex setups,
this ensures that we only block cross-origin development requests when
opting into the configuration. In a future major release, this will not
be opt-in, and will require explicitly providing the allowed origins
that can access the special `/_next` endpoints.

This adds a warning when a cross origin request is detected that would
be blocked without explicit configuration.

Fixes #77073
Fixes #77253
Fixes #77344
ijjk pushed a commit that referenced this issue Mar 24, 2025
Excludes `/_next/image` and `/_next/static/media` as they don't contain sensitive information and prevents complications loading them in cases where they are inlined in CSS, as they'll be requested with `sec-fetch-mode: no-cors`. 

x-ref: #77344
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Image (next/image) Related to Next.js Image Optimization.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants