Implementing trusted-types CSP

Open
#2,421 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript, jquery
Domain
frontend, security

Research direction

The issue points to the datepicker initialization in jquery-ui around the this.dpDiv assignment at line 7261; start by tracing how that markup is passed through jQuery's HTML parsing and review the relevant Trusted Types behavior. Verify the datepicker can initialize under the reported CSP policy without a default policy, while existing datepicker behavior remains intact; no test file is named in the issue.

Written by the indexing model from the issue text.

Description

Behavior shared with 1.12 Comp: Datepicker

Hi,
i updated to jQuery 4.0.0 with jQuery-UI 1.14.2 to enable CSP-Header and add require-trusted-types-for 'script'; trusted-types my-policy
When i add jquery and jquery-ui javascript files to a page an exception happens:

jquery.js:4425 Uncaught (in promise) TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment.
at buildFragment (:8001/query.js?v=639270686323595707:15468:29)
at jQuery2.parseHTML (:8001/query.js?v=639270686323595707:18412:18)
at new jQuery2.fn.init (:8001/query.js?v=639270686323595707:14404:43)
at jQuery2 (:8001/query.js?v=639270686323595707:12915:16)
at new Datepicker (:8001/query.js?v=639270686323595707:4716:43)
at :8001/query.js?v=639270686323595707:6394:22
at :8001/query.js?v=639270686323595707:35:9
at node_modules/jquery-ui/dist/jquery-ui.js (:8001/query.js?v=639270686323595707:37:7)
at __require (:8001/query.js?v=639270686323595707:8:50)
at :8001/query.js?v=639270686323595707:18712:38

I also use esbuild, so the linenumbers are not the numbers in the original js files.
After debugging i found that the string <div id='ui-datepicker-div' class='ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div> raises the exception.
The string comes from line 7261 in jquery-ui: this.dpDiv = datepicker_bindHover( $( "<div id='" + this._mainDivId + "' class='ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'></div>" ) );

The workaround is to add a default policy for trusted types. But this should not be necessary. So my request is to add support for Trusted Types.

Thank you

Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from jquery/jquery-ui

All issues in jquery/jquery-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.