Feature Request / Security: Add CSP Nonce Support to loadScript

Labels: enhancement, security, script-loader

Description

Currently, loadScript dynamically creates and appends a <script> element for:

https://cdn.unlayer.com/image-editor/embed.js

However, applications enforcing a strict Content Security Policy (CSP) with script nonces—such as Next.js App Router and other SSR frameworks—cannot reliably load the script because loadScript does not accept or attach a nonce attribute to the generated <script> element.

Context / Motivation

Enterprise applications and modern web frameworks increasingly enforce strict CSP policies that disable 'unsafe-inline' and require nonces for dynamically injected scripts.

Without nonce support, developers may be forced to manually inject the script or weaken their CSP configuration, which can undermine the security benefits of a strict CSP.

Supporting CSP nonces directly in the image editor would allow applications to maintain their existing security policies without requiring workarounds.

Proposed Solution

1. Add nonce support to ImageEditorProps

Update ImageEditorProps to accept an optional CSP nonce:

interface ImageEditorProps {
  // existing props...

  nonce?: string;
  scriptAttributes?: Record<string, string>;
}

scriptAttributes could optionally provide additional attributes for applications requiring more control over the dynamically created script element.

2. Pass the nonce to loadScript

When loading the image editor script, pass the nonce through:

loadScript(scriptUrl, { nonce });

3. Apply the nonce in loadScript.ts

When dynamically creating the <script> element, set the nonce:

const script = document.createElement('script');

if (nonce) {
  script.nonce = nonce;
}

If scriptAttributes is supported, the attributes can similarly be applied to the generated element.

Expected Behavior

Given:

<ImageEditor nonce={nonce} />

the dynamically generated script should contain the corresponding nonce:

<script
  src="https://cdn.unlayer.com/image-editor/embed.js"
  nonce="..."
></script>

This should allow the script to load under a CSP policy such as:

Content-Security-Policy: script-src 'self' 'nonce-<generated-nonce>'

Security Considerations

• The nonce should be treated as an opaque value and passed through unchanged.
• The implementation should not generate or modify the nonce internally.
• Applications should generate a cryptographically secure nonce on the server and provide the same nonce in their CSP header and rendered component.
• Existing behavior should remain unchanged when no nonce is provided.

Backward Compatibility

This should be backward compatible.

Existing usage without a nonce:

<ImageEditor />

should continue to work exactly as before.

Nonce support would be opt-in:

<ImageEditor nonce={nonce} />

Acceptance Criteria

• ImageEditorProps accepts an optional nonce?: string.
• loadScript accepts the nonce configuration.
• The generated <script> element receives the nonce.
• Existing users who do not provide a nonce experience no behavior change.
• CSP-protected applications can load embed.js using a valid nonce.
• Tests cover script creation with a nonce.
• Tests cover script creation without a nonce.
• If scriptAttributes is implemented, its attributes are correctly applied to the generated script element.