非同期いいね実装 HTMLの切り替えとJSONの受け渡しについて

Question

非同期のいいね機能を jQuery を使って実装しました。
サーバーサイドは PHP(Laravel) です。

Twitterの「いいね」のように、非同期で処理してボタンが変わる仕組みを実装しました。

発生した問題

• 時々エラーが出て動かなくなる
• HTMLのクラス名を innerHTML で動的生成している部分など、キュリティ的に問題があるかもしれない

コメントに対して「いいね」できる仕組みです。
ボタンの変化は、Font Awesome のアイコン切り替えで表現します。
つまりHTMLの要素(クラス名)を動的に変化させます。

<i class="far fa-heart"></i>　<!-- 未いいねの際表示 -->
<i class="fas fa-heart"></i>　<!-- いいね済みの際表示 -->

切り替えるのは far と fas の部分だけです。

また「いいね」された数も表示します。

PHP側からビューに渡すものは以下になります。

<画面表示時>

• ユーザーが既に「いいね」しているかを保持した配列　

<ボタンが押された時(JSONで渡す)>

• Font Awesome のクラス名(ボタンを変化させるため)
• 更新された「いいね」の数

ほぼ期待通りの動作をしますが、時々以下のエラーで動かなくなります。
Chromeではぼエラーはでませんが、Edgeだと10回に1回ほど出ます。

Uncaught SyntaxError: Unexpected end of JSON input　// Chrome 
JSON.parse Error: Unexpected input　// Edge

JSON.parse() に JSON以外の値を渡していることが原因だと思います。
エラー時に、Ajaxでサーバーから返された値を console.log してみると、
空文字でした。しかしPHPからはjson_encodeした値しか返していないので、なぜ空文字になるのかわかりません。

以下実装したコードです。

コメント一覧をforeachで回し、その中にボタンを設置します。
POST時、コメントIDを判別するのにカスタムデータ属性を利用します。

// @foreach($comments as $comment) の中

@if(is_null($already[$comment->id]))  //まだいいねしてなければ
  <button type="button" class="fav" data-fav="{{$comment->id}}">
      <i class="far fa-heart"></i> 
      {{$comment->cnt}} //いいね数
  </button>
@else  //既にいいねしていれば
  <button type="button" class="fav" data-fav="{{$comment->id}}">
      <i class="fas fa-heart"></i>  
      {{$comment->cnt}}  //いいね数
  </button>
@endif

//「いいね」したコメントのIDを保持
let comment_id = 0;

//0以上の自然数かチェックする関数
const isNum = function(v) 
{
 return ((typeof v === 'number') && (isFinite(v))　&& v >= 0);
};

//「いいね」ボタンがクリックされた時
$('.fav').on('click', function(event) {
    event.target.disabled = true; //処理が終了するまでボタンを無効化
    event.preventDefault();
    comment_id = event.target.dataset.fav;

    $.ajax({
      type: 'POST',
      url: '',
      dataType: 'text',
      data: {
        comment_id: comment_id,
      }
    }).done(function (data) { 
       //console.log(data);　{"name":"far","cnt":13} エラー時は空文字
      let d = JSON.parse(data);
      if((d.name==='fas' || d.name==='far') && isNum(d.cnt))
      {
         event.target.innerHTML =  
          `<i class=\"${d.name} fa-heart\"></i> ${d.cnt}`;
      }
      event.target.disabled = false;  //ボタンを有効化
    });
});

「いいね」がPOSTされた際のアクション

$comment_id = $request->input('comment_id');
/*
    comment_id が自分自身のコメントでないことを確認
    データベース更新処理
    $name : 新たな Font Awesomeのクラス名(far, fas)
    $cnt : 「いいね」総数
*/
if(($name==='far' || $name==='fas') && is_int($cnt) && $cnt >= 0)
{
   return json_encode(["name" => $name, "cnt" => $cnt]);
}
//正常でない場合でもJSON形式で返す
return json_encode(['name' => 'error', 'cnt' => -1]);

CSRF対策

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

とりあえず動くように実装したので、雑なやり方だと思います。

質問をまとめると

• 時々空文字を返してエラーになるのを防ぐにはどうすべきか。

• セキュリティ的に問題はないか。

(クラス名の動的生成、カスタムデータによるid判別、AjaxでPOSTする値の偽装対策等)

その他「そのやり方はよくない」等あればご指摘ください。

ご回答よろしくお願いします。

Answer 1

時々空文字を返してエラーになるのを防ぐにはどうすべきか。

• 空文字になる原因を特定する
• エラーをただ防ぐ

if ( !data ) return;
let d = JSON.parse(data);

Comments

[osheton]

ありがとうございました。