添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
大鼻子的镜子  ·  python ...·  4 月前    · 
捣蛋的针织衫  ·  人物 – 有方·  6 月前    · 
豪气的哑铃  ·  OpenGL ES 3.0 ...·  8 月前    · 

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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'),