Fix urlencoding behavior for imgix

Mosnar · Mosnar · commit 33aaaefd7ffb · 2019-12-09T12:10:51.000-05:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,10 +4,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Unreleased
+## [2.0.0] - 2019-12-09
+
+### Changed
+- A breaking change has been introduced in the way URLs are generated. Previously we were calling `encodeURIComponent`
+on each part of the requested URL, we are now calling a modified `encodeURIComponent` that excludes some characters to
+be compliant with Imgix's official php SDK:
+```php
+$path = preg_replace_callback("/([^\w\-\/\:@])/", function ($match) {
+    return rawurlencode($match[0]);
+}, $path);
+```
+
+See https://locutus.io/php/url/rawurlencode/ for details
+ 
 ### Added
 - Added environment variable `SLS_IGNORE` with default value of `favicon.ico` 
 
+## Fixed
+- Issue with Imgix compatibility regarding URL encoding. See Changed section
+
 ## [1.0.2] - 2019-12-09
 ### Added
 - Added support for `dpr`
diff --git a/src/helpers/security.js b/src/helpers/security.js
@@ -15,14 +15,28 @@ exports.calculateHash = (path, queryStringParameters, securityKey) => {
 
   // Encode each part of the URI. (Note, we're not using URLEncode on the entire thing, as it doesn't
   // properly handle "+" signs
-  const encodedPath = decodeURIComponent(path).split('/').map((comp) => {
-    return encodeURIComponent(comp)
-  }).join('/')
+  const encodedPath = fixedEncodeURIComponent(decodeURIComponent(path))
   const source = process.env.SECURITY_KEY + encodedPath + query
   const parsed = crypto.createHash('md5').update(source).digest('hex')
   return parsed
 }
 
+/**
+ * RFC 3986 encodeURIComponent
+ * @param str
+ * @return {string}
+ */
+function fixedEncodeURIComponent (str) {
+  return str.replace(/([^\w\-\/\:@])/gi, function (match) {
+    return encodeURIComponent(match)
+      .replace(/!/g, '%21')
+      .replace(/'/g, '%27')
+      .replace(/\(/g, '%28')
+      .replace(/\)/g, '%29')
+      .replace(/\*/g, '%2A')
+  })
+}
+
 /**
  *
  * @param path
