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.

Sign up for GitHub

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

Rewrite image urls to exclude unwanted params #86

Merged
merged 5 commits into from
Nov 7, 2023
Merged

Rewrite image urls to exclude unwanted params #86

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3d50287
Rewrite image urls to exclude unwanted params
pookmish Nov 3, 2023
dfc32a2
Support more handling of images
pookmish Nov 3, 2023
8543ed8
Upgrade to next 14
pookmish Nov 3, 2023
2a68b63
reverted next to 13
pookmish Nov 3, 2023
1abf651
Updated dependencies and fixed select list
pookmish Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@ module.exports = {
typescript: {
ignoreBuildErrors: true
},
async rewrites() {
return {
beforeFiles: [
{
source: '/_next/image',
destination: '/_next/image?url=:url',
has: [{type: 'query', key: 'url', value: '(?<url>.*[jpg|png|jpeg|gif]\?itok=\\w+).*'}]
Copy link
Member

Choose a reason for hiding this comment

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

Looks smart.

Any exotic files like (webp, SVG)?

Is itok always the first parameter after the ??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

no webp, or svg uploads are allowed.
It should always be the first parameter if the data comes from Drupal.. i guess this probably wouldn't help it if bots remove the itok param

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I added some logic to also check for image urls without the itok param. It'll return a default image as a fallback.
A few scenarios:

  • https://domain.edu/_next/image?url=https://google..... -> this will automatically be blocked due to the images.domains settings only allowing configured domains.
  • https://domain.edu/_next/image?url=https://drupal/path/to/image.jpg -> this will go to the no-image since drupal will block it anyways without the itok param
  • https://domain.edu/_next/image?url=https://drupal/path/to/image.jpg?itok=abc-12_3-> this will not be changed.
  • https://domain.edu/_next/image?url=https://drupal/path/to/image.jpg?foo=bar&itok=abc-12_3 -> this will go to no-image since it's likely malicious.
  • https://domain.edu/_next/image?url=https://drupal/path/to/image.jpg?itok=abc-12_3&foo=bar... -> this will rewrite to https://domain.edu/_next/image?url=https://drupal/path/to/image.jpg?itok=abc-12_3. This doesn't block bots, but it should reduce the variety of unique images being derived.

Can you think of any other scenarios?

Copy link
Member

Choose a reason for hiding this comment

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

I think that should cover it. In a nutshell, you're looking for a valid-looking URL with only the parameters you want and everything else gets sent to the no-image file, which will be cached after the first time it's hit. Bots could still troll valid image paths and their derivatives but that is a different issue than cache-busting URLs.

}
]
};
},
async headers() {
if (process.env.NEXT_PUBLIC_NOBOTS === 'true') {
return [
Expand Down
Loading