Skip to content

fix: validate next/image params #1661

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

Merged
merged 7 commits into from
Oct 5, 2022
Merged

fix: validate next/image params #1661

merged 7 commits into from
Oct 5, 2022

Conversation

ascorbic
Copy link
Contributor

@ascorbic ascorbic commented Oct 5, 2022

Summary

This PR includes two fixes to validate next/image prarams. First, the ipx edge function ensures that the passed props are valid, returning a 400 error if not. Second, it upgrades @netlify/ipx and passes the new localPrefix option, to enforce local image sources that start with /_next/static/.

Draft because it's waiting to release netlify/netlify-ipx#83

Test plan

  1. Open /image in the default site preview. Open the first image and modify any of the params to be non-numeric, and check for the error message

Relevant links (GitHub issues, Notion docs, etc.) or a picture of cute animal

spider capy

Standard checks:

  • Check the Deploy Preview's Demo site for your PR's functionality
  • Add docs when necessary

🧪 Once merged, make sure to update the version if needed and that it was published correctly.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for netlify-plugin-nextjs-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/633d97b8e3e5b40009678491
😎 Deploy Preview https://deploy-preview-1661--netlify-plugin-nextjs-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for netlify-plugin-nextjs-export-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/633d97b81f3dca0008bb6ae9
😎 Deploy Preview https://deploy-preview-1661--netlify-plugin-nextjs-export-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for netlify-plugin-nextjs-nx-monorepo-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/633d97b809ac6e0008e4d3b7
😎 Deploy Preview https://deploy-preview-1661--netlify-plugin-nextjs-nx-monorepo-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for next-hp-edge-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/next-hp-edge-demo/deploys/633d97b864f85d000946b849
😎 Deploy Preview https://deploy-preview-1661--next-hp-edge-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions github-actions bot added the type: bug code to address defects in shipped code label Oct 5, 2022
@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for next-plugin-rsc-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-rsc-demo/deploys/633d97b82d5ccf000897e847
😎 Deploy Preview https://deploy-preview-1661--next-plugin-rsc-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for next-plugin-canary ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/633d97b827ed6d00084966f1
😎 Deploy Preview https://deploy-preview-1661--next-plugin-canary.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for netlify-plugin-nextjs-next-auth-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/633d97b8e58ed7000880dc19
😎 Deploy Preview https://deploy-preview-1661--netlify-plugin-nextjs-next-auth-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for next-i18next-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/next-i18next-demo/deploys/633d97b82c5b360008853aaf
😎 Deploy Preview https://deploy-preview-1661--next-i18next-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for nextjs-plugin-custom-routes-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/nextjs-plugin-custom-routes-demo/deploys/633d97b839a1930008deeae8
😎 Deploy Preview https://deploy-preview-1661--nextjs-plugin-custom-routes-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for netlify-plugin-nextjs-static-root-demo ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/633d97b87350d80009032008
😎 Deploy Preview https://deploy-preview-1661--netlify-plugin-nextjs-static-root-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Oct 5, 2022

Deploy Preview for next-plugin-edge-middleware ready!

Name Link
🔨 Latest commit d6d33c9
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/633d97b87ccc9500098cc455
😎 Deploy Preview https://deploy-preview-1661--next-plugin-edge-middleware.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@ascorbic ascorbic marked this pull request as ready for review October 5, 2022 13:16
@ascorbic ascorbic requested a review from a team October 5, 2022 13:16
@ascorbic ascorbic force-pushed the mk/ipx-prefix branch 2 times, most recently from 67257af to f7acb8a Compare October 5, 2022 13:44
ericapisani
ericapisani previously approved these changes Oct 5, 2022
@ascorbic ascorbic requested a review from ericapisani October 5, 2022 14:59
@ascorbic ascorbic merged commit c0937cf into main Oct 5, 2022
@ascorbic ascorbic deleted the mk/ipx-prefix branch October 5, 2022 15:26
@Plucks77
Copy link

Plucks77 commented Oct 6, 2022

@ascorbic This was a breaking change for me. Needed to do very small update for a old client project and all images broke.
I believe those kind of changes should be not instantly applied to netlify and warn user's about.

@ascorbic
Copy link
Contributor Author

ascorbic commented Oct 6, 2022

@Plucks77 Sorry to hear that! It certainly wasn't meant to be a breaking change. Could you give an example of a broken image URL?

@@ -10,5 +10,6 @@ export const handler: Handler = createIPXHandler({
domains,
remotePatterns,
responseHeaders,
localPrefix: '/_next/static/media/',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are noticing a breaking change as well. Is it possible that this is expecting images to be inside a media folder?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge type: bug code to address defects in shipped code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants