LaravelのXSS対策で注意すべきところ

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本

Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう！！

読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

XSS はセキュリティ的に注意しなければいけない最も基本的なところの１つだと思います。

世の中の記事は実は XSS 対策に関して、ちょっと甘い（とにかく動かすのにそうした）ような記事があったりするので、その点も踏まえて Laravel での XSS 対策と、注意点について書いていきたいと思います。

XSS とは？

クロスサイトスクリプティングは、セキュリティ的な脆弱性をもちます。

われわれが実装したサービス内で、悪意をもった第三者が実装者の意図しない script をサービス内で動かし様々な悪用をすることが可能になるものです。

なので XSS 対策は必要になります。

Laravel 6

我々が実装する時に最も注意すべき点は、

「ユーザーが任意にデータを保存できるシステム」を「表示するとき」となります。

スクリプトを保存することは誰でもできてしまうので、表示する時にそれが発動しないようにしなければなりません。

{{$user->name}}

このように{{}}で囲うことによって XSS 対策することができます。

Laravel を使い始めてすぐの人はもしかしたら php の書き方で実装している人がいるかもしれません。

//ダメ
<?php
echo $user->name

必ずさきほどのやり方でやりましょう。

//正解
{{$user->name}}

これもやめましょう。

改行の記事でたびたび見かけるこの書き方ではありますが、XSS 対策がされていません。

CSS の white-space を使うなどして改行を実装するのがオススメです。

<p style="white-space: pre-wrap;">{{$post->content}}</p>

例えば、データベースから取得したテキストを使って処理を書いている時は注意が必要です

//javascript
document.querySelector("#title").innerHTML = "{{$post->title}}";

//jquery
$("#title").html("{{$post->title}}");

こういう記述の時は注意が必要です。

//jquery
$("#title").text("{{$post->title}}");

var title = "{{$post->title}}";
title = title.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
$("#title").html("{{$post->title}}");

いかがだったでしょうか？

最近サービスでセキュリティ診断を受けて、XSS 対策に関してはかなり注意が必要であることをその道のプロの方から学びました。

今回は Laravel で注意すべき点ということで簡単ではありますが、やりがちなところをピックアップしてみました。

基本的に{{}}でシンプルに表示している分には問題ないはずです。

何かご質問、変なところありましたら Twitter の DM でご連絡いただければと思います。

それでは。