0

ERB、paramsを使用しています。
paramsで受け取ったものにgusbする、

content.gusb(/\r\n|\r|\n/, "<br>")

をどこに使うのか。
テキストエリア(content)に入力された改行結果を、上記のコードを使って表示するにはどうしたらいいんですか?

このコードのどこにメソッドを入れるのかわからない

用意した入力フォーム

こういった入力フォーム

入力した結果は以下の画面に反映させたいと思っています。

入力した結果をここに反映させたい

1 件の回答 1

1

改行が表示上でも改行させたいだけであれば、改行を<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>&lt;br&gt;と自動的にエスケープされてしまうため、改行では無く"<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を設定した方が楽だと思い、最初のコードに戻ると言うことです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。