Followed as suggested in the documentation but getting error "Invalid signature"

[devfishyhub]

Hey guys,

I am trying to play with this imgProxy. I have run my docker with this command:
docker run --env IMGPROXY_KEY=57ecc9c430cf3ae3370002bea013c5fbbe46962eb83e4402715c0009e1c6bd95 --env IMGPROXY_SALT=24b7b48e7027ec8d0c7494e45206c0c6137142c69ff1a4cc7ee72098590183d7 --env IMGPROXY_SIGNATURE_SIZE=32 --env IMGPROXY_SOURCE_URL_ENCRYPTION_KEY=7a97cbb8bed64a2c1d4de074fac9bd81a81f319343576c282f7509bced6070cc -p 8080:8080 -it darthsim/imgproxy

and here is the nodejs script i have used to generate the url:

import crypto from "crypto";

class ImgProxySignatureGenerator {
  constructor(secret, salt, urlEncryptionKey) {
    this.secret = secret;
    this.salt = salt;
    this.urlEncryptionKey = urlEncryptionKey;
  }

  padUrl(url) {
    const blockSize = 16;
    const paddingSize = blockSize - (url.length % blockSize);
    const padding = Buffer.alloc(paddingSize, paddingSize);
    return Buffer.concat([Buffer.from(url), padding]);
  }

