Как передать X-CSRF-Token в Request Headers, при загрузке фото через CKEDITOR?

Question

[Роман Савицкий]

Всем привет.
Организовал загрузку фото в Yii2 через CKEDITOR, залил папку upload.php в директорию /web, и собственно указав

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

фото загружались на сервер.
Захотел я грузить фото через ajax запрос и Controller. В директории /controllers создал PhotoController.php в контроллере

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

Затем формирую новую ссылку запроса:

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

Вылетает ошибка 400 Bad Request.

Если же в консоли выполняю вот такой ajax:

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

Ответ сервера 200 OK и в Request Headers вижу вот такую строку:
X-CSRF-Token:VlhSdWt0LWdvFzAXU0NPUh0sMBEnJRoTNxoELBkOaCE.ACMYAjlnEg==

Как мне X-CSRF-Token для Yii2 через CKEDITOR передавать ? Я так понимаю это он из за этого 400 выдает мне.

Заранее Спасибо.

Answer 1

[Роман Савицкий]

В общем кому интересно, вот такое решение моей проблемы
Добавляете этот скрипт перед инициализацией 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) - Единичка тут потому что при клике в визуальном редакторе на добавить фото, открывается iframe с вкладками, в моем случае "Загрузка файла" - это вторая вкладка, поэтому у меня eq(1), У вас может 3-тьей вкладкой, тогда будет eq(2).

Answer 2

[Максим Федоров]

Укажите CSRF-токен в настройках Ajax, например:

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

Comments

[Роман Савицкий]

Мой CKEDITOR , вот таким образом инициализируется на странице сайта:

CKEDITOR.replace( 'editor1', {
      // Define the toolbar groups as it is a more accessible solution.
      
      toolbarGroups: [
        {"name":"document","groups":["mode","document","doctools"]},
        //{"name":"editing","groups":["Scayt"]},
        {"name":"basicstyles","groups":["basicstyles"]},
        {"name":"styles","groups":["styles"]},
        {"name":"paragraph","groups":["list","blocks","align"]},
        {"name":"links","groups":["links"]},
        {"name":"insert","groups":["insert"]},
        //{"name":"about","groups":["about"]},
      ],

      extraPlugins: 'codesnippet,uploadimage,image2,spoiler',
      codeSnippet_theme: 'monokai_sublime',
      height: 356,

      disableNativeSpellChecker: false, //Проверка орфографии.

      // Configure your file manager integration. This example uses CKFinder 3 for PHP.
  
      filebrowserImageUploadUrl: '/user/photo-upload?command=QuickUpload&type=Images',

      stylesSet: [
        { name: 'Narrow image', type: 'widget', widget: 'image', attributes: { 'class': 'image-narrow' } },
        { name: 'Wide image', type: 'widget', widget: 'image', attributes: { 'class': 'image-wide' } }
      ],

      // Load the default contents.css file plus customizations for this sample.
      contentsCss: [ CKEDITOR.basePath + 'contents.css', 'http://sdk.ckeditor.com/samples/assets/css/widgetstyles.css' ],

      image2_alignClasses: [ 'image-align-left', 'image-align-center', 'image-align-right' ],
      simpleuploads_acceptedExtensions: 'gif|jpeg|jpg|png|bmp',
      image2_disableResizer: true,

    } );

Подскажите где и как Вашу идею реализовать ?

[Максим Федоров]

Роман Савицкий, перед инициализацией редактора, это глобальные настройки для аякса

[Роман Савицкий]

Максим Федоров, Попробовал, не помогло...(
В Request Headers, все тоже самое осталось

[Максим Федоров]

Роман Савицкий, значит нужно дебажить