rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Updated client-side DOM manipulation functions to unescape char-codes before injecting them via innerText instead of raw-dogging it into innerHTML

Browse source
This commit is contained in:
rainbow napkin 2025-04-12 07:21:36 -04:00
parent e46513cc1a
commit 4ed4b572f2
10 changed files with 25 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

8
www/js/channel/chat.js
View file

@ -109,7 +109,7 @@ class chatBox{
//Create high-level label
var highLevel = document.createElement('p');
highLevel.classList.add("chat-panel-buffer","chat-entry-high-level","high-level");
highLevel.innerHTML = `${data.highLevel}`;
highLevel.textContent = utils.unescapeEntities(`${data.highLevel}`);
chatEntry.appendChild(highLevel);
//Create username label
@ -125,8 +125,8 @@ class chatBox{
//Create color span
var colorSpan = document.createElement('span');
colorSpan.classList.add("chat-entry-flair-span", flair);
colorSpan.innerHTML = `${data.user}`;
userLabel.innerHTML = `${colorSpan.outerHTML}: `;
colorSpan.textContent = utils.unescapeEntities(`${data.user}`);
userLabel.textContent = utils.unescapeEntities(`${colorSpan.outerHTML}: `);
chatEntry.appendChild(userLabel);
@ -277,7 +277,7 @@ class chatBox{
var flairOption = document.createElement('option');
//Set the name and innerHTML
flairOption.value = flair.name;
flairOption.innerHTML = flair.displayName;
flairOption.textContent = utils.unescapeEntities(flair.displayName);
//Append it to the select
this.flairSelect.appendChild(flairOption);

4
www/js/channel/chatPostprocessor.js
View file

@ -73,9 +73,7 @@ class chatPostprocessor{
//Create an empty array to hold the body
this.messageArray = [];
//First unescape char codes to keep from splitting on them
//This also means all text should be added to element via textContent and *NOT* innerHTML
//I'd rather not do this, but pre-processing everything while preserving codes is a fucking nightmare
//Escape any sanatized char codes as we use .textContent for double-safety, and to prevent splitting of char codes
//Split string by word-boundries on words and non-word boundries around whitespace, with negative lookaheads to exclude file seperators so we don't split link placeholders
//Also split by any invisble whitespace as a crutch to handle mushed links/emotes
//If we can one day figure out how to split non-repeating special chars instead of special chars with whitespace, that would be perf, unfortunately my brain hasn't rotted enough to understand regex like that just yet.

2
www/js/channel/panels/emotePanel.js
View file

@ -220,7 +220,7 @@ class emotePanel extends panelObj{
//Set title class
emoteTitle.classList.add('emote-list-title');
//Set emote title
emoteTitle.innerHTML = `[${emote.name}]`;
emoteTitle.textContent = utils.unescapeEntities(`[${emote.name}]`);
//if we're rendering personal emotes
if(personal){

1
www/js/channel/panels/queuePanel/queuePanel.js
View file

@ -833,6 +833,7 @@ class queuePanel extends panelObj{
timetip.moveToMouse(event);
//Inject timetip label
//Normally wouldn't do innerHTML but these values are calculated serverside and it saves us making a <br> element
timetip.tooltip.innerHTML = [
`Start Time: ${utils.ux.timeStringFromDate(start, true)}`,
`End Time: ${utils.ux.timeStringFromDate(new Date(start.getTime() + (target.dataset['duration'] * 1000)), true)}`

2
www/js/channel/userlist.js
View file

@ -100,7 +100,7 @@ class userList{
//Create high-level label
var highLevel = document.createElement('p');
highLevel.classList.add("user-list-high-level","high-level");
highLevel.innerHTML = `${user.highLevel}`;
highLevel.textContent = `${user.highLevel}`;
//Create nameplate
var userEntry = document.createElement('p');