Merge pull request #1562 from metabase/base64-404-fix

Fix base64 encoding / url issue causing occasional 404s

bin/debug-proxy

+#!/usr/bin/env node
+
+// This proxy is useful for debugging frontend issues on deployed instances of
+// Metabase. You can use the frontend of a local insance in conjunction with them
+// backend of a deployed instance.
+
+var http = require("http");
+var httpProxy = require("http-proxy");
+
+var backendTarget = process.argv[2] || "https://staging.metabase.com/";
+var frontendTarget = process.argv[3] || "http://127.0.0.1:3000/";
+var listenPort = parseInt(process.argv[4] || "3001");
+
+var proxy = httpProxy.createProxyServer({ secure: false });
+
+var server = http.createServer(function(req, res) {
+    if (/^\/app\//.test(req.url)) {
+        console.log("FRONTEND: " + req.url);
+        proxy.web(req, res, { target: frontendTarget });
+    } else {
+        console.log("BACKEND:  " + req.url);
+        proxy.web(req, res, { target: backendTarget });
+    }
+});
+
+console.log("frontend target: " + frontendTarget);
+console.log("backend target:  " + backendTarget);
+console.log("listening port:  " + listenPort);
+
+server.listen(listenPort);

frontend/src/card/card.controllers.js

@@ -18,7 +18,7 @@ import DataGrid from "metabase/lib/data_grid";
 import { addValidOperatorsToFields } from "metabase/lib/schema_metadata";
 
 import Query from "metabase/lib/query";
-import { serializeCardForUrl, deserializeCardFromUrl, cleanCopyCard, urlForCardState } from './card.util';
+import { serializeCardForUrl, deserializeCardFromUrl, cleanCopyCard, urlForCardState } from "metabase/lib/card";
 
 import * as reducers from './reducers';
 

frontend/src/card/card.util.js → frontend/src/lib/card.js

@@ -12,20 +12,28 @@ export function serializeCardForUrl(card) {
         display: card.display,
         visualization_settings: card.visualization_settings
     };
-    return utf8_to_b64(JSON.stringify(cardCopy));
+    return utf8_to_b64url(JSON.stringify(cardCopy));
 }
 
 export function deserializeCardFromUrl(serialized) {
-    return JSON.parse(b64_to_utf8(serialized));
+    return JSON.parse(b64url_to_utf8(serialized));
 }
 
 // escaping before base64 encoding is necessary for non-ASCII characters
 // https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa
-function utf8_to_b64(str) {
+export function utf8_to_b64(str) {
     return window.btoa(unescape(encodeURIComponent(str)));
 }
-function b64_to_utf8(str) {
-    return decodeURIComponent(escape(window.atob(str)));
+export function b64_to_utf8(b64) {
+    return decodeURIComponent(escape(window.atob(b64)));
+}
+
+// for "URL safe" base64, replace "+" with "-" and "/" with "_" as per RFC 4648
+export function utf8_to_b64url(str) {
+    return utf8_to_b64(str).replace(/\+/g, "-").replace(/\//g, "_");
+}
+export function b64url_to_utf8(b64url) {
+    return b64_to_utf8(b64url.replace(/-/g, "+").replace(/_/g, "/"))
 }
 
 export function urlForCardState(state, dirty) {

frontend/test/unit/lib/card.spec.js

+import {
+    utf8_to_b64,
+    b64_to_utf8,
+    utf8_to_b64url,
+    b64url_to_utf8
+} from 'metabase/lib/card';
+
+describe('card', () => {
+
+    describe('utf8_to_b64', () => {
+        it('should encode with non-URL-safe characters', () => {
+            expect(utf8_to_b64("  ?").indexOf("/")).toEqual(3);
+            expect(utf8_to_b64("  ?")).toEqual("ICA/");
+        });
+    });
+
+    describe('b64_to_utf8', () => {
+        it('should decode corretly', () => {
+            expect(b64_to_utf8("ICA/")).toEqual("  ?");
+        });
+    });
+
+    describe('utf8_to_b64url', () => {
+        it('should encode with URL-safe characters', () => {
+            expect(utf8_to_b64url("  ?").indexOf("/")).toEqual(-1);
+            expect(utf8_to_b64url("  ?")).toEqual("ICA_");
+        });
+    });
+
+    describe('b64url_to_utf8', () => {
+        it('should decode corretly', () => {
+            expect(b64url_to_utf8("ICA_")).toEqual("  ?");
+        });
+    });
+});