Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https:". #31298

Closed
psantos10 opened this issue Nov 30, 2017 · 14 comments

Comments

@psantos10
Copy link
Contributor

Steps to reproduce

I create 2 demo Rails apps. One using Rails 5.1.4:

rails 5.1.4 new --skip-coffee --webpack=vue demo_rails_vue

and the second with Rails 5.2.0.beta2

rails new --skip-coffee --webpack=vue demo_rails_vue2

For both, I created a Procfile.dev with the following content:

web: ./bin/rails s -b 0.0.0.0 -p 3000
webpack: ./bin/webpack-dev-server

And I start the server with foreman:

foreman start -f Procfile.dev

Add the line <%= javascript_pack_tag 'application' %> in the head section and change the apps/javascript/packs/application.js like this:

import Vue from 'vue/dist/vue.esm'
import App from '../components/app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const app = new Vue({
    el: 'app',
    template: '<App/>',
    components: { App }
  })
})

Expected behavior

Was expecting both to work, but only the app with Rails 5.1.4 is working.

Actual behavior

The App with Rails 5.2.0.beta2 gives me the following error on the console:

application-be872616ac6b85ad656c.js:98 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https:".
    at Object.<anonymous> (application-be872616ac6b85ad656c.js:98)
    at __webpack_require__ (application-be872616ac6b85ad656c.js:20)
    at Object.<anonymous> (application-be872616ac6b85ad656c.js:470)
    at __webpack_require__ (application-be872616ac6b85ad656c.js:20)
    at application-be872616ac6b85ad656c.js:63
    at application-be872616ac6b85ad656c.js:66
(anonymous) @ application-be872616ac6b85ad656c.js:98
__webpack_require__ @ application-be872616ac6b85ad656c.js:20
(anonymous) @ application-be872616ac6b85ad656c.js:470
__webpack_require__ @ application-be872616ac6b85ad656c.js:20
(anonymous) @ application-be872616ac6b85ad656c.js:63
(anonymous) @ application-be872616ac6b85ad656c.js:66

System configuration

Rails version: 5.1.4 (Working fine);
Rails version: 5.2.0.beta2 (Showing the problem);

Ruby version: 2.4.2

@guilleiguaran
Copy link
Member

guilleiguaran commented Nov 30, 2017

Can you try switching to use webpacker master version in your Gemfile?

gem 'webpacker', github: 'rails/webpacker'

@psantos10
Copy link
Contributor Author

@guilleiguaran this gives me the same error. Nothing changed

@guilleiguaran
Copy link
Member

@psantos10 sorry, looks like that fix won't work until we release a new version of webpacker package to npm, for now you can change the devtool in your config/webpack/development.js:

// config/webpack/development.js
const environment = require('./environment')
const webpackConfig = environment.toWebpackConfig()
webpackConfig.devtool = 'cheap-module-source-map'

module.exports = webpackConfig

@psantos10
Copy link
Contributor Author

@guilleiguaran problem not solved...

Still giving the same error, but this time several times:

