TinyMCE filters out some of the more common XSS content like scripts from the content since it is common that the editor is used in a single page application. For additional security, consider passing it through server-side filters like HTMLPurifier.
You can use TinyMCE with a CSP header, however, there are a few things that need to be enabled for the editor to function properly:
Here is a list of the directives that are required by TinyMCE and why they are required:
|script-src ‘self’ *.tinymce.com;||Scripts are sometimes loaded as script element with an src attribute.|
|connect-src ‘self’ *.tinymce.com;||XMLHttpRequest are required by some services such as spellchecking.|
|img-src ‘self’ *.tinymce.com data: blob:;||Images within the editor are sometimes base64 encoded or blob URLs or proxied through the cloud service.|
|style-src ‘self’ ‘unsafe-inline’;||Styles are used on dialogs/menus to position them relative to other elements.|
|font-src ‘self’ *.tinymce.com;||Fonts are used for icons in the UI and is loaded from external files.|
You can use this CSP header when served from the cloud:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' *.tinymce.com; connect-src 'self' *.tinymce.com; img-src 'self' *.tinymce.com data: blob:; style-src 'self' 'unsafe-inline' *.tinymce.com; font-src 'self' *.tinymce.com;" />
You can use this CSP header when served from a local domain excludes the *.tinymce.com domain:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; font-src 'self';" />
Thanks for the feedback!
Can't find what you're looking for? Let us know.