Use CSP with Webix without using unsafe-inline

Hi Webix Team,

We are licensed users of webix/pivot library. We have enabled CSP in our project but it seems we are getting lot many errors since webix creates dynamic HTML (with style attributes) and assign this HTML to existing elements via “.innerHTML” or “.createElement” which violates the style-src-elem and style-src-attribute CSP policy.
Initially we were using unsafe-inline in CSP to get around this issue but now its prohibited by our organization. Also we have tried using webix in strict mode but it also didn’t worked

Can you please fix it on urgent basis or provide us an alternate on how to use webix without setting unsafe-inline keywords in the CSP ?


Hi @snap

Unfortunately, Datatable and related complex widgets (such as Spreadsheet and Pivot) depend heavily on the ability to create and update HTML content and custom classes on the fly.
If the dynamic style creation had been blocked, it would make these widgets unusable.
Unfortunately, there is no comprehensive alternative for one of the core aspects or rendering/updating content in Webix.
Considering the necessity of these methods, the described issue could be considered as a limitation rather than a bug.

Other widgets could work correctly without relying on dynamic styling.
Some features, such as styles-based css properties would not be available, but it this particular feature is not used by internal logic without specific settings (css) provided by a user, and can be avoided while describing UI configs.

One of the options we can suggest to try for some (but not complete) improvements is to rewrite one of the widely used methods that creates <style> elements (addStyle) and run a custom build from your Webix sources.
However, this option requires maintenance and testing, if you plan to update Webix version in your project.
Here’s its source code (github, method is equal in both GPL and Pro versions).
If these criteria are met:

  • the document is loaded from the same domain as JS files
  • the document contains its own inline stylesheet (even if it’s empty)
  • and modifications of existing inline stylesheets are allowed,

Then it would be possible to change addStyle in a way that it will always modify some existing stylesheet instead of adding new ones, omitting document.createElement("style").