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 '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;")




Comments

Popular posts from this blog

Angular cli ng command is not working

Problem : angular cli command  ng is not working

C:\Windows\System32>ng
'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

prefix=${APPDATA}\npm

warning: LF will be replaced by CRLF in

Problem :

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







Solution:

step1) open .gitconfig file

step2) paste the below code


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


How to remove entity in jhipster and create fresh entities

Problem Statement : Not able to delete jhipster entity and wanted to entities freshly

Solution :

Step 1) Open command prompt and point to the jhipster project root

Step 2) Run  jhipster remove-entity

Step 3) Run jhipster

Step 4) Then import new jdl  using below command

jhipster import-jdl jhipster-jdl.jh

Step 5 ) Then Run  mvnw


Still Problem  : One of the entity may not load data and shows 500 error

Drop the tables in h2 database and let and do mvnw again.

To connect to local database Goto -> Administration -->Database --> Connect