Observação: Não estou usando o jQuery, apenas senti vontade de usar o cifrão/dólar para document.querySelector(), então coloquei-o dentro do dólar.

Olá João, tudo bem?

Realmente essa parte de segurança é essencial estarmos sempre aprendendo, principalmente pela web ser tão livre, e ataques XSS muitas vezes acabam sendo esquecidos, principalmente com a facilidade que é montar toda uma template string com nosso código

Um ponto que achei interessante foi se espera que qualquer Junior já saiba disso tudo

Ao mesmo tempo que é fundamental saber disso, por outro lado você mesmo trouxe exemplo de empresas gigantes que sofreram com essa vulnerabilidade, então até mesmo pessoas mais experientes as vezes não conhecem

E esse ano mesmo eu vi exemplos recentes, como esse daqui:

• Minecraft no site do STF

E o mesmo atacante fez no Bank of America no ano passado dessa vez com o jogo Doom =)

Agora uma outra alternativa, que é bem utilizada até, é permitir a template string mas fazer a sanitização do input do usuário, um exemplo bem simples seria algo assim:

    let valor = input.value

    const pattern = /<.+?>/g;

    const result = input.value.match(pattern);

    result.forEach( match => {
        valor = valor.replace(match, "")
    })

Obviamente da para melhorar bastante, mas eu fiz uma regex que encontra todas as tags presente no input do usuário, e armazena dentro de `result, então o input

<image src="aaaa">Texto Aleatorio </image>

resulta em:

[
  "<image src=\"aaaa\">",
  "</image>"
]

E na linha posterior eu faço que para cada match, eu troque o valor da tag por uma string vazia

Essa também foi uma maneira didática, poderíamos encurtar pela função replaceAll e trocar todo esse código por:

    const pattern = /<.+?>/g;
    const valor = input.value.replaceAll(pattern, "")

Desta maneira temos certeza que o valor que será utilizado dentro da template string está "limpo" e pode ser inserido no html normalmente :)

Se quiser aprender um pouco mais de Regex, eu particularmente acho esse curso fantástico

Abraços e Bons Estudos!

Opa Geovani beleza!

Realmente, obrigado por me lembrar que mesmo sendo algo fundamental é de valor ter esse conhecimento.

Wowww, sobre esse exemplo de XXS com o TSF e Minecraft, achei insano demais, eu até cheguei a ler alguma coisa sobre, mas não fazia ideia que havia sido um XXS e além do exemplo nacional você agregou bastante pra mim com o outro caso do Doom no Bank of America. Obrigado pelas ótimas referências!

Sobre a aplicação da solução com Regex, isso com certeza ampliou demais a minha visão da aplicação de expressões regulares e repertório, eu já havia feito o curso ministrado pelo Nico Steppat (sem dúvidas é um dos melhores cursos da plataforma), mas nem havia passado pela minha cabeça em usar Regex.

O principal motivo de eu ter gostado da sua solução é que em componentes/templates mais complexos (em tamanho) geraria tantos .createElement e .appendChild que tornaria mais trabalhosa a leitura do código, portanto vejo essa solução como escalável de templates simples à complexos, obrigado pelo insight!

Embora eu tenha feito o curso de Regex, eu não conhecia o .replaceAll(), fiquei surpreso ao tentar implementar a solução que o utiliza e o navegador me retornar “replaceAll is not a function”, li o meu código e não identifiquei erros, então fui ler a documentação e vi que o suporte a esse método começou em Agosto pelo Firefox e no Chrome a a partir da versão 85, já no Opera GX (navegador que eu utilizo) na versão 71 e eu estava com a 68; isso me lembrou de atualizar o navegador kkkk e ainda aprendi um método novinho em folha, obrigado por isso também!!!

Definitivamente até hoje essa foi a resposta mais produtiva que já obtive num fórum, obrigado pela ajuda e muito sucesso à ti!