simple_formatの使い方

simple_formatの使い方

simple_formatの使い方について調べたので、こちらにまとめます。

ブラウザで下記のように登録する
Image from Gyazo

DBには、下記のように保存されている。

memo: "アジフライ美味しい\r\nアジフライ美味しい\r\n<h1>アジフライ美味しい</h1>\r\n<h2>アジフライ美味しい</h2>\r\n\r\nアジフライ美味しい\r\n<script>alert(‘XSSできます’)</script>"

以下にビューファイルで記述したパターンと、それでブラウザに表示されるパターンとエスケープ処理された記述(ページのソースの表示)とHTMLの表示を書きます。

[simple_format]を使った場合

[ビューファイル]

= simple_format(cooking_memory.memo)

ブラウザで以下のように表示される(登録時のHTMLタグがHTMLのタグとして機能している)
Image from Gyazo

下記のように読み込まれている(ページのソースの表示)

<p>アジフライ美味しい
<br />アジフライ美味しい
<br /><h1>アジフライ美味しい</h1>
<br /><h2>アジフライ美味しい</h2></p>

<p>アジフライ美味しい
<br />alert(‘XSSできます’)</p>

ブラウザでは、下記のようなHTMLになっている

<p>
  “アジフライ美味しい”
  <br>
  “アジフライ美味しい”
  <br>
</p>
<h1>アジフライ美味しい</h1>
<br>
<h2>アジフライ美味しい</h2>
<p></p>
<p>
  “アジフライ美味しい”
  <br>
  “alert(‘XSSできます’)”
</p>

XSSなどの恐れのある<script>タグを除去して、登録時に改行などした部分がDB上では\r\nなどのようになっているからこれを<p>タグや<br>タグなどにして、実際に登録した時と同じような改行をしてブラウザに表示してくれる。

そのまま記述した場合

[ビューファイル]

= cooking_memory.memo

ブラウザでは、以下のように表示される
Image from Gyazo

下記のように読み込まれている(ページのソースの表示)

アジフライ美味しい
アジフライ美味しい
&lt;h1&gt;アジフライ美味しい&lt;/h1&gt;
&lt;h2&gt;アジフライ美味しい&lt;/h2&gt;

アジフライ美味しい
&lt;script&gt;alert(‘XSSできます’)&lt;/script&gt;

上記のように<h1>タグや<h2>タグ、<script>タグがエスケープされて違う文字に置き換えられているのが分かる。

ブラウザでは、下記のようなHTMLになっている

"アジフライ美味しい
アジフライ美味しい
<h1>アジフライ美味しい</h1>
<h2>アジフライ美味しい</h2>

アジフライ美味しい
<script>alert(`XSSできます`)</script>"

XSSなどの恐れのある<script>タグやHTMLタグをエスケープ処理して、それらのタグがブラウザ上には文字として認識されてそのタグが文字として表示されている。
登録時に改行などした部分がDB上では\r\nなどのようになっているがブラウザ上には、改行されずそのまま表示される。
Railsでは、<%= =>を使って出力する場合は、自動的にエスケープ処理してくれる。

[html_safe]を使った場合

[ビューファイル]

= cooking_memory.memo.html_safe

ブラウザでは、以下のように表示される
Image from Gyazo

下記のように読み込まれている(ページのソースの表示)

アジフライ美味しい
アジフライ美味しい
<h1>アジフライ美味しい</h1>
<h2>アジフライ美味しい</h2>

アジフライ美味しい
<script>alert(`XSSできます`)</script>

上記のように<h1>タグや<h2>タグ、<script>タグがエスケープされずにそのままタグとして読み込まれている

ブラウザでは、下記のようなHTMLになっている

"アジフライ美味しい アジフライ美味しい"
<h1>アジフライ美味しい</h1>
<h2>アジフライ美味しい</h2>
"アジフライ美味しい"
<script>alert(`XSSできます`)</script>

<script>タグやHTMLタグをエスケープ処理せずにそのままタグとして読み込んでいる。 改行した際にDBには、\r\nとなるがこれは改行などをしてくれるタグには変換してくれないので、ブラウザ上には改行されないまま表示される。

[h]メソッドを使った場合

[ビューファイル]

= h(cooking_memory.memo)

ブラウザでは、以下のように表示される
Image from Gyazo

下記のように読み込まれている(ページのソースの表示)

アジフライ美味しい
アジフライ美味しい
&lt;h1&gt;アジフライ美味しい&lt;/h1&gt;
&lt;h2&gt;アジフライ美味しい&lt;/h2&gt;

アジフライ美味しい
&lt;script&gt;alert(`XSSできます`)&lt;/script&gt;

上記のように<h1>タグや<h2>タグ、<script>タグがエスケープされている

ブラウザでは、下記のようなHTMLになっている

"アジフライ美味しい
アジフライ美味しい
<h1>アジフライ美味しい</h1>
<h2>アジフライ美味しい</h2>

アジフライ美味しい
<script>alert(`XSSできます`)</script>"

<script>タグやHTMLタグをエスケープ処理している。
改行した際にDBには、\r\nとなるがこれは改行などをしてくれるタグには変換してくれないので、ブラウザ上には改行されないまま表示される。
[h]メソッドの代わりに以下のように記述しても同じ効果になる。

= html_escape(cooking_memory.memo)

※ポイント

以下のように記述すれば、サニタイズもしてくれて改行で登録した文章を表示させる際も改行してくれる。

[ビューファイル]

= simple_format(h(cooking_memory.memo))

ブラウザでは、以下のように表示される
Image from Gyazo

下記のように読み込まれている(ページのソースの表示)

<p>アジフライ美味しい
<br />アジフライ美味しい
<br />&lt;h1&gt;アジフライ美味しい&lt;/h1&gt;
<br />&lt;h2&gt;アジフライ美味しい&lt;/h2&gt;</p>

<p>アジフライ美味しい
<br />&lt;script&gt;alert(`XSSできます`)&lt;/script&gt;</p>

上記のように<h1>タグや<h2>タグ、<script>タグがエスケープされている
改行部分などに<p>タグや<br>タグなどが入っている。

ブラウザでは、下記のようなHTMLになっている

<p>
  “アジフライ美味しい”
  <br>
  “アジフライ美味しい”
  <br>
  “<h1>アジフライ美味しい</h1>;
  <br>
  “<h2>アジフライ美味しい</h2>”
</p>
<p>
  “アジフライ美味しい”
  <br>
  “<script>alert(`XSSできます`)</script>
</p>

<script>タグやHTMLタグをエスケープ処理している。
改行した際にDBには、\r\nとなるがこれを<p>タグや<br>タグなどにしてくれている。

参考記事

HTML特殊文字のエスケープ - Ruby on Rails入門

Ruby On Rails ピチカート街道 - h( ... ) でHTMLエンコード -

[Rails5]simple_format, h, html_safeを色々試してみた | ゆるりテックブログ