Violating Content Security Policy directive in environment Ember Cli

问题

I have a built a Music Player Component with ember consuming the SoundCloud Api

Suddenly in Chrome i start getting this error notification in my console anytime i play a song in my application plus the songs does not play.

See the error

Report Only] Refused to connect to 'https://ec-media.sndcdn.com/YEqcIen0Pkq6.128.mp3?f10880d39085a94a0418a7ef69…fe493d321fb2a6a96186dcb97beab08f3cea5ad8b42d543c3edc7371f0eb5b2b00ba96395e' because it violates the following Content Security Policy directive: "connect-src 'self' data: cf-media.sndcdn.com ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report".

It is complaining about the "connect-src 'self' data: cf-media.sndcdn.com ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report".*"

This is because after bit of research i have modified in environment.js the content security policy like this

contentSecurityPolicy: {
  // 'connect-src': "'self' data: https://cf-media.sndcdn.com",
  'connect-src': "'self' data: cf-media.sndcdn.com",
},

Before my change the problem was the same and this was the console log error

So my question is, how can i give these permission in order to not violate the Content Security Policy directive for 'connect-src'? What other action have i to take now?

Again the problem is only in Chrome

回答1:

It looks like your property is not well-formed. Try:

contentSecurityPolicy: {
    'connect-src': "'self' https://ec-media.sndcdn.com",
},

回答2:

To more clearly address the content security policy and avoid further conflicts with more subdomains, I suggest changing it to be:

contentSecurityPolicy: {
    'connect-src': "'self' https://*.sndcdn.com",
},

来源：https://stackoverflow.com/questions/35684348/violating-content-security-policy-directive-in-environment-ember-cli