Violaciones del CSP

Versión GrapesJS

• Confirmo que uso la última versión de GrapesJS

¿Qué navegador usas?

Chrome 143.0.7499.193

Enlace de demo reproducible

https://grapesjs.com/demo.html

Describe el bicho

Hola.

¿Cómo reproducir el bicho?

Importar GrapeJS en un archivo JS / entorno de nodo:

importar 'grapesjs/dist/css/grapes.min.css';
importar uvas de 'uvas';

en una página web usando estrictas reglas CSP, por ejemplo:

por defecto-src 'ninguno'; base-uri 'ninguno'; bloquear-todo-mixto-contenido ; connect-src 'yo'; font-src 'yo'; forma-acción 'yo'; IMG-SRC 'yo'; manifest-src 'yo'; script-src 'yo' 'dinámico estricto' 'nonce-xxxxxx'; style-src 'yo' 'nonce-xxxxxx'; solicitudes de actualización inseguras

Hacerlo desencadenará muchas violaciones de CSP relacionadas con la aplicación del estilo inline.

El problema

Estamos considerando usar GrapeJS en una actualización importante de nuestro producto SaaS, sin embargo, nos enfrentamos a un gran problema con las reglas de la liberación y CSP. Nuestro jefe de seguridad exige políticas CSP muy estrictas y GrapeJS las viola. Para que GrapeJS funcione correctamente con nuestras reglas base, necesitamos añadir las siguientes reglas:

style-src-attr 'inseguro-inlineado'; style-src-elem 'yo' 'inseguro-inline';

Lo cual va en contra de nuestras políticas de seguridad.

Probamos a usar las siguientes opciones en la librería, sin éxito:

    forceClass: cierto,
    avoidInlineStyle: cierto,

Mientras se usan estas opciones, la biblioteca sigue utilizando:

• '<style>' Inyección de etiquetas
• estilo en línea (la mayoría de ellos son lo que parece ser valores "init" como 'display:none' o 'pointer-events:none').

'<style>' Inyección de etiquetas

Esta podría resolverse "fácilmente" permitiendo al usuario de la biblioteca definir un CSP Nonce en la configuración de la biblioteca y añadirlo justo después de la etiqueta ((aquí)[https://github.com/GrapesJS/grapesjs/blob/dev/packages/core/src/canvas/view/FrameView.ts#L356], por ejemplo).

Para fines de prueba, lo probamos editando el código fuente compilado de la lib y conseguimos añadir un nonce ahí, definido en la configuración global de la lib en el método 'init', permitiendo añadir la etiqueta 'style' sin generar violaciones de CSP.

También encontramos una aparición de una etiqueta de estilo (aquí)[https://github.com/GrapesJS/grapesjs/blob/dev/packages/core/src/canvas/view/CanvasView.ts], pero no pudimos acceder a la configuración global de la biblioteca para acceder al CSP Nonce.

En resumen, toda <style>la etiqueta '' añadida por la lib debería ser inyectada con un atributo 'nonce' si la configuración global tiene uno.

Estilo en línea

Parece que se podrían reemplazar los valores de "init" como se ha indicado anteriormente (ya que ya existe una clase 'gsp-hidden' que hace un 'display:none'; debería ser posible hacer lo mismo con todos los estilos, evitando el uso del estilo en línea). Sin embargo, no sabemos si eso sería suficiente para que el liberal cumpla con estrictas normas del CSP.

Al usar la opción 'forceClass', asumimos que todos los estilos añadidos por el editor se empujarán en una clase dentro de una <style>etiqueta '' y esa clase se aplicará a los elementos. Si la etiqueta '<style>' tenía un nonce, debería estar bien con reglas estrictas de CSP.

iframe

Parece que los iframes también se inyectan y aplican estilos en línea o <style>etiqueta '': también deberían ser abordados.

Sobre el "enlace de demostración reproducible"

No puedo darte un Fiddle para reproducirlo porque el problema gira en torno a la cabecera HTTP.

Si necesitas más información, por favor házmelo saber. Muchas gracias por tu tiempo.

Código de conducta

• Acepto seguir el Código de Conducta de este proyecto