やりたいこと概要

ボタン押下
↓
JSでフォームの値を取得
↓
jQueryのAjaxでPOST
↓
CakePHP3でごにょごにょ
↓
JSONを返す

環境など

CakePHP3.6
PHP7.2

やりたいこと

CakePHP3.6で構築しているWebサービスの表面から、
Ajaxを使ってCakePHPにデータを送りたいと考えています。
しかし、400エラーが常に返されてしまします。
CSRF系が原因かと思うのですが、うまく回避できません。

view

（twig使ってます）

html
1{{ Form.create(null, {'url': Url.build({'controller': 'Hoges', 'action': 'register', 'prefix': 'User'}), 'id': 'creditForm'}) | raw }}
2{{ _view.Form.unlockField('cardNumber') | raw }}
3{{ _view.Form.unlockField('securityCode') | raw }}
4{{ _view.Form.unlockField('expiredMonth') | raw }}
5{{ _view.Form.unlockField('expiredYear') | raw }}
6
7<ul class="form-list-renew">
8    <li class="item">
9        <div class="title -required">番号(半角数字)</div>
10        <div class="form-group">
11            {{ Form.control('cardNumber', {
12                'required': true,
13                'error': false,
14                'type': 'number',
15                'class': '',
16                'label': '',
17                'placeholder': '例）1234567890123456'
18            }) | raw }}
19        </div>
20    </li>
21    <li class="item">
22        <div class="title">コード(半角数字)</div>
23        <div class="form-group -securitycode">
24            {{ Form.control('securityCode', {
25                'required': true,
26                'error': false,
27                'type': 'number',
28                'class': '',
29                'label': '',
30                'placeholder': '例）000'
31            }) | raw }}
32        </div>
33    </li>
34    <li class="item">
35        <div class="title">期間</div>
36        <div class="form-group">
37            <div class="select-box">
38                <label>
39                    {{ Form.control('expiredMonth', {
40                        'required': true,
41                        'error': false,
42                        'type': 'select',
43                        'class': '-sec_code -limit',
44                        'label': '',
45                        'empty': '選択してください',
46                        'options': 1..12
47                    }) | raw }}
48                    <i class="if if-top_arrow_down"></i>
49                    <span>月</span>
50                </label>
51                <label>
52                    {{ Form.control('expiredYear', {
53                        'required': true,
54                        'error': false,
55                        'type': 'select',
56                        'class': '-sec_code -limit',
57                        'label': '',
58                        'empty': '選択してください',
59                        'options': years
60                    }) | raw }}
61                    <i class="if if-top_arrow_down"></i>
62                    <span>年</span>
63                </label>
64            </div>
65        </div>
66    </li>
67</ul>
68{{ Form.end() | raw }}

javascript
1let map = $('form#creditForm').serialize();
2
3$.ajax({
4    url: '{{ Url.build({"url": Url.build({"controller": "Hoges", "action": "register", "prefix": "User"}) }}',
5    type: 'POST',
6    data: map,
7    dataType: 'json',
8    contentType: 'application/json; charset=utf-8',
9    beforeSend: function (xhr) {
10        xhr.setRequestHeader("X-CSRF-Token", csrf);
11    },
12}).done(function (json) {
13    {# 処理失敗 #}
14    if (json['success'] === false) {
15        alert('エラー');
16        return false;
17    }
18
19    alert('登録しました');
20}).fail(function (jqXHR, textStatus, errorThrown) {
21    alert('登録失敗しました');
22});

controller

php
1public function register()
2{
3    return $this->response
4        ->withType('application/json')
5        ->withStringBody(json_encode(['success' => true, 'message' => '']));
6}

※ここに書いている情報は、コードの一部を抜き出したもので、若干マスキングしたときにタイポがあるかもしれません。ご了承ください

上記のように、

beforeSend: function (xhr) {
        xhr.setRequestHeader("X-CSRF-Token", csrf);
    },

を入れたり、unlockFieldを入れたりしているのですが、
結局400が返ってきます（Laravelだとうまくいくのに…）…。
この原因の解決策をご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。

よろしくお願いいたします。

追記

CakePHPのエラー

Error: [Cake\Controller\Exception\AuthSecurityException] '_Token' was not found in request data.

'_Token' was not found in request data in CakePHP3 after server migrationを見る限り、
これで行けそうな気がするんですが…

popobot

2018/09/26 08:28

CakePHPでどのExceptionが発生して400エラーになっているかログ等から確認して、掲載してください。また、js側のcsrfという変数には正しくCSRFトークンが入っているのか確認してください。

nnahito

2018/09/26 08:33

エラー記載しました。JSにはCSRFトークン入ってます。

popobot

2018/09/26 08:35

AuthSecurityExceptionなので、CSRFではなく、セキュリティコンポーネントでエラーになっていますね...

popobot

2018/09/26 08:42

フォームのinputをすべてシリアライズして送っているのでよさそうですけどね... _Tokenというhiddenなinputがあるはずなのですが、フォームに存在するのでしょうか。ブラウザの開発ツールなどで見てみてください。

nnahito

2018/09/26 08:42

あー、CSRFかと思ってました……こちら原因って何なのでしょうか？

nnahito

2018/09/26 08:44

あ、「_Token[fields]」とか「_Token[unlocked]」がありますね

popobot

2018/09/26 08:45

はい、CSRFではないですね。雑にセキュリティコンポーネントを無効にしてみるとうまくいくと思います。一部のURLだけを無効にする方法もあります。

nnahito

2018/09/26 08:49

うぅん、会社のやつなので、雑に無効化はやりたくないですね…ｗ

popobot

2018/09/26 09:20

だとすると、js側で_Tokenを遅れてないんですかね

nnahito

2018/09/26 09:27

一つR&Dで見つけ出したのですが、ajaxの「beforeSend」の部分を消すとうまくいきました…ヘッダーに入れるとだめになったんでしょうか…

popobot

2018/09/26 09:35

うーん、なんでしょうね...自分もCakePHP3.6＋jQueryで同じような処理を書いていますが、問題なく動いているので...謎です（beforeSendを使ってCSRFトークンもセットしています）

nnahito

2018/09/26 10:02

あれー……なんでだ……これは不思議すぎる。エラーの可能性があるとしたら、やはりAppControllerなのでしょうか？

popobot

2018/09/26 10:59 編集

AuthSecurityExceptionは、セキュリティコンポーネントがthrowする例外です。セキュリティコンポーネントは、POSTされたデータがフォームの項目と比較して改ざんされていないかチェックしていますが、処理全体の早い段階（startup）で実行されます。そして_Tokenというのは、フォームの項目をハッシュにしたデータなどが入っています。

popobot

2018/09/26 10:29

「ajaxの「beforeSend」の部分を消すとうまくいきました」とありますが、これを消すと_Tokenが送信されるけど、消さないと送信されないということなのでしょうか

popobot

2018/09/26 10:32 編集

DebugKitを使っているなら、Historyタブを見ると、Ajaxで送信したデータの内容が見れるので、活用すると調査しやすいと思います。HIstoryタブで、対象のAjaxの処理を選択した後、Requestタブをみると過去のリクエストのデータを見ることができます

行動規範の内容に同意します

回答2件

ソースを見る限り、
xhr.setRequestHeader("X-CSRF-Token", csrf);
のcsrfが空のように思えますが、どこかで値が代入されているのでしょうか？
追記のリンク先にも書かれているように
$('[name="_csrfToken"]').val()
を格納する必要があると思います。

投稿2018/10/03 04:40