ERB、paramsを使用しています。
paramsで受け取ったものにgusbする、
content.gusb(/\r\n|\r|\n/, "<br>")
をどこに使うのか。
テキストエリア(content)に入力された改行結果を、上記のコードを使って表示するにはどうしたらいいんですか?
用意した入力フォーム
入力した結果は以下の画面に反映させたいと思っています。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加する改行が表示上でも改行させたいだけであれば、改行を<br>
に置き換えるのではなく、下記のようにCSSでwhite-spaceを設定し、改行が改行として表示させるようにすることをお勧めします。
<th style="white-space:pre-line"><%=contact%></th>
※ white-spaceを何にすべきかは場合によりけりです。上では改行だけ改行させるとして、他の空白は通常と同じ動作です。
※ 実際はstyle属性では無くclassを設定して別途指定することをお勧めします。内容によっては<pre>
で囲うなどをしても良いかもしれません。
【解説】
単純に思い浮かぶのは次のような方法です。
<%=contact.gsub(/\r\n|\r|\n/, "<br>")%>
やってみればわかりますが、これはうまくいきません。<br>
が<br>
と自動的にエスケープされてしまうため、改行では無く"<br>"とそのまま表示されてしまいます。このエスケープを抑止する方法としては単純に<%== %>
を使う方法があります。
<%==contact.gsub(/\r\n|\r|\n/, "<br>")%>
エスケープが抑止され、改行がされるようになりました。しかし、この方法は絶対にやってはいけません。このコードには XSS(クロスサイトスクリプティング)脆弱性があり、重大なセキュリティ上の問題を引き起こします。他にも<%=raw contact.gsub(/\r\n|\r|\n/, "<br>")%>
とか<%=contact.gsub(/\r\n|\r|\n/, "<br>").html_safe%>
といった方法もありますが、脆弱性の問題は何も解決していないため、これまた絶対にやってはいけません。
では、どうしたら良いのかというと、改行部分は<br>
にしてエスケープしたくないが、改行以外の部分はちゃんとエスケープしてXSSを回避するようにします。例えば、次のように書く方法です。
<th><%==contact.split(/\r\n|\r|\n/).map{|s|h(s)}.join('<br>')%></th>
このコードは、改行区切りで分割して、それぞれをh
でエスケープし、<br>
を挟みながら結合、必要なエスケープ処理は全て終わっているのでそのまま表示という意味です。または次の方法の方が見た目は良いかもしれません。
<th><%==h(contact).gsub(/\r\n|\r|\n/, "<br>")%></th>
こちらは最初に全てエスケープしてから、改行を置き換えるという方法です。ただ、いずれの場合もエスケープ処理に抜けが無いか注意深くコーディングする必要があります。少し複雑な置き換えパターンが出てくると、想定に漏れがあり、脆弱性を仕込んでしまうことも珍しくありません。
ということで、そんな小難しいことを考えて、脆弱性があるかも知れないと心配になるより、今回はCSSで改行が改行されるようにwhite-spaceを設定した方が楽だと思い、最初のコードに戻ると言うことです。