Skip to content

Commit 6781bb2

Browse files
knewbury01knewbury01
committed
Improve documentation on app and query tests for webcomponents for react
1 parent c43c54f commit 6781bb2

File tree

2 files changed

+52
-51
lines changed

2 files changed

+52
-51
lines changed

‎javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/XssThroughDom.ql‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @name DOM text reinterpreted as HTML
33
* @description Reinterpreting text from the DOM as HTML
44
* can lead to a cross-site scripting vulnerability.
5-
* @kind path-problem
5+
* @ kind path-problem
66
* @problem.severity warning
77
* @security-severity 6.1
88
* @precision high
@@ -13,6 +13,7 @@
1313
*/
1414

1515
//an exact copy of - https://github.com/github/codeql/blob/main/javascript/ql/src/Security/CWE-079/XssThroughDom.ql
16+
//at commit sha: 7b6720c
1617
//included for testing purposes only
1718
//tests the use of customizations to filter results via sanitizer
1819
import javascript

‎javascript/frameworks/ui5-webcomponents/test/queries/xss-input-dangerouslySetInnerHTML/src/App.tsx‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function App() {
88
const inputRef = useRef<typeof Input>(null);
99

1010
const handleInputChange = useCallback(() => {
11-
setInputValue((msg) => inputRef.current?.value || "");
11+
setInputValue((msg) => inputRef.current?.value || ""); {/* Potentially Unsafe */}
1212
}, [setInputValue]);
1313

1414
useEffect(() => {
@@ -24,7 +24,7 @@ function App() {
2424
const textAreaRef = useRef<typeof TextArea>(null);
2525

2626
const handleTextAreaChange = useCallback(() => {
27-
setTextAreaValue((msg) => textAreaRef.current?.value || "");
27+
setTextAreaValue((msg) => textAreaRef.current?.value || ""); {/* Potentially Unsafe */}
2828
}, [setTextAreaValue]);
2929

3030
useEffect(() => {
@@ -40,7 +40,7 @@ function App() {
4040
const searchRef = useRef<typeof Search>(null);
4141

4242
const handleSearchChange = useCallback(() => {
43-
setSearchValue((msg) => searchRef.current?.value || "");
43+
setSearchValue((msg) => searchRef.current?.value || ""); {/* Potentially Unsafe */}
4444
}, [setSearchValue]);
4545

4646
useEffect(() => {
@@ -56,7 +56,7 @@ function App() {
5656
const shellBarSearchRef = useRef<typeof ShellBarSearch>(null);
5757

5858
const handleShellBarSearchChange = useCallback(() => {
59-
setShellBarSearchValue((msg) => shellBarSearchRef.current?.value || "");
59+
setShellBarSearchValue((msg) => shellBarSearchRef.current?.value || ""); {/* Potentially Unsafe */}
6060
}, [setShellBarSearchValue]);
6161

6262
useEffect(() => {
@@ -72,7 +72,7 @@ function App() {
7272
const comboBoxRef = useRef<typeof ComboBox>(null);
7373

7474
const handleComboBoxChange = useCallback(() => {
75-
setComboBoxValue((msg) => comboBoxRef.current?.value || "");
75+
setComboBoxValue((msg) => comboBoxRef.current?.value || ""); {/* Potentially Unsafe */}
7676
}, [setComboBoxValue]);
7777

7878
useEffect(() => {
@@ -88,7 +88,7 @@ function App() {
8888
const multiComboBoxRef = useRef<typeof MultiComboBox>(null);
8989

9090
const handleMultiComboBoxChange = useCallback(() => {
91-
setMultiComboBoxValue((msg) => multiComboBoxRef.current?.value || "");
91+
setMultiComboBoxValue((msg) => multiComboBoxRef.current?.value || ""); {/* Safe */}
9292
}, [setMultiComboBoxValue]);
9393

9494
useEffect(() => {
@@ -104,7 +104,7 @@ function App() {
104104
const selectRef = useRef<typeof Select>(null);
105105

106106
const handleSelectChange = useCallback(() => {
107-
setSelectValue((msg) => selectRef.current?.value || "");
107+
setSelectValue((msg) => selectRef.current?.value || ""); {/* Safe */}
108108
}, [setSelectValue]);
109109

110110
useEffect(() => {
@@ -120,7 +120,7 @@ function App() {
120120
const datePickerRef = useRef<typeof DatePicker>(null);
121121

122122
const handleDatePickerChange = useCallback(() => {
123-
setDatePickerValue((msg) => datePickerRef.current?.value || "");
123+
setDatePickerValue((msg) => datePickerRef.current?.value || ""); {/* Potentially Unsafe */}
124124
}, [setDatePickerValue]);
125125

126126
useEffect(() => {
@@ -136,7 +136,7 @@ function App() {
136136
const dateRangePickerRef = useRef<typeof DateRangePicker>(null);
137137

138138
const handleDateRangePickerChange = useCallback(() => {
139-
setDateRangePickerValue((msg) => dateRangePickerRef.current?.value || "");
139+
setDateRangePickerValue((msg) => dateRangePickerRef.current?.value || ""); {/* Potentially Unsafe */}
140140
}, [setDateRangePickerValue]);
141141

142142
useEffect(() => {
@@ -152,7 +152,7 @@ function App() {
152152
const dateTimePickerRef = useRef<typeof DateTimePicker>(null);
153153

154154
const handleDateTimePickerChange = useCallback(() => {
155-
setDateTimePickerValue((msg) => dateTimePickerRef.current?.value || "");
155+
setDateTimePickerValue((msg) => dateTimePickerRef.current?.value || ""); {/* Potentially Unsafe */}
156156
}, [setDateTimePickerValue]);
157157

158158
useEffect(() => {
@@ -168,7 +168,7 @@ function App() {
168168
const timePickerRef = useRef<typeof TimePicker>(null);
169169

170170
const handleTimePickerChange = useCallback(() => {
171-
setTimePickerValue((msg) => timePickerRef.current?.value || "");
171+
setTimePickerValue((msg) => timePickerRef.current?.value || ""); {/* Potentially Unsafe */}
172172
}, [setTimePickerValue]);
173173

174174
useEffect(() => {
@@ -184,7 +184,7 @@ function App() {
184184
const colorPickerRef = useRef<typeof ColorPicker>(null);
185185

186186
const handleColorPickerChange = useCallback(() => {
187-
setColorPickerValue((msg) => colorPickerRef.current?.value || "");
187+
setColorPickerValue((msg) => colorPickerRef.current?.value || ""); {/* Safe */}
188188
}, [setColorPickerValue]);
189189

190190
useEffect(() => {
@@ -200,7 +200,7 @@ function App() {
200200
const colorPaletteItemRef = useRef<typeof ColorPaletteItem>(null);
201201

202202
const handleColorPaletteItemChange = useCallback(() => {
203-
setColorPaletteItemValue((msg) => colorPaletteItemRef.current?.value || "");
203+
setColorPaletteItemValue((msg) => colorPaletteItemRef.current?.value || ""); {/* Safe */}
204204
}, [setColorPaletteItemValue]);
205205

206206
useEffect(() => {
@@ -216,7 +216,7 @@ function App() {
216216
const calendarDateRef = useRef<typeof CalendarDate>(null);
217217

218218
const handleCalendarDateChange = useCallback(() => {
219-
setCalendarDateValue((msg) => calendarDateRef.current?.value || "");
219+
setCalendarDateValue((msg) => calendarDateRef.current?.value || ""); {/* Safe */}
220220
}, [setCalendarDateValue]);
221221

222222
useEffect(() => {
@@ -232,7 +232,7 @@ function App() {
232232
const fileUploaderRef = useRef<typeof FileUploader>(null);
233233

234234
const handleFileUploaderChange = useCallback(() => {
235-
setFileUploaderValue((msg) => fileUploaderRef.current?.value || "");
235+
setFileUploaderValue((msg) => fileUploaderRef.current?.value || ""); {/* Safe */}
236236
}, [setFileUploaderValue]);
237237

238238
useEffect(() => {
@@ -248,7 +248,7 @@ function App() {
248248
const checkBoxRef = useRef<typeof CheckBox>(null);
249249

250250
const handleCheckBoxChange = useCallback(() => {
251-
setCheckBoxValue((msg) => checkBoxRef.current?.value || "");
251+
setCheckBoxValue((msg) => checkBoxRef.current?.value || ""); {/* Safe */}
252252
}, [setCheckBoxValue]);
253253

254254
useEffect(() => {
@@ -264,7 +264,7 @@ function App() {
264264
const radioButtonRef = useRef<typeof RadioButton>(null);
265265

266266
const handleRadioButtonChange = useCallback(() => {
267-
setRadioButtonValue((msg) => radioButtonRef.current?.value || "");
267+
setRadioButtonValue((msg) => radioButtonRef.current?.value || ""); {/* Safe */}
268268
}, [setRadioButtonValue]);
269269

270270
useEffect(() => {
@@ -280,7 +280,7 @@ function App() {
280280
const switchRef = useRef<typeof Switch>(null);
281281

282282
const handleSwitchChange = useCallback(() => {
283-
setSwitchValue((msg) => switchRef.current?.value || "");
283+
setSwitchValue((msg) => switchRef.current?.value || ""); {/* Safe */}
284284
}, [setSwitchValue]);
285285

286286
useEffect(() => {
@@ -296,7 +296,7 @@ function App() {
296296
const optionRef = useRef<typeof Option>(null);
297297

298298
const handleOptionChange = useCallback(() => {
299-
setOptionValue((msg) => optionRef.current?.value || "");
299+
setOptionValue((msg) => optionRef.current?.value || ""); {/* Potentially Unsafe */}
300300
}, [setOptionValue]);
301301

302302
useEffect(() => {
@@ -312,7 +312,7 @@ function App() {
312312
const optionCustomRef = useRef<typeof OptionCustom>(null);
313313

314314
const handleOptionCustomChange = useCallback(() => {
315-
setOptionCustomValue((msg) => optionCustomRef.current?.value || "");
315+
setOptionCustomValue((msg) => optionCustomRef.current?.value || ""); {/* Potentially Unsafe */}
316316
}, [setOptionCustomValue]);
317317

318318
useEffect(() => {
@@ -328,7 +328,7 @@ function App() {
328328
const ratingIndicatorRef = useRef<typeof RatingIndicator>(null);
329329

330330
const handleRatingIndicatorChange = useCallback(() => {
331-
setRatingIndicatorValue((msg) => ratingIndicatorRef.current?.value || "");
331+
setRatingIndicatorValue((msg) => ratingIndicatorRef.current?.value || ""); {/* Safe - numeric */}
332332
}, [setRatingIndicatorValue]);
333333

334334
useEffect(() => {
@@ -344,7 +344,7 @@ function App() {
344344
const sliderRef = useRef<typeof Slider>(null);
345345

346346
const handleSliderChange = useCallback(() => {
347-
setSliderValue((msg) => sliderRef.current?.value || "");
347+
setSliderValue((msg) => sliderRef.current?.value || ""); {/* Safe - numeric */}
348348
}, [setSliderValue]);
349349

350350
useEffect(() => {
@@ -360,7 +360,7 @@ function App() {
360360
const progressIndicatorRef = useRef<typeof ProgressIndicator>(null);
361361

362362
const handleProgressIndicatorChange = useCallback(() => {
363-
setProgressIndicatorValue((msg) => progressIndicatorRef.current?.value || "");
363+
setProgressIndicatorValue((msg) => progressIndicatorRef.current?.value || ""); {/* Safe - numeric */}
364364
}, [setProgressIndicatorValue]);
365365

366366
useEffect(() => {
@@ -376,7 +376,7 @@ function App() {
376376
const stepInputRef = useRef<typeof StepInput>(null);
377377

378378
const handleStepInputChange = useCallback(() => {
379-
setStepInputValue((msg) => stepInputRef.current?.value || "");
379+
setStepInputValue((msg) => stepInputRef.current?.value || ""); {/* Safe - numeric */}
380380
}, [setStepInputValue]);
381381

382382
useEffect(() => {
@@ -392,7 +392,7 @@ function App() {
392392
const dynamicDateRangeRef = useRef<typeof DynamicDateRange>(null);
393393

394394
const handleDynamicDateRangeChange = useCallback(() => {
395-
setDynamicDateRangeValue((msg) => dynamicDateRangeRef.current?.value || "");
395+
setDynamicDateRangeValue((msg) => dynamicDateRangeRef.current?.value || ""); {/* Safe - numeric */}
396396
}, [setDynamicDateRangeValue]);
397397

398398
useEffect(() => {
@@ -406,31 +406,31 @@ function App() {
406406

407407
return (
408408
<div className="app">
409-
<Input placeholder="Input" ref={inputRef} id="input-field"></Input>
410-
<TextArea placeholder="TextArea" ref={textAreaRef} id="textarea-field"></TextArea>
411-
<Search placeholder="Search" ref={searchRef} id="search-field"></Search>
412-
<ShellBarSearch placeholder="ShellBarSearch" ref={shellBarSearchRef} id="shellbarsearch-field"></ShellBarSearch>
413-
<ComboBox placeholder="ComboBox" ref={comboBoxRef} id="combobox-field"></ComboBox>
414-
<MultiComboBox placeholder="MultiComboBox" ref={multiComboBoxRef} id="multicombobox-field"></MultiComboBox> {/* FP */}
415-
<Select ref={selectRef} id="select-field"></Select> {/* FP */}
416-
<DatePicker placeholder="DatePicker" ref={datePickerRef} id="datepicker-field"></DatePicker>
417-
<DateRangePicker placeholder="DateRangePicker" ref={dateRangePickerRef} id="daterangepicker-field"></DateRangePicker>
418-
<DateTimePicker placeholder="DateTimePicker" ref={dateTimePickerRef} id="datetimepicker-field"></DateTimePicker>
419-
<TimePicker placeholder="TimePicker" ref={timePickerRef} id="timepicker-field"></TimePicker>
420-
<ColorPicker ref={colorPickerRef} id="colorpicker-field"></ColorPicker> {/* FP */}
421-
<ColorPaletteItem value="color" ref={colorPaletteItemRef} id="colorpaletteitem-field"></ColorPaletteItem> {/* FP */}
422-
<CalendarDate value="20250101" ref={calendarDateRef} id="calendardate-field"></CalendarDate> {/* FP - not a standalone component */}
423-
<FileUploader ref={fileUploaderRef} id="fileuploader-field"></FileUploader> {/* FP */}
424-
<CheckBox ref={checkBoxRef} id="checkbox-field"></CheckBox> {/* FP */}
425-
<RadioButton ref={radioButtonRef} id="radiobutton-field"></RadioButton> {/* FP */}
426-
<Switch ref={switchRef} id="switch-field"></Switch> {/* FP */}
427-
<Option value="option" ref={optionRef} id="option-field"></Option>
428-
<OptionCustom value="custom" ref={optionCustomRef} id="optioncustom-field"></OptionCustom>
429-
<RatingIndicator ref={ratingIndicatorRef} id="ratingindicator-field"></RatingIndicator> {/* FP - numeric */}
430-
<Slider ref={sliderRef} id="slider-field"></Slider> {/* FP - numeric */}
431-
<ProgressIndicator ref={progressIndicatorRef} id="progressindicator-field"></ProgressIndicator> {/* FP - numeric */}
432-
<StepInput ref={stepInputRef} id="stepinput-field"></StepInput> {/* FP - numeric */}
433-
<DynamicDateRange ref={dynamicDateRangeRef} id="dynamicdaterange-field"></DynamicDateRange> {/* FP - numeric */}
409+
<Input placeholder="Input" ref={inputRef} id="input-field"></Input> {/* Potentially Unsafe */}
410+
<TextArea placeholder="TextArea" ref={textAreaRef} id="textarea-field"></TextArea> {/* Potentially Unsafe */}
411+
<Search placeholder="Search" ref={searchRef} id="search-field"></Search> {/* Potentially Unsafe */}
412+
<ShellBarSearch placeholder="ShellBarSearch" ref={shellBarSearchRef} id="shellbarsearch-field"></ShellBarSearch> {/* Potentially Unsafe */}
413+
<ComboBox placeholder="ComboBox" ref={comboBoxRef} id="combobox-field"></ComboBox> {/* Potentially Unsafe */}
414+
<MultiComboBox placeholder="MultiComboBox" ref={multiComboBoxRef} id="multicombobox-field"></MultiComboBox> {/* Safe */}
415+
<Select ref={selectRef} id="select-field"></Select> {/* Safe */}
416+
<DatePicker placeholder="DatePicker" ref={datePickerRef} id="datepicker-field"></DatePicker> {/* Potentially Unsafe */}
417+
<DateRangePicker placeholder="DateRangePicker" ref={dateRangePickerRef} id="daterangepicker-field"></DateRangePicker> {/* Potentially Unsafe */}
418+
<DateTimePicker placeholder="DateTimePicker" ref={dateTimePickerRef} id="datetimepicker-field"></DateTimePicker> {/* Potentially Unsafe */}
419+
<TimePicker placeholder="TimePicker" ref={timePickerRef} id="timepicker-field"></TimePicker> {/* Potentially Unsafe */}
420+
<ColorPicker ref={colorPickerRef} id="colorpicker-field"></ColorPicker> {/* Safe */}
421+
<ColorPaletteItem value="color" ref={colorPaletteItemRef} id="colorpaletteitem-field"></ColorPaletteItem> {/* Safe */}
422+
<CalendarDate value="20250101" ref={calendarDateRef} id="calendardate-field"></CalendarDate> {/* Safe - not a standalone component */}
423+
<FileUploader ref={fileUploaderRef} id="fileuploader-field"></FileUploader> {/* Safe */}
424+
<CheckBox ref={checkBoxRef} id="checkbox-field"></CheckBox> {/* Safe */}
425+
<RadioButton ref={radioButtonRef} id="radiobutton-field"></RadioButton> {/* Safe */}
426+
<Switch ref={switchRef} id="switch-field"></Switch> {/* Safe */}
427+
<Option value="option" ref={optionRef} id="option-field"></Option> {/* Potentially Unsafe */}
428+
<OptionCustom value="custom" ref={optionCustomRef} id="optioncustom-field"></OptionCustom> {/* Potentially Unsafe */}
429+
<RatingIndicator ref={ratingIndicatorRef} id="ratingindicator-field"></RatingIndicator> {/* Safe - numeric */}
430+
<Slider ref={sliderRef} id="slider-field"></Slider> {/* Safe - numeric */}
431+
<ProgressIndicator ref={progressIndicatorRef} id="progressindicator-field"></ProgressIndicator> {/* Safe - numeric */}
432+
<StepInput ref={stepInputRef} id="stepinput-field"></StepInput> {/* Safe - numeric */}
433+
<DynamicDateRange ref={dynamicDateRangeRef} id="dynamicdaterange-field"></DynamicDateRange> {/* Safe - numeric */}
434434

435435
<div dangerouslySetInnerHTML={{__html: inputValue}}></div>
436436
<div dangerouslySetInnerHTML={{__html: textAreaValue}}></div>

0 commit comments

Comments
 (0)