From abb95fa767c6bf1c063b2625865b3ecaeee94c81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Zarzur?= <andrezarzur@hotmail.com>
Date: Fri, 6 Sep 2024 14:58:23 -0300
Subject: [PATCH] Fix: adding nonce as a option in wavesurfer parameters to
 solve CSP problems (#3858)

* feat: adding nonce option for wavesurfer config

* fix: adding prepare script to build on install

* fix: removing the prepare script to be able to create the pull request

* fix: making XSS adjustments
---
 src/renderer.ts   | 4 +++-
 src/wavesurfer.ts | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

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 = {