たとえばdata.textの中身を出力したいとする。ここで、改行コードは<br />タグにしたい。なのでhtml出力ということになるが、変なのを入れ込まれても困るので、htmlエスケープもしたい。<br />タグだけ許したい。そういう時のメモ。
html()で出力
<br />タグを反映することになるので、jQueryのhtml()で出力すると便利。text()だと<br />が文字列として解釈される。
改行コードを<br />タグにする
改行コードを<br />タグに変換する。たとえばdata.textの文字列内にある改行コードを<br />タグに変換するのであれば
sample_str = data.text.replace(/\r?\n/g, '<br />')
で良い。一応、意味も書いておく。
- / /で囲んでいる、正規表現
- / /gなので、該当する箇所すべてに対して変換(なければ最初の一箇所のみ)
- 改行コードは、Windowsが\r\n、LinuxやMacが\nなので、\rが0文字or1文字だから、\r?\n
で、これをhtml出力するのであれば、たとえばjqeuryで$('div').html(sample_str)などとすればよいのだが、そうすると<br />タグだけではなく、色々なhtmlタグも使われてしまうことになる。
XSS対策
data.textにどんな文字列が入っているのかわからない場合、それだとまずいので、HTMLエスケープもしたい。いわゆるXSS対策である。
最初はjQueryのtext()でいいんじゃないかと思ったが、「innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING」の記事によると、それだと"がエスケープされるとは限らず不完全であるらしい。なので、下記のように手動で置き換える。
sample_str = data.text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/`/g, '`').replace(/\r?\n/g,'<br />');
$('div').html(sample_str);
という感じ。「jQuery(JavaScript)でHTMLエスケープするときの注意点と対処法 | iwb.jp」ではバッククォーテーションも対処したほうがよいとあったので、それも加えた。そのうえで、最後に改行コード→<br />タグ変換。
以上。
参考
ありがとうございました。
コメント