Content Security Policy Compliance

31/03/2026

To improve application security against Cross-Site Scripting (XSS), the Content Security Policy (CSP) has been updated to disallow the unsafe-inline directive for both style-src and script-src. This change is effective as of Graph Modeling (PoolParty) version 10.1.

All developers must refactor code to eliminate inline scripts and styles. This applies to all front-end assets, including JavaScript, CSS, and Velocity Templates (.vm files), for example in the context of customizing the Linked Data Frontend.

The CSP update may yield the following challenges:

Inline JavaScript: Any JavaScript code written directly in HTML (e.g., onclick, <script> tags with inline code) will no longer execute.
Inline Styles: Any CSS styles written directly in HTML (such as style attributes) will no longer apply.
Third-party Resources: External scripts or styles not hosted on the same domain may require explicit whitelisting in the CSP.
Note
Google Tag Manager and Google Analytics are whitelisted. To enable it you have to place the Google Analytics initialization code inside a separate JavaScript file and reference the file in the <head> tag inside the head.vm file.

Not Allowed	Allowed
This element cannot be used because the CSP disallows the use of `unsafe-inline` for the `script-src` directive, blocking inline event handlers like `onclick`: <button onclick="alert('Hello!')">Click Me</button>	Move the JavaScript to an external file or a `<script>` block: <button id="myButton">Click Me</button><script src="path/to/external.js"></script> external.js: document.getElementById('myButton').addEventListener('click', function() { alert('Hello!');});
Similarly, inline style attributes like `style="color: red;"` are not allowed: <div style="color: red;">This is red text</div>	Instead, move the styles to an external CSS file or a `<style>` block: <div class="red-text">This is red text</div><link rel="stylesheet" href="path/to/styles.css"> styles.css: .red-text { color: red;}
Passing a dynamic JavaScript variable by embedding it within a forbidden inline `<script>` tag is also not allowed: <script> var config = { key: "value" };</script>	Instead, use `data-` attributes to pass dynamic data: <div id="app-config" data-key="value"></div><script src="path/to/config.js"></script> config.js*: const configElement = document.getElementById('app-config');const config = { key: configElement.getAttribute('data-key')};
Attempting to put whitelisted Google Analytics code in a `<script>` block will not work since it still counts as inline script execution: <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>	Instead, externalize the initialization logic into a local file (for example, named `ga-setup.js`), and place it in your static assets directory, referencing it via a standard `<script>` tag in your HTML head: <script type="text/javascript" src="#frontendLink('default/js/ga-setup.js')"></script>

Not Allowed

Allowed

This element cannot be used because the CSP disallows the use of unsafe-inline for the script-src directive, blocking inline event handlers like onclick:

<button onclick="alert('Hello!')">Click Me</button>

Move the JavaScript to an external file or a <script> block:

<button id="myButton">Click Me</button><script src="path/to/external.js"></script>

external.js:

document.getElementById('myButton').addEventListener('click', function() { alert('Hello!');});

Similarly, inline style attributes like style="color: red;" are not allowed:

<div style="color: red;">This is red text</div>

Instead, move the styles to an external CSS file or a <style> block:

<div class="red-text">This is red text</div><link rel="stylesheet" href="path/to/styles.css">

styles.css:

.red-text { color: red;}

Passing a dynamic JavaScript variable by embedding it within a forbidden inline <script> tag is also not allowed:

<script> var config = { key: "value" };</script>

Instead, use data-* attributes to pass dynamic data:

<div id="app-config" data-key="value"></div><script src="path/to/config.js"></script>

config.js:

const configElement = document.getElementById('app-config');const config = { key: configElement.getAttribute('data-key')};

Attempting to put whitelisted Google Analytics code in a <script> block will not work since it still counts as inline script execution:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

Instead, externalize the initialization logic into a local file (for example, named ga-setup.js), and place it in your static assets directory, referencing it via a standard <script> tag in your HTML head:

<script type="text/javascript" src="#frontendLink('default/js/ga-setup.js')"></script>

By adhering to the updated CSP, we significantly improve the security of the application. While this introduces some migration challenges, the examples provided should help you transition your code to be CSP-compliant. If you encounter any issues or require external resources to be whitelisted, please reach out to your Graphwise representative for assistance. For more information on the Content Security Policy, visit the Mozilla documentation.

It is possible to configure specific CSP directives to permit external domains to load resources.

Within your property configurations you can whitelist domains for the following directives:

CSP Directive	Description	Property Key	Example Usage
`img-src`	Controls allowed image sources.	`ldf.img.src`	`ldf.img.src=https://example.com https://external-site.com`
`script-src`	Controls allowed JavaScript sources.	`ldf.script.src`	`ldf.script.src=https://scripts.example.com`
`style-src`	Controls allowed CSS/stylesheet sources.	`ldf.style.src`	`ldf.style.src=https://styles.example.com`
`connect-src`	Controls allowed script-initiated network requests (e.g., Fetch/XHR)	`ldf.connect.src`	`ldf.connect.src=https://api.example.com`

Handling Inline Scripts and Styles Using Nonce Values

If you need to use inline scripts or styles (which are blocked by default under strict CSP), you can use a nonce (number used once). In your Velocity (.vm) templates, simply apply the $nonceValue variable to the nonce attribute of your HTML tags:

<style nonce="$nonceValue">
    body {
        background-color: pink;
    }
</style>

Important

Only use the $nonceValue for tools or scripts that strictly require inline implementation. For better security and performance, it is highly recommended to move style properties into separate CSS files rather than using inline blocks.

In this section:

Content Security Policy Compliance

Note

Important