signed url with query string creates invalid result

Joel Hooks

April 04, 2020 23:41

```

const cloudinary = require('cloudinary').v2

const qs = require('querystring')

cloudinary.config({

cloud_name: 'joelhooks',

api_key: 'MY_KEY',

api_secret: 'MY_SECRET',

})

const queryStringParameters = {

author: 'joelhooks',

tags: 'broken, impossible to debug, sad',

title: 'this should just work but it does not',

}

const query = qs.stringify(queryStringParameters)

const url = cloudinary.url(`v1586034934/og_images/pixel_zeddhz.png`, {

// resouce_type: "raw"

sign_url: true,

// secure: true,

custom_pre_function: {

function_type: 'remote',

source:`https://competent-goodall-d71d0d.netlify.com/.netlify/functions/gen-opengraph-image?${query}`,

},

})

console.log(url)

```

 

I've got this not script that is using a netlify function as a custom pre-function. The problem that I am having is that the `?` in the query string adds a `\` to the resulting signed url and I get a 400 error in return.

 

 

https://res.cloudinary.com/joelhooks/image/upload/s--OU-mAhlt--/fn_pre:remote:aHR0cHM6Ly9jb21wZXRlbnQtZ29vZGFsbC1kNzFkMGQubmV0bGlmeS5jb20vLm5ldGxpZnkvZnVuY3Rpb25zL2dlbi1vcGVuZ3JhcGgtaW1hZ2U/dGl0bGU9aGVsbG8lMjBmcmllbmRz/v1586034934/og_images/pixel_zeddhz.png

 

help!

0

• 

  Brian Luk

  April 05, 2020 18:04

  Hi Joel!

  This seems to be coming from the encoding of the remote function URL, which should be URL-safe Base64 encoded rather than just baes64.

  Please see the working URLs here -

  https://res.cloudinary.com/joelhooks/image/upload/s--vk79-RGl--/fn_pre:remote:aHR0cHM6Ly9jb21wZXRlbnQtZ29vZGFsbC1kNzFkMGQubmV0bGlmeS5jb20vLm5ldGxpZnkvZnVuY3Rpb25zL2dlbi1vcGVuZ3JhcGgtaW1hZ2U_dGl0bGU9aGVsbG8lMjBmcmllbmRz/v1586034934/og_images/pixel_zeddhz.png

  https://res.cloudinary.com/joelhooks/image/upload/s--OyNG7ow9--/fn_pre:remote:aHR0cHM6Ly9jb21wZXRlbnQtZ29vZGFsbC1kNzFkMGQubmV0bGlmeS5jb20vLm5ldGxpZnkvZnVuY3Rpb25zL2dlbi1vcGVuZ3JhcGgtaW1hZ2U_YXV0aG9yPWpvZWxob29rcyZ0YWdzPWJyb2tlbiUyQyUyMGltcG9zc2libGUlMjB0byUyMGRlYnVnJTJDJTIwc2FkJnRpdGxlPXRoaXMlMjBzaG91bGQlMjBqdXN0JTIwd29yayUyMGJ1dCUyMGl0JTIwZG9lcyUyMG5vdA/v1586034934/og_images/pixel_zeddhz.png

  We'll be updating the SDK shortly to use URL-safe encoding for remote functions.

  0
• 

  Joel Hooks

  April 05, 2020 18:34

  Hey Brian, thanks for the explanation! I'm not quite understanding yet.

   

  Is there anything I can do on my end to make this work, or is waiting for the SDK update required?

   

  0
• 

  Eyal Katz Talmon

  April 06, 2020 10:10 Edited

  Hey Joel, 

  We have opened an internal ticket for our SDK team to fix this issue.

  Note that the difference between the URL-safe base64 encoding and the regular base64 encoding comes up to three characters only - '+', '/', and '='.

  Until our SDK team fixes the issue, you can solve this locally in one of the following two ways -

  1. Continue using the same flow as before, and take the base64 encoded string of the pre-function and adjust it in this way -
     Replace '+' characters with '-'.
     Replace '/' characters with '_'.
     Remove trailing '=' characters.
     Then reuse the "cloudinary.url()" method in the following way -

     cloudinary.url("v{version}/{public_id}", { 
         sign_url:true, 
         raw_transformation:"fn_pre:remote:{base64 string after the above adjustments}"
     })

     For example -

     cloudinary.url("v1586034934/og_images/pixel_zeddhz.png", { 
         sign_url:true, 
         raw_transformation:"fn_pre:remote:aHR0cHM6Ly9jb21wZXRlbnQtZ29vZGFsbC1kNzFkMGQubmV0bGlmeS5jb20vLm5ldGxpZnkvZnVuY3Rpb25zL2dlbi1vcGVuZ3JhcGgtaW1hZ2U_dGl0bGU9aGVsbG8lMjBmcmllbmRz"
     })

  2. Fix the local copy of the Cloudinary SDK in the following way -
     Make use of this library - https://www.npmjs.com/package/urlsafe-base64,
     and change this line and this line, into - 
     

     return [customFunction.function_type, URLSafeBase64.encode(base64EncodeURL(customFunction.source))].join(":");

  Let me know if you have any questions!
  In any way, we'll update this thread about any progress made regarding the SDK fix.

  0

Post is closed for comments.