Revert "Secure preview frame (#2107)"

This reverts commit c2096f8.
popcodeorg · Feb 11, 2020 · adb3ade · adb3ade
1 parent c7a7872
commit adb3ade
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 80 deletions.
diff --git a/src/components/PreviewFrame.jsx b/src/components/PreviewFrame.jsx
@@ -26,6 +26,10 @@ class PreviewFrame extends React.Component {
   constructor(props) {
     super(props);
 
+    const {
+      compiledProject: {source},
+    } = props;
+
     bindAll(this, '_attachToFrame', '_handleInfiniteLoop');
 
     this.render = constant(
@@ -35,7 +39,7 @@ class PreviewFrame extends React.Component {
           name={`preview-frame-${nextId++}`}
           ref={this._attachToFrame}
           sandbox={sandboxOptions}
-          src="preview.html"
+          srcDoc={source}
         />
       </div>,
     );
@@ -186,12 +190,8 @@ class PreviewFrame extends React.Component {
     this._channel = Channel.build({
       window: frame.contentWindow,
       origin: '*',
-      onReady: () => {
+      onReady() {
         frame.classList.add('preview__frame_loaded');
-        this._channel.notify({
-          method: 'updateSrc',
-          params: this.props.compiledProject.source,
-        });
       },
     });
 

diff --git a/src/html/preview.html b/src/html/preview.html
diff --git a/src/preview.js b/src/preview.js
@@ -5,12 +5,10 @@ import handleConsoleExpressions from './previewSupport/handleConsoleExpressions'
 import handleConsoleLogs from './previewSupport/handleConsoleLogs';
 import handleErrors from './previewSupport/handleErrors';
 import handleKeyEvents from './previewSupport/handleKeyEvents';
-import handleSourceUpdates from './previewSupport/handleSourceUpdates';
 import overrideAlert from './previewSupport/overrideAlert';
 
 handleErrors();
 handleConsoleExpressions();
 handleConsoleLogs();
 handleKeyEvents();
-handleSourceUpdates();
 overrideAlert();
diff --git a/src/previewSupport/handleSourceUpdates.js b/src/previewSupport/handleSourceUpdates.js
diff --git a/src/util/compileProject.js b/src/util/compileProject.js
@@ -2,15 +2,32 @@ import castArray from 'lodash-es/castArray';
 import compact from 'lodash-es/compact';
 import flatMap from 'lodash-es/flatMap';
 import isEmpty from 'lodash-es/isEmpty';
+import map from 'lodash-es/map';
 import trim from 'lodash-es/trim';
 import uniq from 'lodash-es/uniq';
 
+import config from '../config';
+
 import retryingFailedImports from './retryingFailedImports';
 
+const downloadingScript = downloadScript();
+
 const parser = new DOMParser();
 
 export const sourceDelimiter = '/*__POPCODESTART__*/';
 
+async function downloadScript() {
+  if (config.nodeEnv === 'test') {
+    return '';
+  }
+
+  const responses = await Promise.all(
+    map(document.querySelectorAll('.preview-bundle'), el => fetch(el.src)),
+  );
+  const scripts = await Promise.all(responses.map(response => response.text()));
+  return scripts.join('\n');
+}
+
 function constructDocument(project) {
   const doc = parser.parseFromString(project.sources.html, 'text/html');
   ensureDocumentElement(doc);
@@ -133,6 +150,13 @@ function addCss(doc, {sources: {css}}) {
   doc.head.appendChild(styleTag);
 }
 
+async function addPreviewSupportScript(doc) {
+  const downloadedScript = await downloadingScript;
+  const scriptTag = doc.createElement('script');
+  scriptTag.innerHTML = downloadedScript;
+  doc.head.appendChild(scriptTag);
+}
+
 export async function addJavascript(doc, {sources: {javascript}}, opts) {
   if (trim(javascript).length === 0) {
     return {};
@@ -187,7 +211,9 @@ export default async function compileProject(project, {isInlinePreview} = {}) {
   }
 
   addCss(doc, project);
-
+  if (isInlinePreview) {
+    await addPreviewSupportScript(doc);
+  }
   const {sourceMap} = await addJavascript(doc, project, {
     breakLoops: isInlinePreview,
   });

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,6 +7,7 @@ const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const escapeRegExp = require('lodash.escaperegexp');
 const OfflinePlugin = require('offline-plugin');
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
 const StatsPlugin = require('stats-webpack-plugin');
 const webpack = require('webpack');
 const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -140,10 +141,64 @@ module.exports = (env = process.env.NODE_ENV || 'development') => {
     devtool = 'cheap-module-eval-source-map';
   }
 
+  if (!isTest) {
+    plugins.push(
+      new OfflinePlugin({
+        caches: {
+          main: [/(?:^|~)(?:main|preview)[-.~]/u, ':externals:'],
+          additional: [':rest:'],
+        },
+        safeToUseOptionalCaches: isProduction,
+        AppCache: {
+          caches: ['main', 'additional', 'optional'],
+        },
+        publicPath: '/',
+        responseStrategy: 'network-first',
+        externals: ['/', 'application.css', 'images/pop/thinking.svg'],
+      }),
+      new HtmlWebpackPlugin({
+        template: './html/index.html',
+        chunksSortMode: 'dependency',
+      }),
+      new ScriptExtHtmlWebpackPlugin({
+        defaultAttribute: 'defer',
+        inline: /(^|~)inline[.~-]/u,
+        prefetch: {
+          chunks: 'async',
+          test: /\.js$/u,
+        },
+        custom: [
+          {
+            test: /^(?!(|.*~)main[.~-])/u,
+            attribute: 'type',
+            value: 'ref',
+          },
+          {
+            test: /^$/u,
+            attribute: 'type',
+            value: 'text/javascript',
+          },
+          {
+            test: /(^|~)preview[.~-]/u,
+            attribute: 'class',
+            value: 'preview-bundle',
+          },
+        ],
+      }),
+    );
+  }
+
   const babelLoaderConfig = makeBabelLoaderConfig({shouldCache: !isProduction});
 
-  const baseConfig = {
+  return {
     mode: isProduction ? 'production' : 'development',
+    entry: isTest
+      ? undefined
+      : {
+          inline: 'first-input-delay',
+          main: './application.js',
+          preview: './preview.js',
+        },
     context: path.resolve(__dirname, 'src'),
     optimization: {
       splitChunks: isTest ? false : {chunks: 'all'},
@@ -290,6 +345,8 @@ module.exports = (env = process.env.NODE_ENV || 'development') => {
       ],
     },
 
+    plugins,
+
     node: {
       fs: 'empty',
     },
@@ -304,63 +361,4 @@ module.exports = (env = process.env.NODE_ENV || 'development') => {
     },
     devtool,
   };
-
-  const mainConfig = {
-    ...baseConfig,
-    name: 'main',
-    entry: isTest
-      ? undefined
-      : {
-          inline: 'first-input-delay',
-          main: './application.js',
-        },
-    plugins: [
-      ...plugins,
-      ...(isTest
-        ? []
-        : [
-            new OfflinePlugin({
-              caches: {
-                main: [/(?:^|~)(?:main|preview)[-.~]/u, ':externals:'],
-                additional: [':rest:'],
-              },
-              safeToUseOptionalCaches: isProduction,
-              AppCache: {
-                caches: ['main', 'additional', 'optional'],
-              },
-              publicPath: '/',
-              responseStrategy: 'network-first',
-              externals: ['/', 'application.css', 'images/pop/thinking.svg'],
-            }),
-            new HtmlWebpackPlugin({
-              template: './html/index.html',
-              chunksSortMode: 'dependency',
-            }),
-          ]),
-    ],
-  };
-
-  const previewConfig = {
-    ...baseConfig,
-    name: 'preview',
-    entry: isTest
-      ? undefined
-      : {
-          preview: './preview.js',
-        },
-    plugins: [
-      ...plugins,
-      ...(isTest
-        ? []
-        : [
-            new HtmlWebpackPlugin({
-              filename: 'preview.html',
-              template: './html/preview.html',
-              chunksSortMode: 'dependency',
-            }),
-          ]),
-    ],
-  };
-
-  return [previewConfig, mainConfig];
 };