[Feature Request] Trusted Types support
Problem Statement
Not sure if this lib is still actively maintained but some of our apps still depend on it and use it
ReactXP framework should support Trusted Types API so that it can be seamlessly integrated with web applications that enforce Trusted Types for all DOM XSS Injection Sinks (e.g. assignments to Element.innerHTML property) using require-trusted-types-for CSP directive. Trusted Types APIs are now fully supported in web browsers based on Blink engine (Chrome, Edge, Electron and others).
Proposed solution
First we need to identify all instances where ReactXS integrates with such methods and propose re-factoring. We need to be careful to keep supporting web browsers without Trusted Types support and, obviously, mobile platforms (iOS and Android).
We know about these locations so far:
- Assigning empty string into Element.innerHTML
- We could either use TrustedTypePolicyFactory.emptyHTML or rewrite using assignment to Element.innerText, call to Element.replaceChildren() and so on.
- https://github.com/microsoft/reactxp/blob/6b6c56f930aec0bf1250573c691a5c7e6ab05091/src/web/CustomScrollbar.ts#L263
- https://github.com/microsoft/reactxp/blob/6b6c56f930aec0bf1250573c691a5c7e6ab05091/src/web/CustomScrollbar.ts#L427
- https://github.com/microsoft/reactxp/blob/6b6c56f930aec0bf1250573c691a5c7e6ab05091/src/web/CustomScrollbar.ts#L432
- Assigning static HTML into Element.innerHTML
- We could rewrite using standard DOM manipulation functions (Document.createElement, Element.setAttribute(), ...)
- https://github.com/microsoft/reactxp/blob/6b6c56f930aec0bf1250573c691a5c7e6ab05091/src/web/CustomScrollbar.ts#L249
- Assigning dynamic HTML into HTMLIFrameElement.srcdoc
- This is in extension, we can maybe ignore or pass content through HTML sanitizer such as DOMPurify
- https://github.com/microsoft/reactxp/blob/6b6c56f930aec0bf1250573c691a5c7e6ab05091/extensions/webview/src/web/WebView.tsx#L101
References
Source: microsoft/reactxp