Fixed Nginx Configuration with CKEditor Support

Run this command to update the CSP for CKEditor

# Update the CSP to allow CKEditor resources sudo sed -i 's|add_header Content-Security-Policy.*|add_header Content-Security-Policy "default-src '\''self'\''; script-src '\''self'\'' '\''unsafe-inline'\'' '\''unsafe-eval'\'' https://code.jquery.com https://cdn.jsdelivr.net https://cdn.ckeditor.com; style-src '\''self'\'' '\''unsafe-inline'\'' https://cdnjs.cloudflare.com https://fonts.googleapis.com https://cdn.jsdelivr.net https://cdn.ckeditor.com; font-src '\''self'\'' https://fonts.gstatic.com https://cdnjs.cloudflare.com https://cdn.ckeditor.com data:; img-src '\''self'\'' data: https:; connect-src '\''self'\'';" always;|' /etc/nginx/sites-available/flaskblog # Test and reload sudo nginx -t && sudo systemctl reload nginx

--------

🎯 What Changed for CKEditor:

The CSP now includes:

For scripts:

   'unsafe-eval' - CKEditor requires eval for some functionality

   https://cdn.ckeditor.com - CKEditor CDN

For styles:

   https://cdn.ckeditor.com - CKEditor CSS

For fonts:

   https://cdn.ckeditor.com - CKEditor fonts

🔍 Check Your Flask CKEditor Configuration

Also verify your Flask CKEditor configuration:
bash

# Check if CKEditor is properly configured in your Flask app
grep -r "ckeditor" /opt/flaskblog/app/

Your Flask CKEditor configuration should look like this:
python

# In your Flask app configuration
CKEDITOR_SERVE_LOCAL = False  # Use CDN version
CKEDITOR_PKG_TYPE = 'standard'  # or 'full' for more features

🚀 Alternative - More Permissive CSP for Development

If you're still having issues, use this more permissive CSP for development:
bash

# For development/testing, use a more permissive CSP
sudo sed -i 's|add_header Content-Security-Policy.*|add_header Content-Security-Policy "default-src '\''self'\''; script-src '\''self'\'' '\''unsafe-inline'\'' '\''unsafe-eval'\'' https:; style-src '\''self'\'' '\''unsafe-inline'\'' https:; font-src '\''self'\'' https: data:; img-src '\''self'\'' data: https:; connect-src '\''self'\'';" always;|' /etc/nginx/sites-available/flaskblog

sudo nginx -t && sudo systemctl reload nginx

📋 Complete CSP for CKEditor:
nginx

add_header Content-Security-Policy "
   default-src 'self';                           # Default: only from same origin
   script-src 'self' 'unsafe-inline' 'unsafe-eval' # Scripts: same origin + inline + eval (CKEditor needs this)
       https://code.jquery.com                   # jQuery CDN
       https://cdn.jsdelivr.net                  # Bootstrap CDN
       https://cdn.ckeditor.com;                 # CKEditor CDN
   style-src 'self' 'unsafe-inline'              # Styles: same origin + inline
       https://cdnjs.cloudflare.com              # Font Awesome CSS
       https://fonts.googleapis.com              # Google Fonts CSS
       https://cdn.jsdelivr.net                  # Bootstrap CSS
       https://cdn.ckeditor.com;                 # CKEditor CSS
   font-src 'self'                               # Fonts: same origin
       https://fonts.gstatic.com                 # Google Fonts
       https://cdnjs.cloudflare.com              # Font Awesome webfonts
       https://cdn.ckeditor.com                  # CKEditor fonts
       data:;                                    # Data URIs
   img-src 'self' data: https:;                  # Images: same origin + data URIs + all HTTPS
   connect-src 'self';                           # Connections: same origin only
" always;

🧪 Test CKEditor

After applying the fix:

   Clear browser cache (Ctrl+Shift+R)

   Go to your post creation page where CKEditor should be

   Check browser console for any remaining CSP errors

   CKEditor should now load properly

The main issues were:

   Missing 'unsafe-eval' for CKEditor scripts

   Missing https://cdn.ckeditor.com for CKEditor resources

CKEditor should now work correctly with the updated CSP!