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.