Vulnerable to Cross-site Scripting (XSS)

[stanleyowen]

Describe the bug
Unsanitized input from data from a remote resource flows into innerHTML, where it is used to dynamically construct the HTML page on client side. This may result in a DOM Based Cross-Site Scripting attack (DOMXSS).
client/src/components/account.component.js Line 73

    const BackupCodes = () => {
        const codes = [...valid, ...invalid]
        // function validateToken(token) {
        //     for (let a=0; valid.length; a++){
        //         if(token === valid[a]) return true
        //         else if(a === valid.length-1 && token !== valid[a].toLowerCase()) return false
        //     }
        // }
        let table = document.createElement('table')
        let row = document.createElement('tr')
        let column = document.createElement('td')
        table.classList.add('isCentered', 'full-width', 'no-border')
        for (let x=0; x<codes.length; x++) {
            if(x%2 === 0 && x !== 0) {table.innerHTML += row.outerHTML; column.innerHTML = codes[x]; row.innerHTML = column.outerHTML}
            else if(x === codes.length - 1) {column.innerHTML = codes[x]; row.innerHTML += column.outerHTML; table.innerHTML += row.outerHTML}
            else{column.innerHTML = codes[x]; row.innerHTML += column.outerHTML}
        } return table.outerHTML
    }

Expected behavior
This issue should be fixed as soon as possible to prevent Cross-site Scripting (XSS) Attack.

Desktop (please complete the following information):

• OS: Windows 10 OS Version 2009 (Build 19042.985)
• Browser Chrome
• Version 90.0.4430.212

[stanleyowen]

After reading some references, may these articles maybe we will use dompurify dependency which sanitize html into a cleaner code and prevents DOM Based Cross-Site Scripting attack (DOMXSS).