, Xss'in kodlamayı kullanmasını önler, ancak kullanıcı okunabilirliği çok zayıf

Question

Xss saldırısını korumak için, aşağıdaki işlevi kullanarak kullanıcıya görüntülemek istediğim her mesajı kodlamaya çalışıyorum.

function encodeRFC5987ValueChars(str) 
{ 
    return encodeURIComponent(str). 
     // Note that although RFC3986 reserves "!", RFC5987 does not, 
     // so we do not need to escape it 
     replace(/['()]/g, escape). // i.e., %27 %28 %29 
     replace(/\*/g, '%2A'). 
      // The following are not required for percent-encoding per RFC5987, 
      // so we can allow for a little better readability over the wire: |`^ 
      replace(/%(?:7C|60|5E)/g, unescape); 
} 

Örnek giriş mesajı bu işlev alınan çıktı mesaj aşağıda gibidir

Start 20 TV's test; star ;; '' -- testagain., comma. </> 

aşağıdaki gibidir.

Start%2020%20TV%27s%20test%3B%20star%20%3B%3B%20%27%27%20--%20testagain.%2C%20comma.%20%3C%2F%3E 

Aşağıdaki gibi görüntülemeye çalışıyorum.

document.getElementById("labelResult").innerHTML = "Start%2020%20TV%27s%20test%3B%20star%20%3B%3B%20%27%27%20--%20testagain.%2C%20comma.%20%3C%2F%3E"; 

Her şey iyi çalışıyor, ancak kullanıcı tarafından okunabilirlik çok zayıf.
Kod çözmem gerekiyor mu? Eğer kodu çözersem, o zaman xss saldırısına sebep olur mu?

Herhangi bir öneri lütfen.

Answer 1

URL'ye değil, HTML'ye veri ekliyorsunuz.

XSS karşı savunmak için HTML için doğru kodlaması gerekir. encodeURIComponent, bunun yakınında olmamalı.

var textNode = document.createTextNode("Start 20 TV's test; star ;; '' -- testagain., comma. </>"); 
document.getElementById("labelResult").innerHTML = ""; // Erase existing content 
document.getElementById("labelResult").appendChild(textNode); 

Orada kullanıcı girişi olarak Start 20 TV's test; star ;; '' -- testagain., comma. </> alıp JavaScript içine koymak için kullanmak istediği yöntemi XSS için bir vektör olabilir ... ama bunu nasıl bize göstermedim.