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