はじめに

追記　2022/08/27
私の記事に間違っている部分がありました…
JSON.parse自体にXSSの脆弱性があるわけではありません。JSON.parseの'...'内に展開するという使い方が間違っているという話でした。
今回でいいますと

// JSON.parseの()内でシングルクォーテーションを使用しているためでした。
// じゃあダブルクォーテーションを使えば良いかというと、そういうわけでもないです。
// ダブルクォーテーションだとエラーになります。
JSON.parse('<?php echo json_encode($array) ?>');

// また、下記の記述でもJSコードが認識されます。
const array = ['<?php echo json_encode($array) ?>'];

そのため、上記を念頭に記事を読んで頂けますと幸いです。
※コメント欄で@tadsanさんに教えて頂きました。@tadsanさんありがとうございます！
　また、もう一つの回避策も教えて頂きましたので、ぜひコメント欄を見て頂けますと幸いです。

PHPからJSへ配列を渡しJSON.parseにかけると脆弱性がある、この話はそこそこ前からある気がします。
ただ、最近もGoogleで検索するとJSON.parseを使用した記事を目にすることがあります。
そこで、PHPからJSへ配列を渡した時にJSON.parseを使用しなくても配列を渡せる方法を書いていきます。

JSON.parseで解析するとXSSの脆弱性がある

XSSの脆弱性があるため配列内のJSコードが認識されます。
コードは下記のようなコードです。

<?php
  $array = array("',alert('xss'),'");
?>

<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
  <script>
    // JSON.parseに読み込まれる値は、'["'、alert('xss')、'"]'、の三つの値になる
    const array = JSON.parse('<?php echo json_encode($array) ?>');
    console.log(array);
  </script>
</body>
</html>

結果、alert ダイアログが表示されます。

JSON.parseを使用しない方法

じゃあどうやってJSコードではなく文字列として読み込ませるかというとJSON.parseを外すだけでいけます。
※ちなみに、配列内の要素が文字化けする人はjson_encodeの第二引数で調整できます。詳しくはこちら

<?php
  $array = array("',alert('XSS'),'");
?>

<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
  <script>
    const array = <?php echo json_encode($array) ?>;
    console.log(array);
  </script>
</body>
</html>

結果、きちんとconsoleに表示されました！

番外編：Laravelでの書き方

Laravelでは下記のように書くことができます。

<script>
  const array1 = <?php echo json_encode($array) ?>;
  console.log(array1);

  const array2 = {!! json_encode($array) !!};
  console.log(array2);

  const array3 = @json($array);
  console.log(array3);
</script>

結果、三つともconsoleに表示されました。

【XSS】PHPからJSへ配列を渡しJSON.parseで解析すると脆弱性があるよという話

はじめに

JSON.parseで解析するとXSSの脆弱性がある

JSON.parseを使用しない方法

番外編：Laravelでの書き方