Skip to content

Content Security Policy

Applications can use Elyra Canvas with a Content-Security-Policy that omits 'unsafe-inline' from style-src, but this requires some application-level setup and a few feature constraints.

The Elyra Canvas Test Harness includes a CSP toggle in its toolbar and can be used as a working reference.

Requirements for style-src without 'unsafe-inline'

  1. Serve the Carbon and Elyra Canvas stylesheets as external CSS files, or compile them into your application’s stylesheet bundle.
  2. If your application uses <CommonProperties> controls that inject runtime styles, generate a nonce for each HTTP response and pass it through the cspNonce property in the Common Properties configuration.
  3. Ensure any SVG icons or images rendered by the application do not contain embedded <style> elements or style= attributes on individual elements. Elyra Canvas inlines SVG files as-is; any <style> blocks or style= attributes present in the file will violate a strict style-src policy.
  4. Do not use the canvas object inline style APIs when your policy omits 'unsafe-inline'. The style specifications passed to setObjectsStyle(), setObjectsMultiStyle(), setLinksStyle(), and setLinksMultiStyle() are written as inline style attributes and therefore require 'unsafe-inline' in style-src.
  5. Do not store inline object styles in the pipeline flow data model. Node, comment, and link .style and .style_temp values are also rendered as inline style attributes and therefore require 'unsafe-inline'.
  6. Review any application code that adds inline style attributes outside Elyra Canvas. A CSP that omits 'unsafe-inline' will also block those application-authored inline styles.

Passing a nonce to Common Properties

Common Properties only requires a nonce when the application uses features that inject runtime styles. This includes the expression editor powered by CodeMirror and table-related components.

Use the cspNonce property documented in the Common Properties configuration page:

<CommonProperties
    propertiesConfig={{
        cspNonce: nonce
    }}
    ...
/>

Your server must generate a new cryptographically random nonce for each HTTP response and include the same nonce in the Content-Security-Policy response header, for example:

Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-<your-nonce-value>'

See the cspNonce documentation for a fuller example.

SVG icons and images

If your application provides custom SVG icons or other inline SVG assets to Elyra Canvas, make sure they are compatible with a restrictive style-src policy:

  • Use SVG presentation attributes such as fill, stroke, stroke-width, and opacity instead of CSS properties.
  • Do not embed <style> elements inside the SVG markup.
  • Do not use CSS class selectors inside the SVG to define appearance.
  • Do not use style= attributes on individual SVG elements. Common legacy values such as style="enable-background:..." (an Adobe Illustrator artefact) and style="fill:..." must be replaced with their equivalent presentation attributes or removed.

Elyra Canvas fetches SVG files from the server and inlines them into the canvas DOM as-is, with no style transformation. SVG files that contain <style> blocks or style= attributes will cause CSP violations when the application enforces style-src without 'unsafe-inline'.

When first enabling CSP on an existing deployment, be aware that browsers may have cached SVG assets from before the policy was applied. A previously cached SVG that contains <style> blocks or style= attributes will still cause violations even after the server-side assets are cleaned up, until the cached copy expires or is revalidated. To avoid this, either use cache-busting (content-hashed filenames) when deploying cleaned SVG assets, or ensure your SVG responses are served with Cache-Control: no-cache during the transition.

Features that still require 'unsafe-inline'

A style-src policy without 'unsafe-inline' is compatible with the standard Elyra Canvas and Common Properties styling model, but not with APIs that explicitly write inline style attributes.

The set styles APIs are deprecated and will be removed in a future release.

This means 'unsafe-inline' is still required if your application uses:

If your application avoids those inline style APIs, provides SVG assets that contain no <style> blocks or style= attributes, and supplies a nonce where Common Properties requires one, you can enforce style-src without 'unsafe-inline'.