ai / audio-recorder-polyfill

MediaRecorder polyfill to record audio in Edge and Safari

Home Page:https://ai.github.io/audio-recorder-polyfill/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Content Security Policy Issue

codecube47 opened this issue · comments

I tried to use with rails vuejs project. but I got an error with regards to Content Security Policy Issue. I understand what does it means, tried to solve the problem by adding some 'worker-src' policy but it is not working, please kindly let me what was the issue?.

This is my code:

`  play: function (event) {
  // Request permissions to record audio
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      this.recorder = new MediaRecorder(stream) // error happened here
      // Set record to <audio> when recording will be finished
      this.recorder.addEventListener('dataavailable', e => {
        this.src = URL.createObjectURL(e.data)
      })
      // Start recording
      this.recorder.start()
    })
},

`

This is the error

index.js:13 Refused to create a worker from 'blob:http://localhost:3000/92286af6-d38d-420d-80dd-2fa44f07c9f9' 
because it violates the following 
Content Security Policy directive: "script-src 'self' https: 'unsafe-eval'". 
Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

index.js:13 Uncaught (in promise) DOMException: Failed to construct 'Worker': Access to the script at 'blob:http://localhost:3000/92286af6-d38d-420d-80dd-2fa44f07c9f9' is denied by the document's Content Security Policy.
    at createWorker (http://localhost:3000/packs/js/application-a1cab6b8a36d1954fc07.js:11081:10)
    at new MediaRecorder (http://localhost:3000/packs/js/application-a1cab6b8a36d1954fc07.js:11122:20)
    at http://localhost:3000/packs/js/arena/challenge_hosted_instances/edit-61082f96f21aac182336.js:20153:26

This was fixed when we use rails with Vuejs we need to add worker-src to the initializer as below.

Rails.application.config.content_security_policy do |policy|
  if Rails.env.development?
    policy.script_src :self, :https, :unsafe_eval
    policy.worker_src :self, :blob
  end
end

I do not think it is an issue here (just a normal CSP workflow). But you can send PR to docs.