Don’t navigate to data URIs at the top level

Chrome no longer supports navigation to data URIs in the top level
window, for security reasons. So, for the preview as well as the spinner
that is displayed until gist export completes, we instead populate the
new window using good old `document.write`.

There is a minor concern here about security—in particular, we don’t
want malicious imported code to be able to access the Popcode
environment and attempt to e.g. hijack the user’s GitHub session.  I
*think* the implementation herein prevents such an attack by removing
the `opener` property on the new window before populating its content,
in principle making it impossible for the opened window to access the
Popcode environment. This approach is discussed e.g. [in a Chromium
thread discussing `window.opener` security
risks](https://bugs.chromium.org/p/chromium/issues/detail?id=168988#c14)
and seems to be generally agreed to be sufficient. I could not find a
way to access `opener` from a window opened by Popcode.

Author: Mat Brown

src/sagas/ui.js

@@ -1,17 +1,15 @@
 import {all, call, put, take, takeEvery} from 'redux-saga/effects';
 import debounceFor from 'redux-saga-debounce-effect/src/debounceFor';
-import {TextEncoder} from 'text-encoding';
-import base64 from 'base64-js';
 import {userDoneTyping as userDoneTypingAction} from '../actions/ui';
 import {
   gistExportDisplayed,
   gistExportNotDisplayed,
   repoExportDisplayed,
   repoExportNotDisplayed,
 } from '../actions/clients';
-import {openWindowWithWorkaroundForChromeClosingBug} from '../util';
+import {openWindowWithContent} from '../util';
 import generatePreview from '../util/generatePreview';
-import {spinnerPage} from '../templates';
+import spinnerPageHtml from '../../templates/github-export.html';
 
 export function* userDoneTyping() {
   yield put(userDoneTypingAction());
@@ -22,10 +20,7 @@ function* githubExport(
   failureAction,
   notDisplayedAction,
   displayedAction) {
-  const exportWindow = yield call(
-    openWindowWithWorkaroundForChromeClosingBug,
-    `data:text/html;charset=utf-8;base64,${spinnerPage}`,
-  );
+  const exportWindow = yield call(openWindowWithContent, spinnerPageHtml);
   const {type, payload: url} =
     yield take([successAction, failureAction]);
 
@@ -52,10 +47,7 @@ export function* exportGist() {
 
 export function* popOutProject({payload: project}) {
   const preview = yield call(generatePreview, project);
-  const uint8array = new TextEncoder('utf-8').encode(preview);
-  const base64encoded = base64.fromByteArray(uint8array);
-  const url = `data:text/html;charset=utf-8;base64,${base64encoded}`;
-  yield call(openWindowWithWorkaroundForChromeClosingBug, url);
+  yield call(openWindowWithContent, preview);
 }
 
 export function* exportRepo() {

src/util/index.js

@@ -1,7 +1,9 @@
-export function openWindowWithWorkaroundForChromeClosingBug(
-  location, name = '_blank',
-) {
+export function openWindowWithContent(content, name = '_blank') {
   const newWindow = open('about:blank', name);
-  newWindow.location.href = location;
+  Reflect.deleteProperty(newWindow, 'opener');
+  const {document} = newWindow;
+  document.open();
+  document.write(content);
+  document.close();
   return newWindow;
 }

test/unit/sagas/ui.js

@@ -1,7 +1,5 @@
 import test from 'tape';
 import {testSaga} from 'redux-saga-test-plan';
-import {TextEncoder} from 'text-encoding';
-import base64 from 'base64-js';
 import {
   userDoneTyping as userDoneTypingSaga,
   exportGist as exportGistSaga,
@@ -19,8 +17,8 @@ import {
   repoExportError,
   repoExportNotDisplayed,
 } from '../../../src/actions/clients';
-import {openWindowWithWorkaroundForChromeClosingBug} from '../../../src/util';
-import {spinnerPage} from '../../../src/templates';
+import {openWindowWithContent} from '../../../src/util';
+import spinnerPageHtml from '../../../templates/github-export.html';
 import generatePreview from '../../../src/util/generatePreview';
 
 test('userDoneTyping', (assert) => {
@@ -36,10 +34,7 @@ test('exportGist', (t) => {
     const mockWindow = {closed: false, location: {}};
     const url = 'https://gist.github.com/abc123';
     testSaga(exportGistSaga).
-      next().call(
-        openWindowWithWorkaroundForChromeClosingBug,
-        `data:text/html;charset=utf-8;base64,${spinnerPage}`,
-      ).
+      next().call(openWindowWithContent, spinnerPageHtml).
       next(mockWindow).take(['GIST_EXPORTED', 'GIST_EXPORT_ERROR']).
       next(gistExported(url)).put(gistExportDisplayed()).
       next().isDone();
@@ -53,10 +48,7 @@ test('exportGist', (t) => {
     const mockWindow = {closed: true, location: {}};
     const url = 'https://gist.github.com/abc123';
     testSaga(exportGistSaga).
-      next().call(
-        openWindowWithWorkaroundForChromeClosingBug,
-        `data:text/html;charset=utf-8;base64,${spinnerPage}`,
-      ).
+      next().call(openWindowWithContent, spinnerPageHtml).
       next(mockWindow).take(['GIST_EXPORTED', 'GIST_EXPORT_ERROR']).
       next(gistExported(url)).put(gistExportNotDisplayed(url)).
       next().isDone();
@@ -69,10 +61,7 @@ test('exportGist', (t) => {
   t.test('with gist export error', (assert) => {
     const mockWindow = {closed: false, close() { }};
     testSaga(exportGistSaga).
-      next().call(
-        openWindowWithWorkaroundForChromeClosingBug,
-        `data:text/html;charset=utf-8;base64,${spinnerPage}`,
-      ).
+      next().call(openWindowWithContent, spinnerPageHtml).
       next(mockWindow).take(['GIST_EXPORTED', 'GIST_EXPORT_ERROR']).
       next(gistExportError(new Error())).call([mockWindow, 'close']).
       next().isDone();
@@ -86,14 +75,9 @@ test('popOutProject', (assert) => {
   const mockWindow = {closed: false, close() { }};
   const project = {};
   const preview = '<html></html>';
-  const uint8array = new TextEncoder('utf-8').encode(preview);
-  const base64encoded = base64.fromByteArray(uint8array);
   testSaga(popOutProjectSaga, popOutProject(project)).
     next().call(generatePreview, project).
-    next(preview).call(
-      openWindowWithWorkaroundForChromeClosingBug,
-      `data:text/html;charset=utf-8;base64,${base64encoded}`,
-    ).
+    next(preview).call(openWindowWithContent, preview).
     next(mockWindow).isDone();
   assert.end();
 });
@@ -103,10 +87,7 @@ test('exportRepo', (t) => {
     const mockWindow = {closed: false, location: {}};
     const url = 'https://popcode-mat.github.io/my-popcode-repo';
     testSaga(exportRepoSaga).
-      next().call(
-        openWindowWithWorkaroundForChromeClosingBug,
-        `data:text/html;charset=utf-8;base64,${spinnerPage}`,
-      ).
+      next().call(openWindowWithContent, spinnerPageHtml).
       next(mockWindow).take(['REPO_EXPORTED', 'REPO_EXPORT_ERROR']).
       next(repoExported(url)).put(repoExportDisplayed()).
       next().isDone();
@@ -120,10 +101,7 @@ test('exportRepo', (t) => {
     const mockWindow = {closed: true, location: {}};
     const url = 'https://popcode-mat.github.io/my-popcode-repo';
     testSaga(exportRepoSaga).
-      next().call(
-        openWindowWithWorkaroundForChromeClosingBug,
-        `data:text/html;charset=utf-8;base64,${spinnerPage}`,
-      ).
+      next().call(openWindowWithContent, spinnerPageHtml).
       next(mockWindow).take(['REPO_EXPORTED', 'REPO_EXPORT_ERROR']).
       next(repoExported(url)).put(repoExportNotDisplayed(url)).
       next().isDone();
@@ -136,10 +114,7 @@ test('exportRepo', (t) => {
   t.test('with repo export error', (assert) => {
     const mockWindow = {closed: false, close() { }};
     testSaga(exportRepoSaga).
-      next().call(
-        openWindowWithWorkaroundForChromeClosingBug,
-        `data:text/html;charset=utf-8;base64,${spinnerPage}`,
-      ).
+      next().call(openWindowWithContent, spinnerPageHtml).
       next(mockWindow).take(['REPO_EXPORTED', 'REPO_EXPORT_ERROR']).
       next(repoExportError(new Error())).call([mockWindow, 'close']).
       next().isDone();