LaravelのXSS対策で意識することをまとめます。

要点

１、htmlのタグ内ではダブルクオテーションで囲う
<input value="{{ $text }}">

２、フロントに文字列を渡す時は、htmlspecialcharsでサニタイズする

htmlのタグ内ではダブルクオテーションで囲う

ダブルクオテーションで囲わないと予期せぬ属性が追加されてしまう。

実行例

TestController.php

class TestController extends Controller
{
    public function index()
    {
        $text = "test onclick=alert(1);";  
        return view('tests.test', compact('text'));
    }
}

test.blade.php

<input type="text" value="{{$text}}">  {{-- 正しい --}}
<br>
<br>
<input type="text" value={{$text}}> {{-- 誤り --}}

結果

クオテーションで囲まない方はonclick属性が追加できてしまった。

フロントの言語に変数を渡す時は、htmlspecialchars関数でサニタイズする

実行例

ボタンを押下したらlogが出力される機能を作成

{{-- ボタン(onclick属性) --}}
<button onclick="test({{$text}})">ボタン</button>

{{-- js --}}
<script>
 function test(text){
   console.log(text);
 }
</script>

渡すテキスト
$text = "test' onclick=alert(1);";
・シングルクオートあり
・()あり

出力されたログ

エラー
Uncaught SyntaxError: missing ) after argument list (at

修正例

{{-- シングルクオテーションで囲むことで()が文字列として扱われる --}}
{{-- さらにhtmlspecialchars関数でシングルクオテーションをサニタイズする --}}
<button onclick="test('{{htmlspecialchars($text,3)}}')">ボタン</button>

出力結果

test' onclick=alert(1);

サニタイズする前の文字列を表示したい場合はjs側で処理する必要あり。
今回は範囲外とします。

追加

別パターン:json形式で渡す

blade.html

<button onclick="test2( {{ json_encode(['text' => $text], JSON_HEX_TAG | JSON_HEX_AMP) }} )">ボタン</button>

script.js

 function test2(text){
  console.log(text.text);
 }

出力結果

test' onclick=alert(1);
渡したテキストがそのまま取れました。これが一番良さそうです。
上司が教えてくれました。感謝。

他にもっと有効な方法があれば是非教えてください。