Image Upload not setting appropriate headers in XMLHttpRequest

[Stetzon]

Hi, I am trying to configure my editor to point to a url to upload images as described here:

images_upload_url: '/images/upload',

I need to pass along a csrf token along with the XMLHttpRequest otherwise the server will deny it. I am manually setting an additional header on any XHR as defined here:

tinymce.util.XHR.on('beforeSend', function (e) {
    e.xhr.setRequestHeader('X-CSRF-TOKEN', window.csrfToken);
});

which works just fine when using the spellchecker plugin. However, when the image upload request is sent via the file browser, the X-CSRF-TOKEN header is missing:

According to the images_upload_handler option, when not set, the default action would be to use a XHR to upload the images. This does not appear to be the case as the X-Requested-With:XMLHttpRequest is also missing from the headers.

[Stetzon]

I have a workaround by using the images_upload_handler option instead of the images_upload_url and modifying the example to manually set the XHR request header:

imagesUploadHandler(blobInfo, success, failure) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/images/upload');
    xhr.setRequestHeader('X-CSRF-TOKEN', window.csrfToken); // manually set header

    xhr.onload = function() {
        if (xhr.status !== 200) {
            failure('HTTP Error: ' + xhr.status);
            return;
        }

        let json = JSON.parse(xhr.responseText);

        if (!json || typeof json.location !== 'string') {
            failure('Invalid JSON: ' + xhr.responseText);
            return;
        }

        success(json.location);
    };

    let formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
}

[jayarjo]

@Stetzon currently image upload doesn't respect any additional settings, so the way you work around is the only way at the moment.

[Stetzon]

@jayarjo ok thank you for verifying this

[papac]

I have same error.

[papac]

The problem is solved.

I added the X-REQUESTED-WITH header with the XMLHttpRequest value. Add this if you do not use JQuery.

[rsavinsky]

I'm having the same issue so I switched from 'images_upload_url' to 'images_upload_handler'. I set the 'X-CSRF-TOKEN', but I'm still getting the 403 Origin Denied error message in Chrome. I tried setting the X-REQUEST-WITH header and that had no affect. Is there anything else I can do to get this to work in Chrome?

[nazmulhasan85]

@jayarjo Is there any update on this issue?

[ethernidee]

For tinymce 4.9+ it's possible to use hack. Place it in tinymce.min.js at start:

    window.MceXMLHttpRequest = function () {
      var result   = new XMLHttpRequest();
      var origSend = result.send;
      
      result.send = function (body) {
        tinymce.util.XHR.fire('beforeSend', { xhr: this, settings: {}});

        return origSend.call(this, body);
      };

      return result;
    };

and replace getOrDie("XMLHttpRequest") with MceXMLHttpRequest.

[sumon4skf]

I have a workaround by using the images_upload_handler option instead of the images_upload_url and modifying the example to manually set the XHR request header:

imagesUploadHandler(blobInfo, success, failure) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/images/upload');
    xhr.setRequestHeader('X-CSRF-TOKEN', window.csrfToken); // manually set header

    xhr.onload = function() {
        if (xhr.status !== 200) {
            failure('HTTP Error: ' + xhr.status);
            return;
        }

        let json = JSON.parse(xhr.responseText);

        if (!json || typeof json.location !== 'string') {
            failure('Invalid JSON: ' + xhr.responseText);
            return;
        }

        success(json.location);
    };

    let formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
}

Works for me,
TinyMCE Version: 5.1.5 (2019-12-19)

Thanks,

[Sugar2]

Same issue for me. Tried to set additional header with token and I can not pass it with images_upload_url.
It would be much more convenient if you could just send the extra fields that way:

imageUpload: { images_upload_url: '/your_url/', images_upload_credentials: true, headers: { X_CSRF_TOKEN: 'your token', ...additional_fields } }

I am using tinyMCE 6.

[ThiefMaster]

+1 on a convenient shortcut. FWIW, in CKEditor I can simply do this to set custom headers:

{
  ...,
  simpleUpload: {
    uploadUrl: 'my upload url',
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'X-CSRF-Token': document.getElementById('csrf-token').getAttribute('content'),
    },
  },
};