Attempt for a javascript-side sanitization. Based on DOMPurifier.

Author: Zerline

ipywidgets/widgets/util.py

@@ -3,13 +3,12 @@
 
 """Contains the DOMWidget class"""
 
-from traitlets import Bool, Unicode, observe
+from traitlets import Bool, Unicode
 from .widget import Widget, widget_serialization, register
 from .trait_types import InstanceDict
 from .widget_style import Style
 from .widget_core import CoreWidget
 from .domwidget import DOMWidget
-from .util import sanitize
 
 @register
 class DescriptionStyle(Style, CoreWidget, Widget):
@@ -25,17 +24,6 @@ class DescriptionWidget(DOMWidget, CoreWidget):
     description_html = Bool(False, help="Accept HTML in the description.").tag(sync=True)
     style = InstanceDict(DescriptionStyle, help="Styling customizations").tag(sync=True, **widget_serialization)
 
-    @observe('description', 'description_html')
-    def description_changed(self, change):
-        if change.name == 'description' and not self.description_html:
-            return
-        if change.name == 'description_html' and not change.new:
-            return
-        if change.name == 'description':
-            self.description = sanitize(change.new)
-        else:
-            self.description = sanitize(self.description)
-
     def _repr_keys(self):
         for key in super()._repr_keys():
             # Exclude style if it had the default value

ipywidgets/widgets/widget_description.py

@@ -80,7 +80,9 @@ export class CheckboxView extends DescriptionView {
     }
     const description = this.model.get('description');
     if (this.model.get('description_html')) {
-      this.descriptionSpan.innerHTML = description;
+      this.descriptionSpan.innerHTML = this.model.widget_manager.description_sanitize(
+        description
+      );
     } else {
       this.descriptionSpan.textContent = description;
     }

packages/controls/src/widget_bool.ts

@@ -75,7 +75,9 @@ export class DescriptionView extends DOMWidgetView {
       this.label.style.display = 'none';
     } else {
       if (this.model.get('description_html')) {
-        this.label.innerHTML = description;
+        this.label.innerHTML = this.model.widget_manager.description_sanitize(
+          description
+        );
       } else {
         this.label.textContent = description;
       }

packages/controls/src/widget_description.ts

@@ -46,6 +46,7 @@
     "@jupyterlab/rendermime-interfaces": "^2.0.1",
     "@lumino/widgets": "^1.11.1",
     "ajv": "^6.10.0",
+    "dompurify": "^2",
     "jquery": "^3.1.1"
   },
   "devDependencies": {

packages/html-manager/package.json

@@ -11,10 +11,39 @@ import {
   RenderMimeRegistry,
   standardRendererFactories
 } from '@jupyterlab/rendermime';
+import DOMPurify from 'dompurify';
 
 import { WidgetRenderer, WIDGET_MIMETYPE } from './output_renderers';
 import { WidgetModel, WidgetView, DOMWidgetView } from '@jupyter-widgets/base';
 
+/**
+ * Sanitize HTML-formatted descriptions.
+ */
+export function default_description_sanitize(html: string): string {
+  let config = {
+    ALLOWED_TAGS: [
+      'a',
+      'abbr',
+      'b',
+      'blockquote',
+      'code',
+      'em',
+      'i',
+      'img',
+      'li',
+      'ol',
+      'strong',
+      'style',
+      'ul'
+    ],
+    ALLOWED_ATTRIBUTES: ['href', 'media', 'src', 'title']
+  };
+  return DOMPurify.sanitize(
+    DOMPurify(html, { FORBID_TAGS: ['script'], KEEP_CONTENT: false }),
+    config
+  );
+}
+
 export class HTMLManager extends ManagerBase {
   constructor(options?: {
     loader?: (moduleName: string, moduleVersion: string) => Promise<any>;
@@ -112,6 +141,13 @@ export class HTMLManager extends ManagerBase {
    */
   renderMime: RenderMimeRegistry;
 
+  /**
+   * How to sanitize HTML-formatted descriptions.
+   */
+  protected description_sanitize(html: string): string {
+    return default_description_sanitize(html);
+  }
+
   /**
    * A loader for a given module name and module version, and returns a promise to a module
    */