HTML sanitizer for descriptions.

[zerline]

An HTML sanitizer for descriptions. On the Python side: that is, we sanitize as early as possible. We may have to think about jslinks, though. Should address issue #2636

[SylvainCorlay]

Should we sanitize this on the HTML side using a known package? JupyterLab does that.

Note: someone could JSLink this attribute which would not go through the validation.

Jason idea: make the sanitizer part of the manager, so that the environment can provide it. In the base manager, this could be a pass-through, and in the case of JupyterLab, we could use the lab sanitizer.

[zerline]

A new proposal for an inline sanitizer:
(in jupyterlab/packages/apputils/src/sanitizer.js)

class InlineSanitizer implements ISanitizer {

  /**
   * Sanitize an HTML string.
   *
   * @param dirty - The dirty text.
   *
   * @param options - The optional sanitization options.
   *
   * @returns The sanitized string.
   */
  sanitize(dirty: string, options?: ISanitizer.IOptions): string {
    return sanitize(dirty, { ...this._options, ...(options || {}) });
  }

  private _options: sanitize.IOptions = {
    // Note: <script> content is already stripped by sanitize-html
    // HTML tags that are allowed to be used in our labels or descriptions.
    allowedTags: ['a', 'abbr', 'b', 'blockquote', 'code', 'em', 'i', 'img', 'li', 'ol', 'strong', 'style', 'svg', 'ul'],
    // Attributes that HTML tags are allowed to have in our labels or descriptions
    allowedAttributes: {
      '*': ['alt', 'aria-*', 'class', 'id', 'lang', 'name', 'style', 'title', 'translate'],
      a: ['href', 'hreflang', 'tabindex'],
      img: ['src','usemap'],
      li: ['value'],
      ol: ['reversed', 'start'],
      style: ['media'],
      svg: ['*']
    },
    // Inline CSS styles that HTML tags may have (and their allowed values)
    // allowedStyles: {
      // To simplify the data, all styles are allowed on all tags that allow the style attribute
     // '*': {}};
    transformTags: {
      // Set the "rel" attribute for <a> tags to "nofollow".
      a: sanitize.simpleTransform('a', { rel: 'nofollow' }),
    }
  };
}

[zerline]

Of course, the actual _options is matter of discussion!

[jasongrout]

I think for now, let's keep the inline sanitizer in the ipywidgets codebase until there is a wider need for it in jlab.

[SylvainCorlay]

TODO:

• check interaction with mathjax?
• sanitize the content of $...$
  Check where this happens in jupyterlab's notebook.

[vidartf]

$ y < a, x > a$

[SylvainCorlay]

Hey @blois, you may be interested in this addresses Issue #2636, which you opened.

Would you have a bit of time to look at this before we merge?

We have added this PR to the 8.0 milestone.

[davidbrochart]

@zerline I wanted to try out your PR but I get the following error, any idea?

$ bash dev-install.sh 
Checking yarn... 1.22.10
Checking pip... pip 21.0.1 from /home/david/mambaforge/envs/ipywidgets-dev/lib/python3.9/site-packages/pip (python 3.9)
Checking jupyter lab... 3.0.7
yarn install v1.22.10
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.2.11: The platform "linux" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.2: The platform "linux" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning "@typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "workspace-aggregator-efb47fc1-ff0a-4819-bee3-3af235de72f9 > @jupyter-widgets/controls > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning "workspace-aggregator-efb47fc1-ff0a-4819-bee3-3af235de72f9 > @jupyter-widgets/jupyterlab-manager > @jupyterlab/application > @jupyterlab/ui-components@2.0.2" has unmet peer dependency "react@~16.9.0".
[5/5] Building fresh packages...
success Saved lockfile.
Done in 7.68s.
yarn run v1.22.10
$ lerna run build --ignore "@jupyter-widgets/example-*"
lerna notice cli v3.20.2
lerna info versioning independent
lerna notice filter excluding "@jupyter-widgets/example-*"
lerna info filter [ '!@jupyter-widgets/example-*' ]
lerna info Executing command in 7 packages: "yarn run build"
lerna ERR! yarn run build exited 1 in '@jupyter-widgets/base'
lerna ERR! yarn run build stdout:
$ npm run build:src

