Invalid URL Fix: Decoding manually for some reserved characters

packages/core/src/config.js

@@ -50,6 +50,10 @@ export const configSchema = {
         type: 'boolean',
         default: true
       },
+      modifySnapshotUrl: {
+        type: 'boolean',
+        default: true
+      },
       disableShadowDOM: {
         type: 'boolean',
         default: false
@@ -279,6 +283,7 @@ export const snapshotSchema = {
         percyCSS: { $ref: '/config/snapshot#/properties/percyCSS' },
         enableJavaScript: { $ref: '/config/snapshot#/properties/enableJavaScript' },
         cliEnableJavaScript: { $ref: '/config/snapshot#/properties/cliEnableJavaScript' },
+        modifySnapshotUrl: { $ref: '/config/snapshot#/properties/modifySnapshotUrl' },
         disableShadowDOM: { $ref: '/config/snapshot#/properties/disableShadowDOM' },
         domTransformation: { $ref: '/config/snapshot#/properties/domTransformation' },
         enableLayout: { $ref: '/config/snapshot#/properties/enableLayout' },

packages/core/src/discovery.js

@@ -43,6 +43,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'enableJavaScript');
   debugProp(snapshot, 'cliEnableJavaScript');
   debugProp(snapshot, 'disableShadowDOM');
+  debugProp(snapshot, 'modifySnapshotUrl');
   debugProp(snapshot, 'enableLayout');
   debugProp(snapshot, 'domTransformation');
   debugProp(snapshot, 'reshuffleInvalidTags');

packages/core/src/snapshot.js

@@ -102,7 +102,7 @@ function mapSnapshotOptions(snapshots, context) {
     // transform snapshot URL shorthand into an object
     if (typeof snapshot === 'string') snapshot = { url: snapshot };
 
-    validateAndFixSnapshotUrl(snapshot);
+    if (snapshot.modifySnapshotUrl !== false && process.env.PERCY_MODIFY_SNAPSHOT_URL !== 'false') validateAndFixSnapshotUrl(snapshot);
 
     let url = validURL(snapshot.url, context?.baseUrl);
     // normalize the snapshot url and use it for the default name

packages/core/src/utils.js

@@ -375,6 +375,29 @@ export function base64encode(content) {
     .toString('base64');
 }
 
+const RESERVED_CHARACTERS = {
+  '%3A': ':',
+  '%23': '#',
+  '%24': '$',
+  '%26': '&',
+  '%2B': '+',
+  '%2C': ',',
+  '%2F': '/',
+  '%3B': ';',
+  '%3D': '=',
+  '%3F': '?',
+  '%40': '@'
+};
+
+function _replaceReservedCharacters(url) {
+  let result = url;
+  for (let [key, value] of Object.entries(RESERVED_CHARACTERS)) {
+    let regex = new RegExp(key, 'g');
+    result = result.replace(regex, value);
+  }
+  return result;
+}
+
 // This function replaces invalid character that are not the
 // part of valid URI syntax with there correct encoded value.
 // Also, if a character is a part of valid URI syntax, those characters
@@ -388,7 +411,8 @@ export function decodeAndEncodeURLWithLogging(url, logger, options = {}) {
   // correctly.
   const { meta, shouldLogWarning, warningMessage } = options;
   try {
-    let decodedURL = decodeURI(url); // This can throw error, so handle it will trycatch
+    let decodedURL = _replaceReservedCharacters(url);
+    decodedURL = decodeURI(decodedURL);
     let encodedURL = encodeURI(decodedURL);
     return encodedURL;
   } catch (error) {

packages/core/test/percy.test.js

@@ -74,7 +74,8 @@ describe('Percy', () => {
       percyCSS: '',
       enableJavaScript: false,
       disableShadowDOM: false,
-      cliEnableJavaScript: true
+      cliEnableJavaScript: true,
+      modifySnapshotUrl: true
     });
   });
 

packages/core/test/snapshot.test.js

@@ -180,6 +180,63 @@ describe('Snapshot', () => {
         sharedExpectModifiedSnapshotURL('http://localhost:8000/advanced-search/cf1a5848-f658-4939-be11-dctwo-%7B%20abc%20%5Bdbd%5D%20%7D/2253');
       });
 
+      it('do not double encode reserved URI character(%2F) in snapshot url', async () => {
+        let partiallyEncodedURL = 'http://localhost:8000/https%2F/abc[123].html';
+        await percy.snapshot([
+          { url: partiallyEncodedURL }
+        ]);
+
+        sharedExpectModifiedSnapshotURL('http://localhost:8000/https//abc%5B123%5D.html');
+      });
+
+      describe('does not modifies snapshot url', () => {
+        let partiallyEncodedURL = 'http://localhost:8000/https%2F/abc[123].html';
+        const sharedExpect = () => {
+          expect(logger.stderr).toEqual(jasmine.arrayContaining([
+            '[percy:core:snapshot] Received snapshot: /https%2F/abc[123].html',
+            '[percy:core:snapshot] - url: http://localhost:8000/https%2F/abc[123].html'
+          ]));
+
+          expect(logger.stderr).not.toEqual(jasmine.arrayContaining([
+            '[percy:core:snapshot] Snapshot URL modified to: http://localhost:8000/https//abc%5B123%5D.html'
+          ]));
+        };
+
+        it('when modifySnapshotUrl set to false', async () => {
+          await percy.snapshot([
+            { url: partiallyEncodedURL, modifySnapshotUrl: false }
+          ]);
+
+          sharedExpect();
+        });
+
+        describe('with PERCY_MODIFY_SNAPSHOT_URL=false', () => {
+          beforeEach(() => {
+            process.env.PERCY_MODIFY_SNAPSHOT_URL = 'false';
+          });
+
+          afterEach(() => {
+            process.env.PERCY_MODIFY_SNAPSHOT_URL = 'true';
+          });
+
+          it('uses original snapshot url', async () => {
+            await percy.snapshot([
+              { url: partiallyEncodedURL }
+            ]);
+
+            sharedExpect();
+          });
+
+          it('uses original snapshot url if modifySnapshotUrl = false ', async () => {
+            await percy.snapshot([
+              { url: partiallyEncodedURL, modifySnapshotUrl: false }
+            ]);
+
+            sharedExpect();
+          });
+        });
+      });
+
       it('warns for invalid characters that can not get encoded properly', async () => {
         let givenURL = 'http://localhost:8000/advanced-search/cf1a5848%-f658-4939-be11-dct';
         await percy.snapshot([

packages/core/types/index.d.ts

@@ -45,6 +45,7 @@ interface CommonSnapshotOptions {
   percyCSS?: string;
   enableJavaScript?: boolean;
   disableShadowDOM?: boolean;
+  modifySnapshotUrl?: boolean;
   enableLayout?: boolean;
   domTransformation?: string;
   reshuffleInvalidTags?: boolean;