Skip to main content

Images Not Loading In Angular8 App With Jhipster And Heroku

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 '' because it violates the following Content Security Policy directive: "img-src 'self' data:".

4.74bde7f4e8be11e69d6d.chunk.js:1 Refused to load the script '' 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 .

            .contentSecurityPolicy("default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:")
            .contentSecurityPolicy("script-src 'self' 'unsafe-eval' 'unsafe-inline';")


Popular posts from this blog

Angular cli ng command is not working

Problem : angular cli command  ng is not working

'ng' is not recognized as an internal or external command,
operable program or batch file.

Solution :

update .npmrc file at C:\Users\{USERNAME}
with the below line


warning: LF will be replaced by CRLF in

Problem :

The file will have its original line endings in your working directory


step1) open .gitconfig file

step2) paste the below code

autocrlf = false
[filter "lfs"]
required = true
clean = git-lfs clean -- %f
smudge = git-lfs smudge -- %f
process = git-lfs filter-process

Download file with extension for internet explorer and chrome using javascript

SOLVED Problem Statement :
Internet explorer download file does not shows file extension

Solution : java script code that append file type extension

function save() { var fileUrl = "${fileUrl}"; var fileName = "${fileName}"; var mimeType = "${mimeType}"; var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/), ie11 = navigator.userAgent .match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/), ieEDGE = navigator.userAgent .match(/Edge/g), ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1))); if (ie && ieVer < 10) { console.log("No blobs on IE ver<10"); return; } if (ieVer > -1) { console.log(" blobs on IE ver>10"); //,"_self");        var xhr = new XMLHttpRequest();'GET', fileUrl, true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var myBlob = this.response; downloadFileForIE(myBlob, fileName, mimeType); } }; xh…