Proxy strips some of the query params in URL

[benjaminstary]

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]

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

[benjaminstary]

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.