This contribution reworks the way the List Picker renders items. This is motivated by reasons: * developers (consumer of the List Picker library) should be empowered to template their items in any way they wish * it should be hard for developers to introduce security issues while using a customized templates * end users should not be able to inject their content in a way that changes the way an item is rendered The current design of the item templating prevents DOM-XSS thanks to DOMPurify but relies on the fact that maintainers of the List Picker library does not miss something. Also DOMPurify is not the way to go when you control the content and want to prevent content injection from users, e.g. having a item name or a user realname set to "<img src=a>" should not display a broken image in the SBs or MSBs (we want to see the text without any sort of interpretation). To achieve these goals and solve the existing shortcomings, DOMPurify has been removed (again nothing wrong with it but it is not the right tool for the job) and replaced by a templating library. The templating library that has been choosen is lit-html [0]. lit-html exposes an API that can safely be exposed to the consumers of the List Picker library without providing them a (easy) way to shot themselves so it is an ideal candidat. It is also easy and natural to use in the JS/TS code that we write these days in Tuleap and it is compatible with Trusted Types [1] which we could benefit in, I hope, a not so far future. The restriction that was set on custom templates to only allow span, div, img and i tags has been removed. It did not prevented consumers of the library to mess up the selector and if at some point it had become an pain point, the allowlist would just have been expanded without checking for any possible side effects (it is a internal library after all). The integration of the lit-html templates is limited for now. The DOM of the list picker component and its data model are interleaved making it hard to push the integration further in one contribution. It would however be beneficial for the component to do so: * it would probably make it easier to have a clear distinction between the DOM and data which would help reducing the overall complexity * performance would be improved, rendering the whole component through lit-html templates would allow to only update the modified parts of the DOM instead of rewriting the integrality of the DOM each time Part of story #16648: have decorators on SelectX fields [0] https://lit-html.polymer-project.org/ [1] https://web.dev/trusted-types/ Change-Id: If52e062cb64b205f8cc582aa7d56acf8df8a848b

+214 −102

Author

Thomas Gerbet (tgerbet) 2020-12-10 15:18

Committer

Thomas Gerbet (tgerbet) 2020-12-11 13:15

Hash 7eadf2e794599e58885462dab9496de11b1cc0ed

Parent 1a8acf0b6e56714caa45958da3f2d15626a9fe14

Reference git #tuleap/stable/7eadf2e794599e58885462dab9496de11b1cc0ed