So I wrote an article to give my feedback about vercel and one of my favorite Rainbow points was the vercel.json which is a kind of configuration file but here I used it for the security headers.
In my last project, I tested our website with https://securityheaders.com/ which gives an insight into missing headers that can be used to threaten your website.
The test was a D 😫
Fix Missing Headers
1- Content Security Policy: in simple words, it tells the browser what it is allowed to execute on the website and whatnot and detects certain types of attacks, like XSS attacks and content injections. These attacks can be used for various purposes, such as data theft, site defacement, or malware distribution. For more details
2- X-FrameOptions: it will protect your website from clickjacking or in simple words click diversion. For more details
3- X-Content-Type-Options: it is a technique used by web browsers to determine an asset’s file format, and if it is not set correctly it can allow users to upload data to the server and you can guess what can happen.For more details.
4-Referrer Policy: “is used to determine what information is sent along with the requests. … Technically, this is “no-referrer-when-downgrade,” which means it will strip the referral when downgrading to an insecure request like switching from HTTPS to HTTP. You don’t have to use the default setting, though” Source
5- Permission Policy: will allow a site to enable or disable certain browser features and APIs
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Referrer-Policy",
"value": "no-referrer-when-downgrade"
},
{
"key": "X-Content-Type-Options",
"value": "nosniff"
},
{
"key": "X-Frame-Options",
"value": "DENY"
},
{
"key": "X-XSS-Protection",
"value": "1; mode=block"
},
{
"key": "X-Robots-Tag",
"value": "noindex"
}
]
}
]
}As you see in the vercel.json file I put the headers and rules needed and here is the result 😃
Excuse my English
Peace from Tunisia ✌️
