All geek questions in one place

How to add field to POST values ​​in CKeditor boot

I use django and ckeditor to provide wysiwyg taste for TextEdits. I would like to use the CKEditor file upload function (in the filebrowser / image dialog box), but the POST made by CKEditor to download the image just contains the file data.

This is a problem for checking CSRF. I could not find in the CKEditor documentation and specify a place to change the POST data to upload files to add django csrf_token to the POST data.

As a workaround, I can change the filebrowserUploadUrl settings to include csrf data in the download url, use @csrf_exempt to represent the download, and check request.GET parameters to check csrf. But is this a safe solution?

In any case, if someone knows how to include the csrf token directly in the CST files of the CKEditor file, I'm very interested ...

+6
source share
6 answers

You can register for the dialogDefinition event and completely rewrite the upload tab, thus:

CKEDITOR.on('dialogDefinition', function (ev) { var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if (dialogName == 'image') { dialogDefinition.removeContents('Upload'); dialogDefinition.addContents({ title: "Upload", id: "upload", label: "Upload", elements: [{ type: "html", html: '<form><input id="imageupload" type="file" name="files[]" />{%csrf_token%}</form>' }] }); } });

This is an untested simplification of my real version, but hopefully it shows an idea.

This does not set the URL field in the image dialog, so clicking the OK button in the dialog will give you an error message. You will need to install this on a successful boot, thus:

 CKEDITOR.dialog.getCurrent().getContentElement('info', 'txtUrl').setValue(theURL);
+6
source

Additional data sent to the server is transmitted on request get. I tried to add additional data and finally achieve this addition to the url parameters of the form that is used to send data

 CKEDITOR.on('dialogDefinition', function(ev) { var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if (dialogName == 'image') { dialogDefinition.contents[2].elements[0].action += '&pin=123456'; /* 2 is the upload tab it have two elements 0=apparently is the and 1: is the button to perform the upload, in 0 have the action property with the parameters of the get request simply adding the new data */ } });
+2
source

It seems that there is no way to add data to the ckeditor boot data without editing the ckeditor source code. The source code to be changed is plugins / dialogui / plugin.js, around lines 1440 in ckeditor 3.6.2, where ckeditor creates the form used by the iframe to load.

 // ADDED TO CKEDITOR CODE %< var csrfitems = document.getElementsByName("csrfmiddlewaretoken") var csrftoken = "" if(csrfitems.length > 0) csrftoken = csrfitems[0].value // >% END OF ADDED CODE if ( elementDefinition.size ) size = elementDefinition.size - ( CKEDITOR.env.ie ? 7 : 0 ); // "Browse" button is bigger in IE. frameDocument.$.write( [ '<html dir="' + langDir + '" lang="' + langCode + '"><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">', '<form enctype="multipart/form-data" method="POST" dir="' + langDir + '" lang="' + langCode + '" action="', CKEDITOR.tools.htmlEncode( elementDefinition.action ), '">', // ADDED TO CKEDITOR CODE '<input type="hidden" name="csrfmiddlewaretoken" value="',csrftoken,'"/>', // >% END OF ADDED CODE '<input type="file" name="', CKEDITOR.tools.htmlEncode( elementDefinition.id || 'cke_upload' ), '" size="', CKEDITOR.tools.htmlEncode( size > 0 ? size : "" ), '" />', '</form>',

And now we can safely load into ckeditor with django

+1
source

I had a similar problem when integrating image upload through CKEditor for Elgg. The least intrusive solution I came across was to bind to the onClick event for the submit button and change the form directly from this:

 CKEDITOR.on('dialogDefinition', function (ev) { var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if (dialogName === 'image') { var uploadTab = dialogDefinition.getContents('Upload'); for (var i = 0; i < uploadTab.elements.length; i++) { var el = uploadTab.elements[i]; if (el.type !== 'fileButton') { continue; } // add onClick for submit button to add inputs or rewrite the URL var onClick = el.onclick; el.onClick = function(evt) { var dialog = this.getDialog(); var fb = dialog.getContentElement(this['for'][0], this['for'][1]); var action = fb.getAction(); var editor = dialog.getParentEditor(); editor._.filebrowserSe = this; // if using jQuery $(fb.getInputElement().getParent().$).append('<input type="hidden" name="foo" value="bar">'); // modifying the URL fb.getInputElement().getParent().$.action = '/my/new/action?with&query&params=1'; if (onClick && onClick.call(evt.sender, evt) === false) { return false; } return true; }; } } });
+1
source

The question is too old, but ...

Version 4.5 you can add a hook to any request

 editor.on( 'fileUploadRequest', function( evt ) { var xhr = evt.data.fileLoader.xhr; xhr.setRequestHeader( 'Cache-Control', 'no-cache' ); xhr.setRequestHeader( 'csrf header ', 'HEADER' ); xhr.withCredentials = true; } );
+1
source

Providing you to send the CSFR token in the URL via HTTPS, this should be good for this (from a security point of view), and also much easier to handle.

This suggests that django can read this variable or you can easily mod django. These answers trying to change CKeditor look too much imo work.

As long as your CSFR_token is sent by the user browser in a safe way to the server, it does not matter if it is through POST or GET. The security problem in the game is a person in an average attack, that is, you don’t want CSFR_token users to broadcast in plain text.

Strictly speaking, such data should be sent as POST in accordance with the HTTP specification, but this is similar to a situation where the “misuse” of the GET protocol may be acceptable as you do not have control over the CKEditor code in a particularly elegant way.

You can also be caught if CKEditor makes a difference during the upgrade, passing the token via the URL will always work.

0
source

Source: https://habr.com/ru/post/914591/

More articles:


All Articles