Hi Everyone, today I am gonna write about CSP in JHipster or say Content Security Policy in JHipster. From now I will be writing more about Jhipster, so this is the first post in the series. So let start. There was some issue while updating one of our applications to the latest version. So I tried looking over my code again and again. So I got error finally in the console like; The script was blocked due to security permissions. I looked over again and got to know that I need to add some headers in HTML Index to make the same work But it did; not work. So trying over many resources did not work. So looking over the conversation on Github repo; I found something that I need to fix the code. But before starting let us know what is CSP or Content Security Policy.
Content Security Policy
So according to Mozilla Developers Site, CSP is is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything; from data, theft to site defacement to the distribution of malware.
CSP has a fully backward compatible design. Browsers that don’t support it still work with servers that implement it, and vice-versa: browsers that don’t support CSP simply ignore it, functioning, as usual, defaulting to the standard same-origin policy for web content. If the site doesn’t offer the CSP header, browsers likewise use the standard same-origin policy.
To enable CSP, you need to configure your webserver to return the Content-Security-Policy HTTP header (sometimes you will see mentions of the X-Content-Security-Policy header, but that’s an older version and you don’t need to specify it anymore).
Alternatively, the element can be used to configure a policy, for example:
There are various Resources we use on a web page like Media, Script, Image, so for allowing these we need to use directives.
Some common directives are listed below (Check others here) :
default-src – Serves as a fallback for the other fetch directives.
font-src – Specifies valid sources for fonts loaded using @font-face.
frame-src – Specifies valid sources for nested browsing contexts loading using elements such as and .
img-src – Specifies valid sources of images and favicons.
media-src Specifies valid sources for loading media using the <audio> , <video> and <track> elements.
object-src Specifies valid sources for the <object>, <embed>, and <applet> elements.
So let get back to the main issue.
CSP Headers in JHipster (Spring Boot)
So starting like around Jhipster 5.0.x, the property CSP headers added to security configuration. You can find the same in the Project folder > src > main > java > package > config > SecurityConfiguration.java .
/**/************
Content Security policy Jhipster
**********/
/* Use directives as per your requirement like image-src and default-src for defaults of all*/
// Single line CSP
.headers()
.contentSecurityPolicy("default-src 'self';")
// Multi Line CSP joined by and
.headers()
.contentSecurityPolicy("default-src 'self';")
.and()
.contentSecurityPolicy("script-src 'self' 'unsafe-eval' 'unsafe-inline' https://www.gstatic.com https://www.google.com http://www.google-analytics.com https://maps.googleapis.com https://storage.googleapis.com;")
* Insert your code here
*/
So above you can see Example for the same. This way you can add CSP based on multiple directives in JHipster like image-src for images from URL or data: src, script-src like the inline script, external script.
Bonus
You will be thinking of what remains so let me tell you here is a bonus, the CSP evaluator. So before applying directly, you can use the tool to test if the CSP is valid or not. You can also get warnings and info on the same, with examples to start if you do not know, where to start. Here is the link :
I hope you like the post, keep checking for more coming. Also, feel free to share your views in the comments below. Also share with your friends, as sharing is caring. Keep checking back.
Originally published at Tekraze.com
Top comments (0)