Widget CSP Overview

Last modified: October 13, 2026

Introduction

Currently, certain Mendix pluggable widgets are not fully compliant with strict content security policy (CSP). Some of these widgets require access to third party domains. By allowing access to these domains, these widgets can still follow allowlist CSP.

Setup

For information on setting up your application's CSP, see the Content Security Policy guide.

Widgets

The following widgets are not fully compliant with strict CSP. See the widgets' documents below for additional information and setup instructions to enable CSP:

Charts

The Charts widget is not fully compliant with strict CSP. The Plotly library used by the widget adds its styles to the page at runtime, and strict CSP blocks this. The charts are still drawn, but their layers are positioned incorrectly. As a result, chart elements such as legends are displaced or missing.

You can resolve this in one of the following ways:

Allowing Inline Styles

You can enable allowlist CSP for Charts by including these directives:

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

Adding the Plotly Styles to Your Theme

Plotly publishes its styles as a static CSS file. When this file is part of your theme, the charts are displayed correctly with default-src 'self'.

To add the Plotly styles to your theme, follow these steps:

  1. Download the Plotly CSS file for the Plotly version used by your Charts version. For example, Charts version 6.3.2 uses Plotly 3.6.0, so the file is https://cdn.plot.ly/plotly-3.6.0.css.

  2. Save the file as plotly.css in the theme/web folder of your app. Do not link to the file on the CDN, because strict CSP blocks stylesheets from other domains.

  3. Add the file to the cssFiles property in theme/web/settings.json:

    {
    "cssFiles": ["theme.compiled.css", "plotly.css"]
}

  4. Run your app again.

For more information on adding CSS files to your theme, see the Adding Custom Styling section of Customize Styling.

With these steps, the charts are displayed correctly, but the browser console still shows CSP errors because Plotly continues to try to add its styles. These errors do not affect the charts. To stop Plotly from adding its styles, add the following element to the <head> tag of your theme/web/index.html file:

<meta id="plotly.js-style-global" class="no-inline-styles" />

If you do not have this file, see the Customizing index.html (Web) section of Customize Styling.

The following CSP errors can remain in the browser console. They do not affect charts that do not use maps:

  • An inline style error for the styles of the map library included in Plotly.
  • Two image errors for a data: image that Plotly uses to detect WebP support. To remove these errors, you can add img-src 'self' data: to your CSP.

Color Picker

You can enable allowlist CSP for Color Picker by including these directives:

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

Document Viewer

You can enable CSP for document viewer by setting the PDF.js worker URL to the local path. For more configuration information, see the Advanced section of Document Viewer.

HTML/JavaScript Snippet

For information on HTML/JavaScript Snippet widget CSP configurations, see HTML/JavaScript Snippet CSP.

Maps

For information on Maps widget CSP configurations, see Maps CSP.

Rich Text

Use versions 3.0 and higher of Rich Text for strict CSP compliance.

You can enable allowlist CSP for Rich Text by including these directives:

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

For Rich text version 2.x and below, you will need to add the following directives:

script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';

Progress Circle

Use versions 3.3.0 and higher of Progress Circle for strict CSP compliance.

Web Actions

Use versions 2.10.0 and higher Web Actions for strict CSP compliance.

Read More

  • Read Security Guide to understand more about security roles and access in Mendix
  • See App Permissions to understand how make your app ask users for permission before storing their media