  encryptUrl(url) {
    const bufferedKey = Buffer.from(this.urlEncryptionKey, "hex");
    const paddedUrl = this.padUrl(url);
    const iv = crypto.randomBytes(16);
    const cipher = crypto.createCipheriv("aes-256-cbc", bufferedKey, iv);
    let encrypted = Buffer.concat([cipher.update(paddedUrl), cipher.final()]);
    return Buffer.concat([iv, encrypted])
      .toString("base64")
      .replace(/=/g, "")
      .replace(/\+/g, "-")
      .replace(/\//g, "_");
  }

  signUrl(url) {
    const key = Buffer.from(this.secret, "hex");
    const hmac = crypto.createHmac("sha256", key);
    hmac.update(Buffer.from(this.salt, "hex"));
    hmac.update(url);
    return hmac
      .digest("base64")
      .replace(/=/g, "")
      .replace(/\+/g, "-")
      .replace(/\//g, "_");
  }
}

// docker run --env IMGPROXY_KEY=57ecc9c430cf3ae3370002bea013c5fbbe46962eb83e4402715c0009e1c6bd95 --env IMGPROXY_SALT=24b7b48e7027ec8d0c7494e45206c0c6137142c69ff1a4cc7ee72098590183d7 --env IMGPROXY_SIGNATURE_SIZE=32 --env IMGPROXY_SOURCE_URL_ENCRYPTION_KEY=7a97cbb8bed64a2c1d4de074fac9bd81a81f319343576c282f7509bced6070cc  -p 8080:8080 -it darthsim/imgproxy
// Usage example
const SECRET = "57ecc9c430cf3ae3370002bea013c5fbbe46962eb83e4402715c0009e1c6bd95";
const SALT = "24b7b48e7027ec8d0c7494e45206c0c6137142c69ff1a4cc7ee72098590183d7";
const URL_ENCRYPTION_KEY = '7a97cbb8bed64a2c1d4de074fac9bd81a81f319343576c282f7509bced6070cc';
const url = "https://i.imgur.com/KSLD4VV.jpeg";

const generator = new ImgProxySignatureGenerator(SECRET, SALT, URL_ENCRYPTION_KEY);
const encryptedUrl = generator.encryptUrl(url);
const signature = generator.signUrl(encryptedUrl);
const finalUrl = `http://localhost:8080/${signature}/rs:fit:300:300/enc/${encryptedUrl}.jpg`;
console.log(finalUrl);

I am not sure how the order should be? encrypt the url first then sign it? or sign the url and then encrypt it?

[devfishyhub]

Okay for anyone else trying this and you are newbie like me to this encryption and signing this:

Duh. We should either use encryption only or signing only. should not try to combine both.

Weirdly it is not clear from documentation.

[DarthSim]

Well, you can use both encryption and signature. The problem with your code is that you singing url while you should sign /rs:fit:300:300/enc/${encryptedUrl}.jpg:

const SECRET = "57ecc9c430cf3ae3370002bea013c5fbbe46962eb83e4402715c0009e1c6bd95";
const SALT = "24b7b48e7027ec8d0c7494e45206c0c6137142c69ff1a4cc7ee72098590183d7";
const URL_ENCRYPTION_KEY = '7a97cbb8bed64a2c1d4de074fac9bd81a81f319343576c282f7509bced6070cc';
const url = "https://i.imgur.com/KSLD4VV.jpeg";

const generator = new ImgProxySignatureGenerator(SECRET, SALT, URL_ENCRYPTION_KEY);
const encryptedUrl = generator.encryptUrl(url);
const path = `/rs:fit:300:300/enc/${encryptedUrl}.jpg`;
const signature = generator.signUrl(path);
const finalUrl = `http://localhost:8080/${signature}${path}`;
console.log(finalUrl);

[devfishyhub]

Thank you so much @DarthSim for replying.
with this piece of code where I only encode the actual url to base64Encoded works

(() => {
  const base64Encoded = generator.getBase64Url(url);
  const urlWithQuery = `/rs:fit:300:300/${base64Encoded}`;
  const signature = generator.signUrl(urlWithQuery);
  const encSignedUrl = `http://localhost:8080/${signature}${urlWithQuery}`;
  console.log({ encSignedUrl });
})();

But when i do:

  encryptAndSign(url: string) {
    const urlWithQuery = `/rs:fit:300:300/enc/${this.generator.encrypt(url)}`;
    const signature = this.generator.signUrl(urlWithQuery);
    return `http://localhost:8080/${signature}${urlWithQuery}`;
  }
}

const imageUrl = "https://i.imgur.com/KSLD4VV.jpeg";
const imgProxy = new ImgProxy();

const encryptAndSign = imgProxy.encryptAndSign(imageUrl);
console.log({ encryptAndSign });

I get the url:

'http://localhost:8080/1j63ChFlt3rVB8jdth7Bt0FxIiPv2faqshin5x2soiI/rs:fit:300:300/enc/oUwQX2X-WC7NimNQ2ZwY6ss3uGzXXjdMofPk5fA2Lv28OPN60P0kAZICwYSskFkKXDj916pTLD0QrxD__SoJ7g'

Upon trying to access that URL it would throw erorr:

WARNING [2023-06-17T10:39:23Z] Completed in 119.875µs /1j63ChFlt3rVB8jdth7Bt0FxIiPv2faqshin5x2soiI/rs:fit:300:300/enc/oUwQX2X-WC7NimNQ2ZwY6ss3uGzXXjdMofPk5fA2Lv28OPN60P0kAZICwYSskFkKXDj916pTLD0QrxD__SoJ7g  request_id=n7kiyX4Z-KnAIyMul8djC method=GET status=404 client_ip=172.17.0.1 error="Invalid url encoding: encoUwQX2X-WC7NimNQ2ZwY6ss3uGzXXjdMofPk5fA2Lv28OPN60P0kAZICwYSskFkKXDj916pTLD0QrxD__SoJ7g"

Which seems like enc in my url to indicate that url is encrypted is somehow wrong.
And when i remove enc it would complain

WARNING [2023-06-17T10:37:06Z] Completed in 281.125µs /uira6IzNOrpXbVXgJ5edr6_PQIw9T0XKG8M0QN2AqFo/rs:fit:300:300/F1j45QoFyOXwteUpmWZ5wGIMEhbPMBaQiGqQm_zI2V1vAaIg3QhoBsTECFjOwKlStRA7kHCh83lbefnWfv_FPA  request_id=taovh6wQyGN7L6J0tOIS4 method=GET status=404 client_ip=172.17.0.1 error="Can't download source image: parse \"\\x17X\\xf8\\xe5\\n\\x05\\xc8\\xe5\\xf0\\xb5\\xe5)\\x99fy\\xc0b\\f\\x12\\x16\\xcf0\\x16\\x90\\x88j\\x90\\x9b\\xfc\\xc8\\xd9]o\\x01\\xa2 \\xdd\\bh\\x06\\xc4\\xc4\\bX\\xce\\xc0\\xa9R\\xb5\\x10;\\x90p\\xa1\\xf3y[y\\xf9\\xd6~\\xff\\xc5<\": net/url: invalid control character in URL"

I just cant get encryption to work. This is the example code that i got from examples folder to encrypt URL

  public encrypt(url: string) {
    const data = Buffer.from(url).toString("binary");

    // We use a random iv generation, but you'll probably want to use some
    // deterministic method
    const iv = randomBytes(16);

    const cipher = createCipheriv("aes-256-cbc", this.urlEncryptionKey, iv);

    let encrypted = Buffer.from(
      cipher.update(data, "utf8", "binary") + cipher.final("binary"),
      "binary"
    );

    return Buffer.concat([iv, encrypted]).toString('base64').replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_')
  }

Do you have any recommendation on how to fix it?

[DarthSim]

I believe you are using the OSS version of imgproxy. Source URL encryption is a Pro feature