Quando permito que os usuários insiram dados como argumento no JSinnerHTML funcionar assim:

element.innerHTML = “User provided variable”;

Eu entendi que, para evitar o XSS, eu tenho que codificar HTML e, em seguida, JS codificar a entrada do usuário porque o usuário pode inserir algo como isto:

<img src=a onerror='alert();'>

Somente a codificação HTML ou JS não ajudaria porque o.innerHTML O método como eu entendi decodifica a entrada antes de inseri-la na página. Com a codificação HTML + JS, notei que o.innerHTML decodifica apenas o JS, mas a codificação HTML permanece.

Mas consegui alcançar o mesmo codificando duas vezes em HTML.

Minha pergunta é: Alguém poderia fornecer um exemplo de por que eu deveria codificar HTML e depois JS, e não codificar duas vezes em HTML ao usar o.innerHTML método?