Skip to content

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

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

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

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

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

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
Copy link
Contributor

github-actions bot commented Apr 6, 2025

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot added the locked label Apr 6, 2025
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 6, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Image (next/image) Related to Next.js Image Optimization. locked
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants