Proxy strips some of the query params in URL

benistary commented 2 years ago

Hi. I've found out, that this package strips some query params in URL. For example if you pass instagram url for image, it contains some necessary hash as query params. Without them, image is not displayed and you will get Bad URL hash.

Original url - https://scontent-vie1-1.cdninstagram.com/v/t51.2885-15/279932256_513097316976421_1336461854115078438_n.jpg?stp=dst-jpg_e15_fr_s1080x1080&_nc_ht=scontent-vie1-1.cdninstagram.com&_nc_cat=101&_nc_ohc=KA4tPehPL1kAX8TKyPO&edm=AIQHJ4wBAAAA&ccb=7-4&ig_cache_key=MjgzMDY2ODY0NjU2MTU0MjgwNg%3D%3D.2-ccb7-4&oh=00_AT_5fMeKcuaxSEgsF7gK8Ea0dIx3_B-BO-gme8kX-PLAMg&oe=6278BC58&_nc_sid=7b02f1

Url from req.query.imageUrl (here) - https://scontent-vie1-1.cdninstagram.com/v/t51.2885-15/279932256_513097316976421_1336461854115078438_n.jpg?stp=dst-jpg_e15_fr_s1080x1080

I did hot fix in my project, where I merge all parameters from the req.query object

 return async function (req: NextApiRequest, res: NextApiResponse) {
    const url = new URL(req.query.imageUrl as string);

    Object.keys(req.query).map((key) =>
      url.searchParams.append(key, req.query[key] as string),
    );

    const imageUrl = url.href;
}

e.q. req.query looks like this:

{
  imageUrl: 'https://scontent-vie1-1.cdninstagram.com/v/t51.2885-15/279134625_581177102981281_4896455919946074133_n.jpg?stp=dst-jpg_e35_p1080x1080',
  _nc_ht: 'scontent-vie1-1.cdninstagram.com',
  _nc_cat: '101',
  _nc_ohc: 'atp6SFVY-lQAX8tXXPY',
  edm: 'APU89FABAAAA',
  ccb: '7-4',
  ig_cache_key: 'MjgyNTU0NTUxNjg2MTExODA3OQ==.2-ccb7-4',
  oh: '00_AT-8Eq7IWIIVgibQPg38qrxlQdgcChy91m8OA3OjZalaOA',
  oe: '6279F331',
  _nc_sid: '86f79a'
}

Packages

@blazity/next-image-proxy : 1.0.2 next : 12.1.0

paolorossig commented 2 years ago

Hi @benistary, did you manage to display the social media image? I tried with your fix but I get a 404 in the browser and the following errors in the console:

API resolved without sending a response for /api/imageProxy?imageUrl=<original URL>, this may result in stalled requests.

The requested resource isn't a valid image for /api/imageProxy?imageUrl=<original URL> received application/json; charset=utf-8

benistary commented 2 years ago

Yes, I've managed to resolve that with fix above. Maybe try to check if you can view this specific created url in your browser directly.

Blazity / next-image-proxy

Proxy strips some of the query params in URL #4

Packages