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

[最終更新] 2021年7月25日

たとえば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, '&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」ではバッククォーテーションも対処したほうがよいとあったので、それも加えた。そのうえで、最後に改行コード→<br />タグ変換。

以上。

参考

ありがとうございました。

• JavaScript とHTML5のセキュリティ対策 – ラボラジアン
• innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ – TODESKING
• jQuery(JavaScript)でHTMLエスケープするときの注意点と対処法 | iwb.jp
• クロスサイトスクリプティング対策 ホンキのキホン – 葉っぱ日記

関連記事

スポンサーリンク