[Rails6.0]Action Textで作成した内容をslimで表示する

4005 ワード
Rails6 エスケープ Rails slim Rails テキストリンク

Action Textとは

Rails6からAction Textが追加され、とても手軽にリッチテキストエディタを実装できるようになりました。
導入に関しては多くの方が記事にされているのでここでは割愛させて頂きます。

このAction Textは、has_rich_textメソッドで指定したカラムにActionText::RichTextオブジェクトを保存します。
例えば以下のようなモデルがあったとき、

app/model/article.rb
class Article < ApplicationRecord
  has_rich_text :content
end

保存された内容は

<%= @article.content %>

というような形でHTMLとして取り出せます。

slimだとうまく表示されない？

これ、ERBなら綺麗に出力してくれるのですが、slimで

= @article.content

と書くとHTMLがそのまま文字として出力されてしまいます。

こんなHTMLむき出しのままではとてもじゃないけど使えない！
ERBならHTMLをタグとして扱ってくれるので、ERBで書き直すしかないのかと思っていたのですが…

=ではなく==を使う

githubのissueによると、slimの=はHTMLの内容をエスケープして表示してくれるようです。

なのでこの場合は=ではなく==を使うことでHTMLの内容をエスケープせずに表示することができます。

== @article.content

期待通りの結果になりました！

エスケープしなくて大丈夫なの？

HTMLをエスケープしてしまったら、XSSの脆弱性は大丈夫なの？と思ったので

<script>
  alert('XSS');
</script>

をフォームの入力に含めて保存してみました。
alertが表示されると思ったのですが…

scriptタグはちゃんとエスケープしてくれます。なんで？
slimのREADMEを読んでみましたがイマイチ理由が分からず。どなたかコメントでご教授いただけると幸いです。

まとめ

兎にも角にもAction Textとslimを両立させることができて一安心です。

何か直すべき点、間違った記述があればコメント等で指摘していただければと思います。

参考文献

https://railsguides.jp/action_text_overview.html
https://tech.mof-mof.co.jp/blog/rails6-actiontext.html