改行コードをbrタグにして反映したいがhtmlエスケープもしたい時

2018年9月19日2023年11月3日

たとえばdata.textの中身を出力したいとする。ここで、改行コードは タグにしたい。なのでhtml出力ということになるが、変なのを入れ込まれても困るので、htmlエスケープもしたい。 タグだけ許したい。そういう時のメモ。

html()で出力

タグを反映することになるので、jQueryのhtml()で出力すると便利。text()だと が文字列として解釈される。

改行コードを タグにする

改行コードを タグに変換する。たとえばdata.textの文字列内にある改行コードを タグに変換するのであれば

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)などとすればよいのだが、そうすると タグだけではなく、色々なhtmlタグも使われてしまうことになる。

XSS対策

data.textにどんな文字列が入っているのかわからない場合、それだとまずいので、HTMLエスケープもしたい。いわゆるXSS対策である。

最初はjQueryのtext()でいいんじゃないかと思ったが、「innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING」の記事によると、それだと"がエスケープされるとは限らず不完全であるらしい。なので、下記のように手動で置き換える。

sample_str = data.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/`/g, '&#x60;').replace(/\r?\n/g,'<br />');
$('div').html(sample_str);

という感じ。「jQuery(JavaScript)でHTMLエスケープするときの注意点と対処法 | iwb.jp」ではバッククォーテーションも対処したほうがよいとあったので、それも加えた。そのうえで、最後に改行コード→ タグ変換。

以上。