Xssのエンコードを防止しますが、ユーザーの読みやすさはあまり良くありません

Question

xss攻撃を保護するために、私は以下の機能を使用してユーザーに表示したいすべてのメッセージをエンコードしようとします。

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

下に、私はこの機能から受信した出力メッセージが以下のようなものであるよう

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); 
} 

例入力メッセージです。

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

以下のように表示しようとします。

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"; 

すべて正常に動作しますが、ユーザーの可読性は非常に低いです。
デコードする必要はありますか？私がデコードしたら、それはxss攻撃につながるのではないかと心配していますか？

ご提案ください。

Answer 1

URLにではなく、HTMLにデータを挿入しています。

XSSを防御するには、のHTMLを適切にエンコードする必要があります。 encodeURIComponentはこれの近くにはいけません。

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

ありは、ユーザー入力としてStart 20 TV's test; star ;; '' -- testagain., comma. </>を取るとJavaScriptにそれを置くために使用どんな方法でXSSのためのベクターであるかもしれない...しかし、あなたはそれを行う方法を私たちに示していません。