LaravelのXSS対策で注意すべきところ
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
XSS はセキュリティ的に注意しなければいけない最も基本的なところの1つだと思います。
世の中の記事は実は XSS 対策に関して、ちょっと甘い(とにかく動かすのにそうした)ような記事があったりするので、その点も踏まえて Laravel での XSS 対策と、注意点について書いていきたいと思います。
XSS とは ?
クロスサイトスクリプティングは、セキュリティ的な脆弱性をもちます。
われわれが実装したサービス内で、悪意をもった第三者が実装者の意図しない script をサービス内で動かし様々な悪用をすることが可能になるものです。
なので XSS 対策は必要になります。
検証環境
Laravel 6
Laravel の基本的な XSS 対策
我々が実装する時に最も注意すべき点は、
「ユーザーが任意にデータを保存できるシステム」を「表示するとき」となります。
スクリプトを保存することは誰でもできてしまうので、表示する時にそれが発動しないようにしなければなりません。
Laravel では、とても簡単に XSS 対策ができます。
{{$user->name}}
このように{{}}で囲うことによって XSS 対策することができます。
こんな実装をした人は注意
<?php を使っている
Laravel を使い始めてすぐの人はもしかしたら php の書き方で実装している人がいるかもしれません。
//ダメ
<?php
echo $user->name
必ずさきほどのやり方でやりましょう。
//正解
{{$user->name}}
改行とかの記事のとおり{!! !!}を使っている
これもやめましょう。
改行の記事でたびたび見かけるこの書き方ではありますが、XSS 対策がされていません。
CSS の white-space を使うなどして改行を実装するのがオススメです。
<p style="white-space: pre-wrap;">{{$post->content}}</p>
Javascript や jQuery で html を書き換えている
例えば、データベースから取得したテキストを使って処理を書いている時は注意が必要です
//javascript
document.querySelector("#title").innerHTML = "{{$post->title}}"
//jquery
$("#title").html("{{$post->title}}")
こういう記述の時は注意が必要です。
改善案 ① テキストを書き換える
//jquery
$("#title").text("{{$post->title}}")
改善案 ② データベースに保存された<>を書き換えてから、html を変更する
var title = "{{$post->title}}"
title = title.replaceAll("<", "<").replaceAll(">", ">")
$("#title").html("{{$post->title}}")
まとめ
いかがだったでしょうか?
最近サービスでセキュリティ診断を受けて、XSS 対策に関してはかなり注意が必要であることをその道のプロの方から学びました。
今回は Laravel で注意すべき点ということで簡単ではありますが、やりがちなところをピックアップしてみました。
基本的に{{}}でシンプルに表示している分には問題ないはずです。
何かご質問、変なところありましたら Twitter の DM でご連絡いただければと思います。
それでは。
人気記事