The editor does not work when setting a Content Security Policy

[cafischer]

Details

• OS (Operating System) version: Ubuntu
• Browser and browser version: Chromium & Firefox
• Django version: 4.1.7
• Martor version & theme: martor = 1.6.19

Steps to reproduce

1. Set a CSP header on your webserver, e.g.: add_header Content-Security-Policy "default-src 'self';
2. Open a django admin page with a field with the markdown editor

In the Browser console you see the error: ace.js:5 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-NPmOMJ6Koi743g0BGW8ul25dqdhwdyelDGzO4sWLPbE='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback. and Refused to load the image 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

I expect the markdown editor work with security precautions in place.

[agusmakmun]

Hello @cafischer, seems it happens on both bootstrap and ace editor itself.

Fixing the code inside the bootstrap and ace is hard to do, and potentially breaking the style or functionalities. I believe in the latest version of bootstrap and ace still had the same issue. So, to handle that we need to update our CSP header:

For django-csp

CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'")
CSP_IMG_SRC = ("*", "'self'", "data:", "https:")

or nginx header:

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline'; img-src * 'self' data: https:";

If above still now working on script, we can add the script-src:

CSP_DEFAULT_SRC = ("'self'", "'unsafe-inline'")
CSP_IMG_SRC = ("*", "'self'", "data:", "https:")
CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'")

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline'; img-src * 'self' data: https:; script-src 'self' 'unsafe-inline';";