IT Technical Solutions

Problem statement:
Images are not able to view in my app after I have deployed jhipster springboot application in heroku

Error Message I am getting in browser console as

Refused to load the image 'http://youtubesecrets.com/images/banners/468x60-b.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data:".

4.74bde7f4e8be11e69d6d.chunk.js:1 Refused to load the script 'https://www.paypalobjects.com/api/checkout.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.





Solution :
Add the content security policy headers in spring security class as below .

.headers()
            .contentSecurityPolicy("default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:")
            .and()
            .contentSecurityPolicy("script-src 'self' 'unsafe-eval' 'unsafe-inline' http://youtubesecrets.com https://www.paypalobjects.com https://www.gstatic.com https://www.google.com http://www.google-analytics.com https://maps.googleapis.com https://storage.googleapis.com;")