[Bug]: Failure to set inline styles in Content-Security-Policy hardened environment

[romansp]

Affected Packages

extension-highlight, extension-color

Version(s)

2.11.7

Bug Description

I'm running Tiptap on Content-Security-Policy (CSP) hardened website with blocked inline styles.

I'm experiencing an issue where Highlight extension fails to set color. This is because color attribute of highlight extension uses 'style' attribute in renderHTML. But in my environment browser will block set of inline style on DOM element due to CSP policy failure.

tiptap/packages/extension-highlight/src/highlight.ts

Lines 78 to 91 in 6ceff32

	color: {
	default: null,
	parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,
	renderHTML: attributes => {
	if (!attributes.color) {
	return {}
	}
	return {
	'data-color': attributes.color,
	style: `background-color: ${attributes.color}; color: inherit`,
	}
	},
	},

Error

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'. Either the 'unsafe-inline' keyword, a hash ('sha256-QlxUQpoEYYLhmVsgdzwUHC+Qi5B/0cWAyj3ENcFAZc8='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present

Stack trace points to the following line in ProseMirror https://github.com/ProseMirror/prosemirror-model/blob/1898c7db4bacf8475939403473389b5cf3f5df8d/src/to_dom.ts#L218.

Browser Used

Edge

Code Example URL

No response

Sorry no URL for the repro as there's no sandbox to easily emulate CSP environment. I can try setup something if this is really needed.

Expected Behavior

Highlight extension should work in CSP hardened environment without unsafe-inline styles. Inline styles should be set via element.style[property] = value.

Additional Context (Optional)

When CSP is enabled and inline styles are blocked browsers will also prevent from setting inline styles using JS via setAttribute if name is "style".

I'm not sure how to approach this problem. The error happens in renderSpec function on ProseMirror's side.

Ideally renderHTML should look like

renderHTML: attributes => {
    if (!attributes.color) {
      return {}
    }

    return {
      'data-color': attributes.color,
      style: { 
       'background-color': attributes.color,
       'color': 'inherit'
      }
    }
  },

But this syntax isn't supported by ProseMirror.

Dependency Updates

• Yes, I've updated all my dependencies.

[romansp]

Please let me know if this issue should be opened in ProseMirror repo instead.