XSS-Prävention und .innerHTML

Wenn ich Benutzern erlaube, Daten als Argument in das JS einzufügeninnerHTML Funktion wie folgt:

element.innerHTML = “User provided variable”;

Ich habe verstanden, dass ich, um XSS zu verhindern, die HTML-Codierung und anschließend die JS-Codierung für die Benutzereingabe vornehmen muss, da der Benutzer Folgendes einfügen könnte:

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

Nur HTML oder nur JS-Codierung würde nicht helfen, weil die.innerHTML -Methode, wie ich verstanden habe, decodiert die Eingabe, bevor sie in die Seite eingefügt wird. Bei der HTML + JS-Codierung ist mir aufgefallen, dass das.innerHTML decodiert nur das JS, die HTML-Codierung bleibt jedoch erhalten.

Aber ich konnte dasselbe durch doppelte Codierung in HTML erreichen.

Meine Frage lautet: Könnte jemand ein Beispiel dafür liefern, warum ich HTML und dann JS codieren und nicht doppelt in HTML codieren soll, wenn ich das @ verwend.innerHTML Methode