ui5/webcomponents-react FP improvements for OOTB queries

[knewbury01]

What This PR Contributes

1. A working app test case for how ui5/webcomponents-react input types can be used for input in react apps (includes only types that have a value property)
2. A set of exclusions that prevent FPs in the out of the box query XssThroughDom.ql
3. A test for the exclusion

Future Works

• investigate if Token + Tokenizer can be Xss vectors or not (not currently excluded)

[jeongsoolee09]

We keep the test pack at javascript/frameworks/{framework}/test/. Can you move the pack here and rename it similar to packs you see in other frameworks?

[Copilot]

Pull request overview

This PR reduces false positives in the XssThroughDom query for UI5 webcomponents-react by adding sanitizers for components that don't allow arbitrary user input. The changes introduce a comprehensive test suite demonstrating XSS patterns with various UI5 input components and excludes 14 component types that only accept predefined selections or numeric values.

Key changes:

• Added sanitizer logic to filter out false positives from UI5 webcomponents-react components that constrain user input (e.g., checkboxes, sliders, color pickers)
• Implemented API modeling for UI5 webcomponents-react using CodeQL's type tracking
• Created a comprehensive test case with 25 UI5 input components to validate the sanitizer behavior

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
javascript/frameworks/ui5/lib/advanced_security/javascript_sap_ui5_all/Customizations.qll	Imports the new Sanitizers module into the customizations
javascript/frameworks/ui5/lib/advanced_security/javascript/frameworks/ui5/UI5WebcomponentsReact.qll	Implements API modeling for UI5 webcomponents-react with type tracking and ref attribute handling
javascript/frameworks/ui5/lib/advanced_security/javascript/frameworks/ui5/Sanitizers.qll	Defines the ExcludedSource sanitizer class that filters out 14 component types that don't allow arbitrary user input
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/src/index.tsx	React app entry point for the test application
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/src/App.tsx	Test application demonstrating XSS patterns with 25 UI5 webcomponents, including both vulnerable and false positive cases
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/qlpack.yml	CodeQL pack configuration for the test
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/public/index.html	HTML template for the test application
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/package.json	NPM dependencies for the test application including UI5 webcomponents v2.15
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/codeql-pack.lock.yml	CodeQL pack dependency lock file
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/XssThroughDom.qlref	Query reference file
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/XssThroughDom.ql	Copy of the XssThroughDom query for testing the sanitizer customizations
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/XssThroughDom.expected	Expected test results showing 11 components flagged as vulnerable while 14 are correctly filtered out
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/README.md	Documentation explaining how to trigger XSS in the test application
javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/.eslintrc.json	ESLint configuration for the test application

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jeongsoolee09]

First round!

1. Mark true positive & false positive (or unsafe & safe) sources in App.tsx to easily see which one's good or bad at a glance.
2. It might be a good idea to include a git commit hash of github/codeql when XssThroughDom was taken copy of, in a comment.
3. Consider adding RangeSlider as its value is written to the value set by the user through the slider.
4. Consider adding a module-level QLDoc (basically a /** .... */ in the beginning of the file) to Sanitizers.qll to record its purpose of contributing to the default queries, and which ones it intends to contribute to.
5. I'm suspecting a combination of Token + Tokenizer can be a XSS injection vector; let's add to the future works.

[jeongsoolee09]

One more: Consider using API::moduleImport("@ui5/webcomponents-react").getMember([ ... ]) in ExcludedSource for accurate detection.

[jeongsoolee09]

Second round!

[jeongsoolee09]

Unless you think it is meaningful as a standalone class, we can remove it and instead place the ref name restriction on UseRefDomValueSource as jsx.getAttributeByName("ref").getValue().flow().getALocalSource().getAPropertyRead("current") (note the getAttributeByName("ref").

Feel free to dismiss this if you think it is reusable in future definitions.

[jeongsoolee09]

I guess you wanted to express this:

The UI5 component has a variable assigned to it and its current property is read somewhere.

... but there is no easy way to associate Input in the import statement and the Input in the component.

Well, React::ReactComponent.ref/0 actually does that cleanly; but we can't use it until we make UI5WebComponent extend ReactComponent. Let's mention this in the Future Works and raise an issue so that we can come back to it. For now we can let SSA handle it.

[jeongsoolee09]

I found that MultiComboBox actually can hold unrestricted string type: the value property holds whatever the user types into the search box for candidates.

[jeongsoolee09]

Please record the kind of inputs (int / boolean / enum-like string, ...) the components can hold. For this one:

Suggested change

	/* `Select` component usage */
	/* `Select`: Accepts enum-like string */

[jeongsoolee09]

Readability improvement:

Suggested change

	exists(RefAttribute attrib |
	attrib.getValue().flow().getALocalSource().getAPropertyRead("current") = this and
	jsx.getAnAttribute() = attrib
	)
	this = jsx.getAnAttribute().getValue().flow().getALocalSource().getAPropertyRead("current")

[jeongsoolee09]

Better description:

Suggested change

	/**
	* ``` javascript
	* import { Input, Button } from '@ui5/webcomponents-react';
	* ```
	*/
	/**
	* Classes imported from `@ui5/webcomponents-react`. e.g.
	*
	* ``` javascript
	* import { Input, Button } from '@ui5/webcomponents-react';
	* ```
	*/

[jeongsoolee09]

Suggested change

	/**
	* Refers to the ref attribute
	* <SomeElement ref={x}>
	*/
	/**
	* The `ref` attribute of a JSX attribute. e.g.
	*
	* ``` javascript
	* <SomeElement ref={x}>
	* ```
	*/

[jeongsoolee09]

Probably the final round.