Merge pull request #118 from SylvainCorlay/worker-eval

Safe conditional formatting

Author: maartenbreddels

README.md

@@ -43,7 +43,6 @@ $ jupyter labextension install ipysheet
 If you have notebook 5.2 or below, you also need to execute:
 ```
 $ jupyter nbextension enable --py --sys-prefix ipysheet
-$ jupyter nbextension enable --py --sys-prefix ipysheet.renderer_nbext
 ```
 
 For a development installation (requires npm),
@@ -54,19 +53,7 @@ $ cd ipysheet
 $ pip install -e .
 $ jupyter nbextension install --py --symlink --sys-prefix ipysheet
 $ jupyter nbextension enable --py --sys-prefix ipysheet
-$ jupyter nbextension enable --py --sys-prefix ipysheet.renderer_nbext
 $ jupyter labextension link js
 ```
 
 For Jupyter lab development, you may want to start Jupyter lab with `jupyter lab --watch` so it instantly picks up changes.
-
-# Security
-
-*If you are a regular Jupyter notebook or lab user you can ignore this section, it is only relevant is shared multiusers environment, like with Jupyter hub.*
-
-ipysheet contains a part (the Renderer widget) that will allow arbitrary Javascript injection from a user into a webpage that contains the notebook. In situation where notebooks are shared, this can lead to security issues. If you want to disable this, run for the Jupyter notebook and Jupyter lab respectively:
-
-```
-$ jupyter nbextension disable --py --sys-prefix ipysheet.renderer_nbext
-$ jupyter labextension disable ipysheet:renderer # for jupyter lab
-```

docs/source/index.ipynb

@@ -27,7 +27,6 @@
     "If you have notebook 5.2 or below, you also need to execute:\n",
     "```\n",
     "$ jupyter nbextension enable --py --sys-prefix ipysheet\n",
-    "$ jupyter nbextension enable --py --sys-prefix ipysheet.renderer_nbext\n",
     "```"
    ]
   },
@@ -46,13 +45,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 20,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "f4ff470ae36f47fbbd41fec1c0f33c72",
+       "model_id": "416721e4ee6e49acb6e16247cd941edf",
        "version_major": 2,
        "version_minor": 0
       },
@@ -79,13 +78,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 21,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ed50a15183c44808b15ff47fe550e6ad",
+       "model_id": "ff3f93d6b9f4478c88f715adfe2e62e4",
        "version_major": 2,
        "version_minor": 0
       },
@@ -129,13 +128,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 22,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "4377673eadff475cbc2ab6ebec1221d5",
+       "model_id": "219ad954a15f4420962413c752383eef",
        "version_major": 2,
        "version_minor": 0
       },
@@ -179,13 +178,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": 23,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ec061edbce744dae883ab84c70c99a39",
+       "model_id": "dd536f9d0e074109aff4c567d9bfe1eb",
        "version_major": 2,
        "version_minor": 0
       },
@@ -216,13 +215,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": 24,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "84ba2d613f244d6598f18e96e71dc47a",
+       "model_id": "253fc660f6d44a0984dbe77d491d73a1",
        "version_major": 2,
        "version_minor": 0
       },
@@ -257,36 +256,33 @@
    "metadata": {},
    "source": [
     "# Renderers\n",
-    "ipysheet is build on Handsontable, which allows [custom renderers](https://docs.handsontable.com/demo-custom-renderers.html), which we also support. Note that this means ipysheet allows arbitrary JavaScript injection (TODO: make this part optional)"
+    "ipysheet is build on Handsontable, which allows [custom renderers](https://docs.handsontable.com/demo-custom-renderers.html), which we also support."
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 25,
    "metadata": {},
    "outputs": [],
    "source": [
-    "jscode_renderer_negative = \"\"\"\n",
-    "function (instance, td, row, col, prop, value, cellProperties) {\n",
-    "    Handsontable.renderers.TextRenderer.apply(this, arguments);\n",
-    "    if (value < 0)\n",
-    "        td.style.backgroundColor = 'red'\n",
-    "    else\n",
-    "        td.style.backgroundColor = 'green'\n",
+    "jscode_renderer_negative = \"\"\"function (value) {\n",
+    "  return {\n",
+    "    backgroundColor: value < 0 ?  'red' : 'green'\n",
+    "  };\n",
     "}\n",
     "\"\"\"\n",
     "ipysheet.renderer(code=jscode_renderer_negative, name='negative');"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 26,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "3518aa67aad24dbda94d71ad73e4f1be",
+       "model_id": "43e5068313f9468e93c0c16d8cd95de4",
        "version_major": 2,
        "version_minor": 0
       },
@@ -315,28 +311,26 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 27,
    "metadata": {},
    "outputs": [],
    "source": [
-    "def renderer_negative(instance, td, row, col, prop, value, cellProperties):\n",
-    "    Handsontable.renderers.TextRenderer.apply(this, arguments);\n",
-    "    if value < 0:\n",
-    "        td.style.backgroundColor = 'orange'\n",
-    "    else:\n",
-    "        td.style.backgroundColor = ''\n",
+    "def renderer_negative(value):\n",
+    "    return {\n",
+    "        'backgroundColor': 'orange' if value < 0 else ''\n",
+    "    }\n",
     "ipysheet.renderer(code=renderer_negative, name='negative_transpiled');"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": 28,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "7e358c1b47034cd7aad1710a9e3c841b",
+       "model_id": "707ebcff579849d28c0dea4669b0a6d8",
        "version_major": 2,
        "version_minor": 0
       },
@@ -383,7 +377,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.4"
+   "version": "3.7.3"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

ipysheet.json

@@ -1,6 +1,5 @@
 {
   "load_extensions": {
-    "ipysheet/extension": true,
-    "ipysheet/extension-renderer": true
+    "ipysheet/extension": true
   }
-}
+}

