Content-Security Policy

  • csp
  • security
  • html
  • web
  • policy
2 min read

Lately, I’ve been on a quest to elevate my Front-End Security skills, and one fascinating aspect I’ve delved into is Content-Security Policy (CSP). It’s like the low-hanging fruit of security that every developer can pluck to fortify their web applications.

In a nutshell, CSP is your website’s shield, and it’s composed of directives that tell the browser what’s safe to execute. These directives encompass a broad spectrum, from scripts and styles to form actions and more. You can explore all these directives and learn the nitty-gritty details over on the MDN Web Docs.

Now, the million-dollar question: How can you implement a CSP policy on your website? It’s actually quite straightforward. You have two primary options – you can either integrate it into your server’s response headers or embed it within a <meta> tag right in your HTML document.

Example

In the next sample we disable default source in order to avoid browser fallback loading using ‘default-src’ locations. In addition, we allow inline <script> and <style> tags because without SSR we would need to add hashes for maximum security. As well as, we allow data: as image source as defined in CSP source vales on MDN.

Content-Security-Policy
	default-src 'none';
	script-src 'self' 'unsafe-inline';
	style-src 'self' 'unsafe-inline';
	img-src 'self' data:;
	object-src 'none';
	base-uri 'self';
	form-action 'self';
	font-src 'self';
	connect-src 'self';
	frame-src 'self';
	frame-ancestors 'self'

Auto scanner

But wait, there’s more! To make your journey into Front-End Security even more exciting, there’s a handy tool you can use to test your application against well-known attack vectors – it’s called OWASP ZAP. Fire it up, let it loose on your application, and watch as it fearlessly explores each public endpoint, providing you with valuable recommendations.

Conclusion

Taking these steps can be a game-changer in the security of your web applications. So, dive into CSP, harness the power of OWASP ZAP, and take your Front-End Security to the next level!