XSS対策におけるHTMLエスケープ

Question

HTMLに対してどこまでをエスケープ処理の対象にすればよいでしょうか。

例えば下記のようなHTMLに対してはどうでしょうか。
トークンの値は当然として、optionタグのvalue属性値や要素内容もエスケープするべきでしょうか？

<div id="sendmail">
      <form id="form" action="" method="post">
        <input id="saddress" type="text" name="address" placeholder="あなたのメールアドレス" maxlength="256"><br>
        <select id="option" name="option">
          <option value="bug">バグ報告</option>
          <option value="opinion_reqest">ご意見・ご要望</option>
          <option value="other">その他</option>
        </select><br>
        <textarea id="text" name="sendmail_text" rows="8" cols="40" placeholder="送信内容" maxlength="500"></textarea><br>
        <input id="token" type="hidden" name="sendmail_token" value="">
        <input id="post" type="submit" name="sendmail_post" value="内容確認">
      </form>
    </div>

Answer 1

これだけでは、なんとも言えません（極端な話、このような内容を静的なHTMLとして作成するのであれば、どこにもエスケープは必要ありません）。

基本的に、動的に変わる値については（それ自体をHTMLとして出力したいという特殊事情がなければ）何かしらのエスケープが必要です。ただ、文字列を直接エスケープする方法だけでなく、JavaScriptなどDOMに含まれる.textContentのように、「テキストとして処理させるメソッド」を使う方法によっても可能です。

Answer 2

HTMLエンコードすべきところの判断として
ユーザー入力・cookie・DBなどから動的に出力している箇所に
実際に

<script>window.alert('XSS Alert');</script>

'><script>window.alert('XSS Alert');</script>
”><script>window.alert('XSS Alert');</script>
などを入れたHTMLを作成して試すのが一番です