ipysheet/renderer_nbext.py

@@ -121,8 +121,8 @@ def __getitem__(self, item):
 
 class Renderer(widgets.Widget):
     _model_name = Unicode('RendererModel').tag(sync=True)
-    _view_module = Unicode('ipysheet/renderer').tag(sync=True)
-    _model_module = Unicode('ipysheet/renderer').tag(sync=True)
+    _view_module = Unicode('ipysheet').tag(sync=True)
+    _model_module = Unicode('ipysheet').tag(sync=True)
     _view_module_version = Unicode(semver_range_frontend).tag(sync=True)
     _model_module_version = Unicode(semver_range_frontend).tag(sync=True)
     name = Unicode('custom').tag(sync=True)

ipysheet/sheet.py

@@ -9,6 +9,5 @@
 
 // Export widget models and views, and the npm package version number.
 export * from './sheet';
+export * from './renderer';
 export { version } from './version';
-import * as Handsontable from 'handsontable';
-export { Handsontable };

js/src/extension-renderer.ts

@@ -1,9 +1,8 @@
 import * as widgets  from '@jupyter-widgets/base';
+import * as Handsontable from 'handsontable';
 import {extend} from 'lodash';
 import {version, semver_range} from './version';
-// @ts-ignore
-import {Handsontable} from 'ipysheet';
-
+import {safeEval} from './worker_eval';
 
 let RendererModel = widgets.WidgetModel.extend({
     defaults: function() {
@@ -17,9 +16,15 @@ let RendererModel = widgets.WidgetModel.extend({
     },
     initialize: function() {
         RendererModel.__super__.initialize.apply(this, arguments);
-        // we add Handsontable manually as extra argument to put it in the scope
-        this.fn = new Function('Handsontable', 'return (' + this.get('code') + ')');
-        (Handsontable.renderers as any).registerRenderer(this.get('name'), this.fn(Handsontable));
+        // We add Handsontable manually as extra argument to put it in the scope
+        var that = this;
+        this.fn = function (instance, td, row, col, prop, value, cellProperties) {
+          Handsontable.renderers.TextRenderer.apply(this, arguments);
+          safeEval(`(${that.get('code')})(${value})`).then(function(style) {
+            (Object as any).assign(td.style, style);
+          });
+        };
+        (Handsontable.renderers as any).registerRenderer(this.get('name'), this.fn);
     }
 });
 

js/src/index.ts

@@ -0,0 +1,63 @@
+export function safeEval(untrustedCode) {
+  return new Promise(function (resolve, reject) {
+    var blobURL = URL.createObjectURL(new Blob([
+      "(",
+      function () {
+        var _postMessage = postMessage;
+        var _addEventListener = addEventListener;
+
+        (function (obj) {
+          "use strict";
+
+          var current = obj;
+          var keepProperties = [
+            // required
+            'Object', 'Function', 'Infinity', 'NaN', 'undefined', 'caches', 'TEMPORARY', 'PERSISTENT', 
+            // optional, but trivial to get back
+            'Array', 'Boolean', 'Number', 'String', 'Symbol',
+            // optional
+            'Map', 'Math', 'Set',
+          ];
+
+          do {
+            Object.getOwnPropertyNames(current).forEach(function (name) {
+              if (keepProperties.indexOf(name) === -1) {
+                delete current[name];
+              }
+            });
+            current = Object.getPrototypeOf(current);
+          }
+          while (current !== Object.prototype);
+        })(this);
+
+        _addEventListener("message", function (e) {
+          var f = new Function("", "return (" + e.data + "\n);");
+            _postMessage(f(), undefined);
+        });
+      }.toString(),
+      ")()"
+    ], {
+      type: "application/javascript"
+    }));
+
+    var worker = new Worker(blobURL);
+
+    URL.revokeObjectURL(blobURL);
+
+    worker.onmessage = function (evt) {
+      worker.terminate();
+      resolve(evt.data);
+    };
+
+    worker.onerror = function (evt) {
+      reject(new Error(evt.message));
+    };
+
+    worker.postMessage(untrustedCode);
+
+    setTimeout(function () {
+      worker.terminate();
+      reject(new Error('The worker timed out.'));
+    }, 1000);
+  });
+}