CSP nonce support in Link

You can now pass a Content Security Policy (CSP) nonce to our LinkLink The authorization flow that allows end users to connect their accounting, banking, or commerce platforms to your application via Codat. SDK, making it simpler to embed LinkLink The authorization flow that allows end users to connect their accounting, banking, or commerce platforms to your application via Codat. in apps that enforce strict browser security policies.

What's new?

The LinkLink The authorization flow that allows end users to connect their accounting, banking, or commerce platforms to your application via Codat. SDK now accepts a nonce option that it applies to every <style> tag it injects into your page. With this in place, your app can use a strict CSP style-src directive instead of allowing unsafe-inline, which previously was required to render LinkLink The authorization flow that allows end users to connect their accounting, banking, or commerce platforms to your application via Codat.'s styles.

In your CodatLink component:

<CodatLink
  companyId={companyId}
  options={{ nonce }}
/>

Then in your CSP header:

style-src 'self' 'nonce-r4nd0mB4se64Val==' *.codat.io;

For full setup steps, including how to generate and surface the nonce, see CSP nonce in our SDK customization docs.

Existing setups are unaffected

If you don't pass a nonce, LinkLink The authorization flow that allows end users to connect their accounting, banking, or commerce platforms to your application via Codat. works exactly as before. You only need to opt in if you want to remove unsafe-inline from your CSP.

Why does this matter?

• Stronger browser security: Strict CSPs help protect your customers from cross-site scripting (XSS) attacks. Removing unsafe-inline is one of the highest-impact changes you can make to your CSP.
• Compliance-friendly: If your security or compliance team has flagged unsafe-inline in your CSP, this gives you a clean path to remove it.
• No styling trade-offs: LinkLink The authorization flow that allows end users to connect their accounting, banking, or commerce platforms to your application via Codat. continues to render with the same look and feel you've configured in the Portal - the nonce only changes how the browser trusts the styles, not the styles themselves.

The same nonce option is also available in the ConnectionsConnection A link between a Codat company and a data source (like an accounting platform). Each connection represents authorized access to pull or push data from that platform. and Bank FeedsBank Feeds A Codat product that enables automatic synchronization of bank transaction data into a company's accounting software. SDKs, so a single nonce-based CSP can cover all three.

Who is this relevant for?

This update is for clients who embed LinkLink The authorization flow that allows end users to connect their accounting, banking, or commerce platforms to your application via Codat. (or ConnectionsConnection A link between a Codat company and a data source (like an accounting platform). Each connection represents authorized access to pull or push data from that platform., or Bank FeedsBank Feeds A Codat product that enables automatic synchronization of bank transaction data into a company's accounting software.) in an app that sets a Content Security Policy, particularly anyone working to remove unsafe-inline from their style-src directive.

How to get started?

The nonce option is available now. To start using it:

1. Configure your server to generate a unique, cryptographically random nonce for each request.
2. Expose the nonce to the browser, for example via a <meta> tag.
3. Pass the value to the SDK through options.nonce.
4. Update your CSP header to swap style-src 'unsafe-inline' for style-src 'nonce-<value>'.

The full migration guide is in our SDK customization documentation.