Merge pull request #425 from maryvilledev/issue422

Fix issue with snippet keys that contain apostrophes

__tests__/util/requests.test.js

@@ -16,4 +16,18 @@ describe('util: requests', () => {
       expect(reqUtils.makeSaveEndpointUrl(username, snippet)).toEqual(expected);
     });
   });
+  describe('sanitizeKey', () => {
+    it('encodes characters that encodeURIComponent does not', () => {
+      const str = './"!()*\'';
+      const encoded = reqUtils.sanitizeKey(str);
+      // Check that none of the characters in the original string appear in
+      // the encoded string
+      expect(str.split().every(ch => encoded.indexOf(ch) === -1)).toBe(true);
+    });
+    it('encodes titles with apostrophes', () => {
+      const title = 'rick\'s_recipe_for_concentrated_dark_matter';
+      const expected = 'rick%27s_recipe_for_concentrated_dark_matter';
+      expect(reqUtils.sanitizeKey(title)).toEqual(expected);
+    });
+  });
 });

src/containers/AppBody.jsx

@@ -15,6 +15,7 @@ import {
 import { setPermissions } from '../actions/permissions';
 import { restoreUserCredentials } from '../actions/user';
 import { removeDeprecatedFiltersFromState } from '../util/codemirror-utils';
+import { sanitizeKey } from '../util/requests';
 import { setDefaults } from '../util/state-management';
 
 const styles = {
@@ -82,7 +83,7 @@ export class AppBody extends Component {
 
         // Reroute if not at the 'correct' location
         // So /:username/snippets/:id -> /:username/:id
-        const nextRoute = `/${username}/${encodeURIComponent(snippetKey)}`;
+        const nextRoute = `/${username}/${sanitizeKey(snippetKey)}`;
         if (router.location.pathname !== nextRoute) {
           router.push(nextRoute);
         }

src/util/requests.js

@@ -1,13 +1,21 @@
 const API_URL = process.env.REACT_APP_API_URL;
 
+// encodeURIComponent does not convert all URI-unfriendly characters, necessitating
+// and enhanced encoding function
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#Return_value
+export const sanitizeKey = str => (
+  encodeURIComponent(str)
+    .replace(/[!'.()*]/g, ch => `%${ch.charCodeAt(0).toString(16)}`)
+);
+
 /* Construct the endpoint to make a REST request to. Only the username is
  * field is required; the snippetId will be left blank for POST requests,
  * and can be supplied when needed (say, for PUT requests).
  */
 export const makeSaveEndpointUrl = (username, snippetId = '') => {
   if (snippetId) {
     // Return a URL for GET & PUT requests
-    return `${API_URL}/users/${username}/snippets/${encodeURIComponent(snippetId)}`;
+    return `${API_URL}/users/${username}/snippets/${sanitizeKey(snippetId)}`;
   }
   // Return a URL for POST requests
   return `${API_URL}/users/${username}/snippets`;