How to pass X-CSRF-Token to Request Headers when uploading a photo via CKEDITOR?

Question

Yii

Hello.
I organized the upload of photos in Yii2 via CKEDITOR, uploaded the upload.php folder to the /web directory, and actually indicated

filebrowserImageUploadUrl: '/web/upload.php?command=QuickUpload&type=Images',

photos are uploaded to the server.
I wanted to upload photos via ajax request and Controller. In a directory /controllers создал PhotoController.phpin the controller

public function actionUpload(){ 
приписал правило в web.php 'user/photo-upload' => 'photo/upload',

Then I form a new request link:

filebrowserImageUploadUrl: '/user/photo-upload?command=QuickUpload&type=Images',

The error 400 Bad Request takes off.
If I execute the following ajax in the console:

$.ajax
        ({
            url: '/user/photo-upload?command=QuickUpload&type=Images',
            method: 'POST',
            data: 'Вася',
            success: function(data)
            {
                console.log(data);
            },
            error: function(error)
            {
                console.log(error);
            }
        });

Server response 200 OK and in Request Headers I see the following line:
X-CSRF-Token:VlhSdWt0LWdvFzAXU0NPUh0sMBEnJRoTNxoELBkOaCE.ACMYAjlnEg==
How can I transfer X-CSRF-Token for Yii2 via CKEDITOR? As I understand it, he gives me 400 because of this.
Thanks in advance.

Answer 1

In general, for those who are interested, this is the solution to my problem.
Add this script before initializing your CKEDITOR

var csrfParam = '_csrf';
var csrfValue = $('meta[name=csrf-token]').attr("content");

$(document).off('click', '.cke_dialog_tabs a:eq(1)').on('click', '.cke_dialog_tabs a:eq(1)', function () {

                console.log('Вася');

                var $form = $('.cke_dialog_ui_input_file iframe').contents().find('form');
                if (!$form.find('input[name=' + csrfParam + ']').length) {
                    var csrfTokenInput = $('<input/>').attr({
                        'type': 'hidden',
                        'name': csrfParam
                    }).val(csrfValue);
                    $form.append(csrfTokenInput);
                }
            });

cke_dialog_tabs a:eq(1)- One here because when you click in the visual editor to add a photo, an iframe with tabs opens, in my case "File Upload" is the second tab, so I have eq (1), You can have the 3rd tab, then it will be eq (2).

Answer 2

Specify the CSRF token in the Ajax settings, for example:

var csrfParam = $("meta[name=csrf-param]").attr("content");
var csrfValue = $("meta[name=csrf-token]").attr("content");
$.ajaxSetup({    
    headers: {csrfParam: csrfValue} 
});