Merge pull request #394 from ZsgsDesign/master

Add robust CSRF support and provide default values for CSRF fields

README.md

@@ -178,7 +178,9 @@ easyMDE.value('New input for **EasyMDE**');
      - otherwise: `{"error": "<errorCode>"}`, where *errorCode* can be `noFileGiven` (HTTP 400), `typeNotAllowed` (HTTP 415), `fileTooLarge` (HTTP 413) or `importError` (see *errorMessages* below). If *errorCode* is not one of the *errorMessages*, it is alerted unchanged to the user. This allows for server side error messages.
      No default value.
 - **imagePathAbsolute**: If set to `true`, will treat `imageUrl` from `imageUploadFunction` and *filePath* returned from `imageUploadEndpoint` as an absolute rather than relative path, i.e. not prepend `window.location.origin` to it.
-- **imageCSRFToken**: CSRF token to include with AJAX call to upload image. For instance used with Django backend.
+- **imageCSRFToken**: CSRF token to include with AJAX call to upload image. For various instances like Django, Spring and Laravel.
+- **imageCSRFName**: CSRF token filed name to include with AJAX call to upload image, applied when `imageCSRFToken` has value, defaults to `csrfmiddlewaretoken`.
+- **imageCSRFHeader**: If set to `true`, passing CSRF token via header. Defaults to `false`, which pass CSRF through request body.
 - **imageTexts**: Texts displayed to the user (mainly on the status bar) for the import image feature, where `#image_name#`, `#image_size#` and `#image_max_size#` will replaced by their respective values, that can be used for customization or internationalization:
     - **sbInit**: Status message displayed initially if `uploadImage` is set to `true`. Defaults to `Attach files by drag and dropping or pasting from clipboard.`.
     - **sbOnDragEnter**: Status message displayed when the user drags a file to the text area. Defaults to `Drop image to upload it.`.

src/js/easymde.js

@@ -1819,6 +1819,9 @@ function EasyMDE(options) {
     options.imageAccept = options.imageAccept || 'image/png, image/jpeg';
     options.imageTexts = extend({}, imageTexts, options.imageTexts || {});
     options.errorMessages = extend({}, errorMessages, options.errorMessages || {});
+    options.imagePathAbsolute = options.imagePathAbsolute || false;
+    options.imageCSRFName = options.imageCSRFName || 'csrfmiddlewaretoken';
+    options.imageCSRFHeader = options.imageCSRFHeader || false;
 
 
     // Change unique_id to uniqueId for backwards compatibility
@@ -2390,10 +2393,11 @@ EasyMDE.prototype.uploadImage = function (file, onSuccess, onError) {
     var formData = new FormData();
     formData.append('image', file);
 
-    // insert CSRF token if provided in config.
-    if (self.options.imageCSRFToken) {
-        formData.append('csrfmiddlewaretoken', self.options.imageCSRFToken);
+    // insert CSRF body token if provided in config.
+    if (self.options.imageCSRFToken && !self.options.imageCSRFHeader) {
+        formData.append(self.options.imageCSRFName, self.options.imageCSRFToken);
     }
+
     var request = new XMLHttpRequest();
     request.upload.onprogress = function (event) {
         if (event.lengthComputable) {
@@ -2403,6 +2407,11 @@ EasyMDE.prototype.uploadImage = function (file, onSuccess, onError) {
     };
     request.open('POST', this.options.imageUploadEndpoint);
 
+    // insert CSRF header token if provided in config.
+    if (self.options.imageCSRFToken && self.options.imageCSRFHeader) {
+        request.setRequestHeader(self.options.imageCSRFName, self.options.imageCSRFToken);
+    }
+
     request.onload = function () {
         try {
             var response = JSON.parse(this.responseText);

types/easymde.d.ts

@@ -221,6 +221,8 @@ declare namespace EasyMDE {
         imageUploadEndpoint?: string;
         imagePathAbsolute?: boolean;
         imageCSRFToken?: string;
+        imageCSRFName?: string;
+        imageCSRFHeader?: boolean;
         imageTexts?: ImageTextsOptions;
         errorMessages?: ImageErrorTextsOptions;
         errorCallback?: (errorMessage: string) => void;