60280


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

[code]

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

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

[![このコードのどこにメソッドを入れるのかわからない](https://i.stack.imgur.com/qZcnk.png)](https://i.stack.imgur.com/qZcnk.png)

用意した入力フォーム

[![こういった入力フォーム](https://i.stack.imgur.com/TavlA.png)](https://i.stack.imgur.com/TavlA.png)

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

[![入力した結果をここに反映させたい](https://i.stack.imgur.com/ejdHB.png)](https://i.stack.imgur.com/ejdHB.png)


CC BY-SA 4.0
2019-11-03T08:48:15.930
60216
2019-12-20T01:27:20.583
2019-12-20T01:27:20.583
3060
36466
question
ruby
テキストエリアに入力された改行を結果画面で表示を方法。このメソッドを使いcontent.gsub(/\r\n|\r|\n/, "<br>")


改行が表示上でも改行させたいだけであれば、改行を`<br>`に置き換えるのではなく、下記のようにCSSでwhite-
spaceを設定し、改行が改行として表示させるようにすることをお勧めします。

[code]

    <th style="white-space:pre-line"><%=contact%></th>
    
[/code]

※ white-spaceを何にすべきかは場合によりけりです。上では改行だけ改行させるとして、他の空白は通常と同じ動作です。  
※ 実際はstyle属性では無くclassを設定して別途指定することをお勧めします。内容によっては`<pre>`で囲うなどをしても良いかもしれません。

* * *

【解説】

単純に思い浮かぶのは次のような方法です。

[code]

    <%=contact.gsub(/\r\n|\r|\n/, "<br>")%>
    
[/code]

やってみればわかりますが、これはうまくいきません。`<br>`が`&lt;br&gt;`と自動的にエスケープされてしまうため、改行では無く"<br>"とそのまま表示されてしまいます。このエスケープを抑止する方法としては単純に`<%==
%>`を使う方法があります。

[code]

    <%==contact.gsub(/\r\n|\r|\n/, "<br>")%>
    
[/code]

エスケープが抑止され、改行がされるようになりました。しかし、この方法は **絶対にやってはいけません** 。このコードには
**XSS(クロスサイトスクリプティング)脆弱性** があり、重大なセキュリティ上の問題を引き起こします。他にも`<%=raw
contact.gsub(/\r\n|\r|\n/, "<br>")%>`とか`<%=contact.gsub(/\r\n|\r|\n/,
"<br>").html_safe%>`といった方法もありますが、脆弱性の問題は何も解決していないため、これまた **絶対にやってはいけません** 。

では、どうしたら良いのかというと、改行部分は`<br>`にしてエスケープしたくないが、改行以外の部分はちゃんとエスケープしてXSSを回避するようにします。例えば、次のように書く方法です。

[code]

    <th><%==contact.split(/\r\n|\r|\n/).map{|s|h(s)}.join('<br>')%></th>
    
[/code]

このコードは、改行区切りで分割して、それぞれを`h`でエスケープし、`<br>`を挟みながら結合、必要なエスケープ処理は全て終わっているのでそのまま表示という意味です。または次の方法の方が見た目は良いかもしれません。

[code]

    <th><%==h(contact).gsub(/\r\n|\r|\n/, "<br>")%></th>
    
[/code]

こちらは最初に全てエスケープしてから、改行を置き換えるという方法です。ただ、いずれの場合もエスケープ処理に抜けが無いか注意深くコーディングする必要があります。少し複雑な置き換えパターンが出てくると、想定に漏れがあり、脆弱性を仕込んでしまうことも珍しくありません。

ということで、そんな小難しいことを考えて、脆弱性があるかも知れないと心配になるより、今回はCSSで改行が改行されるようにwhite-
spaceを設定した方が楽だと思い、最初のコードに戻ると言うことです。


CC BY-SA 4.0
2019-11-05T14:12:09.853
60280
2019-11-05T14:12:09.853
7347
60216
answer