Table of Contents
Implementing custom headers on Vercel is a crucial step to enhance the security of your web applications. Proper headers can prevent common vulnerabilities and ensure your site adheres to best security practices.
Understanding Custom Headers
Custom headers are HTTP headers that you can add to your server responses to control how browsers handle your website. They can prevent attacks such as cross-site scripting (XSS), clickjacking, and MIME-sniffing.
Configuring Headers on Vercel
Vercel allows you to define custom headers using the vercel.json configuration file. This file should be placed in the root of your project and can specify headers for specific routes or the entire site.
Creating the vercel.json File
Start by creating a vercel.json file in your project directory. Inside, you will define the headers you want to apply.
Sample Configuration for Security Headers
- Content-Security-Policy: Controls resources the browser is allowed to load.
- X-Frame-Options: Prevents your site from being embedded in iframes.
- X-Content-Type-Options: Stops MIME-sniffing attacks.
- Referrer-Policy: Manages the amount of referrer information sent.
Here is an example vercel.json configuration that adds these security headers:
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Content-Security-Policy", "value": "default-src 'self'" },
{ "key": "X-Frame-Options", "value": "DENY" },
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "Referrer-Policy", "value": "no-referrer" }
]
}
]
}
Applying and Testing Your Configuration
After creating or updating your vercel.json file, deploy your project to Vercel. You can verify that headers are correctly applied using browser developer tools or online header checkers.
Conclusion
Configuring custom security headers on Vercel is an effective way to protect your website from common vulnerabilities. By properly setting headers through the vercel.json file, you can significantly improve your site’s security posture.