BUG: CSP violations

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 143.0.7499.193

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

Hello.

How to reproduce the bug?

Import GrapeJS in a JS file / Node env :

import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';

on a webpage using strict CSP rules, for instance :

default-src 'none'; base-uri 'none'; block-all-mixed-content ; connect-src 'self'; font-src 'self'; form-action 'self'; img-src 'self'; manifest-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-xxxxxx'; style-src 'self' 'nonce-xxxxxx'; upgrade-insecure-requests

Doing so will trigger lots of CSP violations around applying inline style.

The problem

We are contemplating using GrapeJS on a major update of our SaaS product, however, we are facing a big issue regarding the lib and CSP rules. Our head of security requires very strict CSP policies and GrapeJS violates them. For GrapeJS to work properly with our base rules, we need to add the following rules :

style-src-attr 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline';

which goes against our security policies.

We tried using the following options in the lib, to no avail :

    forceClass: true,
    avoidInlineStyle: true,

While using these options, the lib still uses :

• <style> tag injection
• inline style (most of them being what it seems to be "init" values such as display:none or pointer-events:none).

<style> tag injection

This one could be resolved "easily" by allowing the user of the lib to define a CSP Nonce in the library config and append it just after the tag ((here)[https://github.com/GrapesJS/grapesjs/blob/dev/packages/core/src/canvas/view/FrameView.ts#L356] for instance).

For testing purposes, we tried it by editing the compiled source of the lib and were successful in adding a nonce there, defined in the global config of the lib in the init method, allowing the style tag to be added without raising CSP violations.

We also found an occurrence of a style tag (here)[https://github.com/GrapesJS/grapesjs/blob/dev/packages/core/src/canvas/view/CanvasView.ts] but were not able to find access to the global config of the lib to access the CSP Nonce.

To sum up, all <style> tag added by the lib should be injected with a nonce attribute if the global config has one.

inline style

It seems replacing the "init" values as reported above could be done (as there is already a class gsp-hidden which does a display:none ; it should be possible to do the same with all style, preventing the use of inline style). However, we don't know if that would be enough to make the lib compliant with strict CSP rules.

By using the forceClass option, we assume that all styles added by the editor will be pushed in a class in a <style> tag and that class will be applied to the elements. If the <style> tag had a nonce, it should be OK with strict CSP rules.

iframe

It seems that iframes are also injected and apply inline styles or <style> tag : they should be addressed too.

About the "reproductible demo link"

I'm not able to give you a Fiddle to reproduce as the issue revolves around HTTP Header.

Should you need more informations, please let me know. Thanks a lot for your time.

Code of Conduct

• I agree to follow this project's Code of Conduct