vue.js:580 [Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.
warn @ vue.js:580
compileToFunctions @ vue.js:10458
Vue$3.$mount @ vue.js:10671
Vue._init @ vue.js:4524
Vue$3 @ vue.js:4609
(anonymous) @ application.js:6
vue.js:580 [Vue warn]: Failed to generate render function:

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https:".
in

with(this){return _c('App')}

(found in )
warn @ vue.js:580
compileToFunctions @ vue.js:10508
Vue$3.$mount @ vue.js:10671
Vue._init @ vue.js:4524
Vue$3 @ vue.js:4609
(anonymous) @ application.js:6
VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054455695' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
(anonymous) @ client:200
(anonymous) @ client:242
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ html5-entities.js:190
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054456738' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
(anonymous) @ client:200
(anonymous) @ client:242
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ html5-entities.js:190
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054458787' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
(anonymous) @ client:200
(anonymous) @ client:242
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ html5-entities.js:190
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054462808' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
(anonymous) @ client:200
(anonymous) @ client:242
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ html5-entities.js:190
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054470892' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
(anonymous) @ client:200
(anonymous) @ client:242
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ html5-entities.js:190
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054489164' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
(anonymous) @ client:200
(anonymous) @ client:242
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ html5-entities.js:190
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054525160' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
cb @ socket.js:30
setTimeout (async)
onclose @ socket.js:29
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:965
setTimeout (async)
SockJS._close @ sockjs.js:953
SockJS._receiveInfo @ sockjs.js:786
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
XMLHttpRequest.send (async)
(anonymous) @ VM8602:1
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
setTimeout (async)
AbstractXHRObject @ sockjs.js:1489
XHRCorsObject @ sockjs.js:2867
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:539
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
socket @ socket.js:9
(anonymous) @ client:200
(anonymous) @ client:242
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ html5-entities.js:190
webpack_require @ bootstrap 68c8de2d870f98b4f375:19
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62
(anonymous) @ bootstrap 68c8de2d870f98b4f375:62

@guilleiguaran
Copy link
Member

guilleiguaran commented Nov 30, 2017

That's a progress, now that webpack isn't emitting source maps with JS eval we can see that there are some other places where eval is used (e.g Vue templates).

Let's examine the errors:

vue.js:580 [Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

VM8602:1 Refused to connect to 'http://localhost:3035/sockjs-node/info?t=1512054456738' because it violates the following Content Security Policy directive: "default-src 'self' https:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Ok, looks like the better option, for now, is allow unsafe-eval (for Vue templates) and allow connecting http://localhost:3035 (to allow connecting to webpack-dev-server). I think something like this your content_security_policy.rb initializer file might work fine:

  if Rails.env.development?
    p.script_src  :self, :https, :unsafe_eval
    p.connect_src :self, :https, 'http://localhost:3035'
  else
    p.script_src  :self, :https
  end

Sorry about the issue, we just introduced CSP DSL and we have to update Webpacker code/guides to play nicer with those new Rails settings.

For more details about CSP see this PR and discussion: #31162

I'm going to close this issue since this is something we should handle better in Webpacker side.

@adrianpacala
Copy link
Contributor

@guilleiguaran I think it also needs :unsafe_inline, otherwise <% console %> seems to broken.

@guilleiguaran
Copy link
Member

guilleiguaran commented Nov 30, 2017

@adrianpacala that is good to know

@guilleiguaran
Copy link
Member

/cc @pixeltrix you might be interested in this thread

@adrianpacala
Copy link
Contributor

adrianpacala commented Nov 30, 2017

Also, when overriding setting connect_src you need to include self (and https?), otherwise CSP will block XHR requests.

The full snippet should look like this:

  if Rails.env.development?
    p.connect_src :self, :https, 'http://localhost:3035'
    p.script_src :self, :https, :unsafe_eval, :unsafe_inline
  else
    p.script_src :self, :https
  end

@guilleiguaran
Copy link
Member

guilleiguaran commented Nov 30, 2017

@adrianpacala thanks again, maybe the :unsafe_inline can be injected somehow by web-console middleware (so we have it enabled only when the console needs to be shown)?

Edit: a better option for this is using nonce

@guilleiguaran
Copy link
Member

Those issues seem relevant: #29260 rails/web-console#242

@psantos10
Copy link
Contributor Author

This solved the problem... no more errors in the console:

if Rails.env.development?
   p.connect_src :self, :https, 'ws://localhost:3035', 'http://localhost:3035'
   p.script_src :self, :https, :unsafe_eval, :unsafe_inline
 else
   p.script_src  :self, :https
 end

Thanks

@guilleiguaran
Copy link
Member

Closing this in favor of rails/webpacker#1057

@renchap
Copy link
Contributor

renchap commented Dec 1, 2017

Be careful with this config @psantos10, as you allow more things in dev than in production, you might end up with some code (using eval or inlined in your HTML) that works in dev, and not in production because blocked by the production CSP. It should be removed once Webpacker is patched to support the new CSP feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants