Netlify/Decap CMS NextJS Image Failed to persist entry TypeError CSP error

[wristtattoo]

Describe the bug I'm hooking up the Neflify/Decap CMS with a NextJS blog and ran into a "Failed to persist entry: TypeError: Failed to fetch" notification with the Image widget in association to the ContentSecurityPolicy.

To Reproduce Steps to reproduce the behavior. For example:

1. In markdown editor click "Choose an image"
2. Select image from desktop
3. Click on 'upload'
4. Click on 'choose selected'
5. In markdown editor click "Save"
6. UI displays "Failed to persist entry: TypeError: Failed to fetch" alert
7. Console displays "Refused to connect to 'blob:https://MINE.netlify.app/1e589049-578f-48ef-8ef6-9c6341b2e3a7' because it violates the document's Content Security Policy."
8. Console also displays "Refused to connect to 'blob:https://MINE.netlify.app/1e589049-578f-48ef-8ef6-9c6341b2e3a7' because it violates the document's Content Security Policy."

Expected behavior "Save" function saves markdown post as draft

Screenshots https://global.discourse-cdn.com/netlify/original/3X/3/9/3950311e20c9ee91172cba8cdae4e02d206620ec.jpeg

Applicable Versions:

• Netlify CMS version: [2.15.72]
• Git provider: GitHub
• OS: 10.15.7
• Browser version Version 1.52.126 Chromium]
• Node.JS version: v18.16.0

CMS configuration - config.yml

backend:
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
media_folder: "public/uploads" # Where media files will be stored
public_folder: "/uploads" # Where the media files can be accesed from the server
publish_mode: editorial_workflow # For Drafts
collections:
  - name: "links" # Used in routes, e.g., /admin/collections/blog
    label: "LOTW" # Used in the UI
    folder: "data/links" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{day}}-{{month}}-{{year}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Tags', name: 'tags', widget: 'list' }
      - { label: "Publish Date", name: "date", widget: "datetime", date_format: "DD.MM.YYYY" }
      - { label: 'Image', name: 'image', widget: 'image' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

next.config.js example

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval' *.netlify.com unpkg.com;
  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app;
  style-src 'self' 'unsafe-inline';
  img-src * blob: data: *.netlify.com unpkg.com;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src giscus.app;
`

Screenshot
https://global.discourse-cdn.com/netlify/original/3X/3/9/3950311e20c9ee91172cba8cdae4e02d206620ec.jpeg

Additional context Error is probably how i've amended the ContentSecurityPolicy and possibly easy to solve (but thought i'd share with the community because i've ran out of time today)

[wristtattoo]

Simple fix const ContentSecurityPolicy = ``