HTML sanitizer for descriptions.

ipywidgets/widgets/widget_bool.py

@@ -54,8 +54,14 @@ class ToggleButton(_Bool):
         value of the toggle button: True-pressed, False-unpressed
     description : str
         description displayed next to the button
+    description_html : boolean
+        accept HTML in the description
     icon: str
         font-awesome icon name
+    style: instance of DescriptionStyle
+        styling customizations
+    button_style: enum
+        button predefined styling
     """
     _view_name = Unicode('ToggleButtonView').tag(sync=True)
     _model_name = Unicode('ToggleButtonModel').tag(sync=True)

ipywidgets/widgets/widget_description.py

@@ -3,7 +3,7 @@
 
 """Contains the DOMWidget class"""
 
-from traitlets import Unicode
+from traitlets import Bool, Unicode
 from .widget import Widget, widget_serialization, register
 from .trait_types import InstanceDict
 from .widget_style import Style
@@ -21,6 +21,7 @@ class DescriptionWidget(DOMWidget, CoreWidget):
     """Widget that has a description label to the side."""
     _model_name = Unicode('DescriptionModel').tag(sync=True)
     description = Unicode('', help="Description of the control.").tag(sync=True)
+    description_html = Bool(False, help="Accept HTML in the description.").tag(sync=True)
     style = InstanceDict(DescriptionStyle, help="Styling customizations").tag(sync=True, **widget_serialization)
 
     def _repr_keys(self):

packages/base-manager/package.json

@@ -35,14 +35,16 @@
     "@jupyter-widgets/base": "^4.0.0-alpha.0",
     "@jupyterlab/services": "^5.0.2",
     "@lumino/coreutils": "^1.4.2",
-    "base64-js": "^1.2.1"
+    "base64-js": "^1.2.1",
+    "sanitize-html": "^1.20"
   },
   "devDependencies": {
     "@types/base64-js": "^1.2.5",
     "@types/chai": "^4.1.7",
     "@types/chai-as-promised": "^7.1.0",
     "@types/expect.js": "^0.3.29",
     "@types/mocha": "^5.2.7",
+    "@types/sanitize-html": "^1.20",
     "@types/sinon": "^7.0.13",
     "@types/sinon-chai": "^3.2.2",
     "chai": "^4.0.0",

packages/base-manager/src/manager-base.ts

@@ -25,9 +25,48 @@ import {
 } from '@jupyter-widgets/base';
 
 import { base64ToBuffer, bufferToBase64, hexToBuffer } from './utils';
+import sanitize from 'sanitize-html';
 
 const PROTOCOL_MAJOR_VERSION = PROTOCOL_VERSION.split('.', 1)[0];
 
+/**
+ * Strip unwanted tags from plaintext descriptions.
+ */
+function default_plaintext_sanitize(s: string): string {
+  return sanitize(s, {
+    allowedTags: [],
+    allowedAttributes: {}
+  });
+}
+
+/**
+ * Sanitize HTML-formatted descriptions.
+ */
+function default_inline_sanitize(html: string): string {
+  return sanitize(html, {
+    allowedTags: [
+      'a',
+      'abbr',
+      'b',
+      'code',
+      'em',
+      'i',
+      'img',
+      'li',
+      'ol',
+      'strong',
+      'style',
+      'ul'
+    ],
+    allowedAttributes: {
+      '*': ['aria-*', 'title'],
+      a: ['href'],
+      img: ['src'],
+      style: ['media']
+    }
+  });
+}
+
 export interface IState extends PartialJSONObject {
   buffers?: IBase64Buffers[];
   model_name: string;
@@ -462,6 +501,14 @@ export abstract class ManagerBase implements IWidgetManager {
     return Promise.resolve(url);
   }
 
+  plaintext_sanitize(s: string): string {
+    return default_plaintext_sanitize(s);
+  }
+
+  inline_sanitize(s: string): string {
+    return default_inline_sanitize(s);
+  }
+
   /**
    * The comm target name to register
    */

packages/base/src/manager.ts

@@ -190,4 +190,7 @@ export interface IWidgetManager {
    * The default implementation just returns the original url.
    */
   resolveUrl(url: string): Promise<string>;
+
+  plaintext_sanitize(s: string): string;
+  inline_sanitize(s: string): string;
 }

packages/base/test/src/dummy-manager.ts

@@ -316,6 +316,13 @@ export class DummyManager implements widgets.IWidgetManager {
     return Promise.resolve(url);
   }
 
+  plaintext_sanitize(s: string): string {
+    return s;
+  }
+  inline_sanitize(s: string): string {
+    return s;
+  }
+
   /**
    * Dictionary of model ids and model instance promises
    */

packages/controls/src/widget_bool.ts

@@ -79,10 +79,19 @@ export class CheckboxView extends DescriptionView {
       return;
     }
     const description = this.model.get('description');
-    this.descriptionSpan.innerHTML = description;
+    const plaintext_description = this.model.widget_manager.plaintext_sanitize(
+      description
+    );
+    if (this.model.get('description_html')) {
+      this.descriptionSpan.innerHTML = this.model.widget_manager.inline_sanitize(
+        description
+      );
+    } else {
+      this.descriptionSpan.textContent = plaintext_description;
+    }
     this.typeset(this.descriptionSpan);
-    this.descriptionSpan.title = description;
-    this.checkbox.title = description;
+    this.descriptionSpan.title = plaintext_description;
+    this.checkbox.title = plaintext_description;
   }
 
   /**

packages/controls/src/widget_description.ts

@@ -40,7 +40,8 @@ export class DescriptionModel extends DOMWidgetModel {
       _model_module: '@jupyter-widgets/controls',
       _view_module_version: JUPYTER_CONTROLS_VERSION,
       _model_module_version: JUPYTER_CONTROLS_VERSION,
-      description: ''
+      description: '',
+      description_html: false
     };
   }
 }
@@ -53,6 +54,11 @@ export class DescriptionView extends DOMWidgetView {
     this.label.style.display = 'none';
 
     this.listenTo(this.model, 'change:description', this.updateDescription);
+    this.listenTo(
+      this.model,
+      'change:description_html',
+      this.updateDescription
+    );
     this.listenTo(this.model, 'change:tabbable', this.updateTabindex);
     this.updateDescription();
     this.updateTabindex();
@@ -68,7 +74,15 @@ export class DescriptionView extends DOMWidgetView {
     if (description.length === 0) {
       this.label.style.display = 'none';
     } else {
-      this.label.innerHTML = description;
+      if (this.model.get('description_html')) {
+        this.label.innerHTML = this.model.widget_manager.inline_sanitize(
+          description
+        );
+      } else {
+        this.label.textContent = this.model.widget_manager.plaintext_sanitize(
+          description
+        );
+      }
       this.typeset(this.label);
       this.label.style.display = '';
     }

packages/html-manager/package.json

@@ -51,6 +51,7 @@
   "devDependencies": {
     "@types/mocha": "^5.2.7",
     "@types/node": "^12.7.0",
+    "@types/sanitize-html": "^1.20",
     "chai": "^4.0.0",
     "css-loader": "^3.4.0",
     "file-loader": "^5.0.2",