Fix: adding nonce as a option in wavesurfer parameters to solve CSP p…

…roblems (#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

@@ -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;

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