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.
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);
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?
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.
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,
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.
+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'),