Skip to content

Commit c332881

Browse files
committed
replace innerHTML with TT friendly ways
This will enable usage in [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API) context. As Element.innerHTML is considered to be dangerous injection sink, its usage is denied when `Content-Security-Policy` enforces `require-trusted-types-for 'script'` directive. E.g. it throws something like this from `clearElement` function: ``` TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment. at D.clearElement (xyz.js:733:62) at D.start (xyz.js:710:176) ``` [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innerhtml) in MDN. [replaceChildren](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren) has [~91% coverage](https://caniuse.com/mdn-api_element_replacechildren)
1 parent 8436a42 commit c332881

File tree

3 files changed

+17
-17
lines changed

3 files changed

+17
-17
lines changed

src/html5-qrcode-scanner.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ export class Html5QrcodeScanner {
272272
if (!container) {
273273
throw `HTML Element with id=${this.elementId} not found`;
274274
}
275-
container.innerHTML = "";
275+
container.textContent = "";
276276
this.createBasicLayout(container!);
277277
this.html5Qrcode = new Html5Qrcode(
278278
this.getScanRegionId(),
@@ -336,7 +336,7 @@ export class Html5QrcodeScanner {
336336
const emptyHtmlContainer = () => {
337337
const mainContainer = document.getElementById(this.elementId);
338338
if (mainContainer) {
339-
mainContainer.innerHTML = "";
339+
mainContainer.textContent = "";
340340
this.resetBasicLayout(mainContainer);
341341
}
342342
}
@@ -1047,15 +1047,15 @@ export class Html5QrcodeScanner {
10471047
this.getScanRegionId())!;
10481048

10491049
if (this.cameraScanImage) {
1050-
qrCodeScanRegion.innerHTML = "<br>";
1051-
qrCodeScanRegion.appendChild(this.cameraScanImage);
1050+
const br = document.createElement("br");
1051+
qrCodeScanRegion.replaceChildren(br, this.cameraScanImage);
10521052
return;
10531053
}
10541054

10551055
this.cameraScanImage = new Image;
10561056
this.cameraScanImage.onload = (_) => {
1057-
qrCodeScanRegion.innerHTML = "<br>";
1058-
qrCodeScanRegion.appendChild($this.cameraScanImage!);
1057+
const br = document.createElement("br");
1058+
qrCodeScanRegion.replaceChildren(br, $this.cameraScanImage!);
10591059
}
10601060
this.cameraScanImage.width = 64;
10611061
this.cameraScanImage.style.opacity = "0.8";
@@ -1069,15 +1069,15 @@ export class Html5QrcodeScanner {
10691069
this.getScanRegionId())!;
10701070

10711071
if (this.fileScanImage) {
1072-
qrCodeScanRegion.innerHTML = "<br>";
1073-
qrCodeScanRegion.appendChild(this.fileScanImage);
1072+
const br = document.createElement("br");
1073+
qrCodeScanRegion.replaceChildren(br, this.fileScanImage);
10741074
return;
10751075
}
10761076

10771077
this.fileScanImage = new Image;
10781078
this.fileScanImage.onload = (_) => {
1079-
qrCodeScanRegion.innerHTML = "<br>";
1080-
qrCodeScanRegion.appendChild($this.fileScanImage!);
1079+
const br = document.createElement("br");
1080+
qrCodeScanRegion.replaceChildren(br, $this.fileScanImage!);
10811081
}
10821082
this.fileScanImage.width = 64;
10831083
this.fileScanImage.style.opacity = "0.8";
@@ -1088,7 +1088,7 @@ export class Html5QrcodeScanner {
10881088
private clearScanRegion() {
10891089
const qrCodeScanRegion = document.getElementById(
10901090
this.getScanRegionId())!;
1091-
qrCodeScanRegion.innerHTML = "";
1091+
qrCodeScanRegion.textContent = "";
10921092
}
10931093

10941094
//#region state getters

src/html5-qrcode.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1380,7 +1380,7 @@ export class Html5Qrcode {
13801380
}
13811381
const element = document.getElementById(this.elementId);
13821382
if (element) {
1383-
element.innerHTML = "";
1383+
element.textContent = "";
13841384
}
13851385
}
13861386

tests/ui/scanner/camera-selection-ui.test.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe("CameraSelectionUi#create()", () => {
2222

2323
after(() => {
2424
document.body.removeChild(parentElement!);
25-
parentElement!.innerHTML = "";
25+
parentElement!.textContent = "";
2626
parentElement = undefined;
2727
});
2828

@@ -40,7 +40,7 @@ describe("CameraSelectionUi#create()", () => {
4040
});
4141

4242
it("Single cameras, creates the camera selection", () => {
43-
parentElement!.innerHTML = "";
43+
parentElement!.textContent = "";
4444
let numCameras = 1;
4545
let cameras = createCameraList(numCameras);
4646
let cameraSelectUi = CameraSelectionUi.create(parentElement!, cameras);
@@ -58,7 +58,7 @@ describe("CameraSelectionUi#create()", () => {
5858
let cameras = createCameraList(numCameras);
5959
expect(() => {
6060
let _ = CameraSelectionUi.create(parentElement!, cameras);
61-
}).to.throw();
61+
}).to.throw();
6262
});
6363
});
6464

@@ -72,7 +72,7 @@ describe("CameraSelectionUi#enable() & disable()", () => {
7272

7373
after(() => {
7474
document.body.removeChild(parentElement!);
75-
parentElement!.innerHTML = "";
75+
parentElement!.textContent = "";
7676
parentElement = undefined;
7777
});
7878

@@ -113,7 +113,7 @@ describe("CameraSelectionUi setting and getting values", () => {
113113

114114
after(() => {
115115
document.body.removeChild(parentElement!);
116-
parentElement!.innerHTML = "";
116+
parentElement!.textContent = "";
117117
parentElement = undefined;
118118
});
119119

0 commit comments

Comments
 (0)