diff --git a/src/renderer.ts b/src/renderer.ts
index f08b56e91..914b4838b 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -169,8 +169,10 @@ class Renderer extends EventEmitter<RendererEvents> {
     const div = document.createElement('div')
     const shadow = div.attachShadow({ mode: 'open' })
 
+    const cspNonce = this.options.cspNonce && typeof this.options.cspNonce === 'string' ? this.options.cspNonce.replace(/"/g, '') : '';
+
     shadow.innerHTML = `
-      <style>
+      <style${cspNonce ? ` nonce="${cspNonce}"` : ''}>
         :host {
           user-select: none;
           min-width: 1px;
diff --git a/src/wavesurfer.ts b/src/wavesurfer.ts
index a3c409f99..ecc2c4290 100644
--- a/src/wavesurfer.ts
+++ b/src/wavesurfer.ts
@@ -76,6 +76,8 @@ export type WaveSurferOptions = {
   fetchParams?: RequestInit
   /** Playback "backend" to use, defaults to MediaElement */
   backend?: 'WebAudio' | 'MediaElement'
+  /** Nonce for CSP if necessary */
+  cspNonce?: string
 }
 
 const defaultOptions = {