> @jupyter-widgets/base@4.0.0-alpha.0 build:src
> tsc --build

../../node_modules/dom-serializer/lib/index.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/dom-serializer/lib/index.d.ts(1,27): error TS1005: ';' expected.
../../node_modules/domutils/lib/helpers.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/domutils/lib/helpers.d.ts(1,27): error TS1005: ';' expected.
../../node_modules/domutils/lib/legacy.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/domutils/lib/legacy.d.ts(1,36): error TS1005: ';' expected.
../../node_modules/domutils/lib/manipulation.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/domutils/lib/manipulation.d.ts(1,36): error TS1005: ';' expected.
../../node_modules/domutils/lib/querying.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/domutils/lib/querying.d.ts(1,36): error TS1005: ';' expected.
../../node_modules/domutils/lib/stringify.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/domutils/lib/stringify.d.ts(1,27): error TS1005: ';' expected.
../../node_modules/domutils/lib/tagtypes.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/domutils/lib/tagtypes.d.ts(1,64): error TS1005: ';' expected.
../../node_modules/domutils/lib/traversal.d.ts(1,13): error TS1005: '=' expected.
../../node_modules/domutils/lib/traversal.d.ts(1,54): error TS1005: ';' expected.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:
npm ERR! code 1
npm ERR! path /home/david/github/davidbrochart/ipywidgets/packages/base
npm ERR! command failed
npm ERR! command sh -c tsc --build

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/david/.npm/_logs/2021-02-16T21_11_34_450Z-debug.log
error Command failed with exit code 1.

lerna ERR! yarn run build exited 1 in '@jupyter-widgets/base'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[davidbrochart]

@zerline I was wondering how the logic in latex.ts compares to https://github.com/vberlier/extract-math, could we rely on the later instead of maintaining our own parsing, or do we have other requirements?

[blois]

Really excited to see progress on this!

[jasongrout]

Thank you so so much @zerline for being patient with this process.

I've implemented a few of @blois's suggestions (thanks!) and merged in master to pick up recent changes, and I think it is ready for one more person to do a final review.

[jasongrout]

and I think it is ready for one more person to do a final review.

Err, I see that lots of the changes are related to trivial lint formatting changes. I'll try to get those out of the review so we can concentrate on the substantial changes here.

[jasongrout]

I pulled in the lint updates from #3233, then ran the lint here. That means once #3233 is merged into master, the diff here will be much better and not contain spurious formatting changes. Alternatively, you can compare this to #3233 to see the real differences this PR introduces.

[jasongrout]

I also needed to regenerate the spec to add these description_allow_html fields to the new date time pickers.

[jasongrout]

That means once #3233 is merged into master, the diff here will be much better and not contain spurious formatting changes.

Now that the linter PR has been merged (thanks @ibdafna!), the changes here reflect just the changes relevant to this PR.

[ibdafna]

@zerline @jasongrout I reviewed and this looks good to me. I'll do a more thorough test run before the meeting on Tues and if I can't find anything before then we can merge!

[ibdafna]

Did more testing and it works beautifully - really cool PR! I tried breaking it and I didn't see any issues other than <strong></strong> not highlighting text (I may have used it incorrectly), but it's not a real issue because <b></b> does work as expected. Interop with MathJax is also 👌

[slongwell]

One of the above commits states that No HTML is possible inside the tag '<button>'.

Issue #3204, also mentioned above, suggests that Buttons/ToggleButtons may be able to have HTML descriptions in v8.0.

Are HTML descriptions in Buttons/ToggleButtons something that is still being developed, or has that been found to be technically infeasible?