Add CSRF protection to storage endpoint

Author: JacobFitzp

dist/js/field.js

@@ -512,6 +512,18 @@ __webpack_require__.r(__webpack_exports__);
   created: function created() {
     this.setEditorTheme();
   },
+  computed: {
+    /**
+     * Query parameters to send to the upload endpoint.
+     *
+     * @returns {string}
+     */
+    endpointParams: function endpointParams() {
+      return '?' + new URLSearchParams({
+        _token: this.field.token
+      }).toString();
+    }
+  },
   methods: {
     /*
      * Set the initial, internal value for the field.
@@ -653,7 +665,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           automatic_uploads: true,
           image_uploadtab: true,
           images_upload_credentials: true,
-          images_upload_url: $props.field.options.storage_endpoint
+          images_upload_url: $props.field.options.storage_endpoint + $options.endpointParams
         }),
         modelValue: _ctx.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {

resources/js/components/FormField.vue

@@ -19,7 +19,7 @@
                     automatic_uploads: true,
                     image_uploadtab: true,
                     images_upload_credentials: true,
-                    images_upload_url: field.options.storage_endpoint
+                    images_upload_url: field.options.storage_endpoint + endpointParams
                 }"
                 v-model="value"
             />
@@ -42,6 +42,19 @@ export default {
         this.setEditorTheme()
     },
 
+    computed: {
+        /**
+         * Query parameters to send to the upload endpoint.
+         *
+         * @returns {string}
+         */
+        endpointParams() {
+            return '?' + new URLSearchParams({
+                _token: this.field.token
+            }).toString()
+        }
+    },
+
     methods: {
         /*
          * Set the initial, internal value for the field.

routes/api.php

@@ -1,9 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
-use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken;
 use Jacobfitzp\NovaTinymce\Http\Controllers\ImageAttachmentController;
 
 Route::post('/upload', [ImageAttachmentController::class, 'store'])
-    ->withoutMiddleware(VerifyCsrfToken::class)
     ->name('nova-tinymce.upload');

src/Events/ImageWasAttached.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Jacobfitzp\NovaTinymce\Events;
+
+use Illuminate\Foundation\Events\Dispatchable;
+
+/**
+ * Image attachment event.
+ * Dispatched when an image is uploaded to the TinyMCE field.
+ *
+ * @author Jacob Fitzpatrick
+ */
+class ImageWasAttached
+{
+    use Dispatchable;
+
+    public function __construct(
+        public string $location,
+        public string $disk
+    ) {}
+}

src/Http/Controllers/ImageAttachmentController.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Http\JsonResponse;
 use Illuminate\Support\Facades\Storage;
+use Jacobfitzp\NovaTinymce\Events\ImageWasAttached;
 use Jacobfitzp\NovaTinymce\Http\Requests\AttachImageRequest;
 
 /**
@@ -32,6 +33,10 @@ public function store(AttachImageRequest $request): JsonResponse
 
         // Return the location of the uploaded file.
         if (filled($location)) {
+            // Dispatch attachment event.
+            ImageWasAttached::dispatch($location, $storageDisk);
+
+            // Respond with the location.
             return response()->json([
                 'location' => Storage::disk($storageDisk)->url($location),
             ]);

src/Http/Requests/AttachImageRequest.php

@@ -3,6 +3,7 @@
 namespace Jacobfitzp\NovaTinymce\Http\Requests;
 
 use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
 
 /**
  * Attach image form request.
@@ -17,6 +18,9 @@ class AttachImageRequest extends FormRequest
     public function rules(): array
     {
         return [
+            'disk' => [
+                Rule::in(array_keys(config('filesystems.disks'))),
+            ],
             'file' => [
                 'required',
                 'image',

src/Tinymce.php

@@ -29,7 +29,12 @@ public function __construct($name, $attribute = null, callable $resolveCallback
     {
         parent::__construct($name, $attribute, $resolveCallback);
 
-        $this->withMeta(['options' => config('nova-tinymce')]);
+        $this->withMeta([
+            'options' => config('nova-tinymce'),
+            // Need to make the CSRF token available to the component.
+            // This will allow us to use CSRF protection for the storage endpoint.
+            'token' => csrf_token(),
+        ]);
     }
 
     /**