Vercel Deployment Security: 6 Settings Developers Always Miss

Introduction to Vercel Deployment Security

When deploying applications on Vercel, security is often an afterthought. However, missed security settings can lead to breaches and data exposure. To secure your Vercel app, you need to configure these 6 essential settings:

HTTP Strict Transport Security (HSTS): enables automatic HTTPS redirects,

Content Security Policy (CSP): defines allowed sources for web page content,

Cross-Origin Resource Sharing (CORS): controls access to web page resources,

Password Hashing: securely stores user passwords,

Environment Variable Protection: safeguards sensitive environment variables, and

Rate Limiting: prevents brute-force attacks.

The main question is: what are the essential Vercel deployment security settings that developers often miss? The answer is the 6 settings listed above.

HTTP Strict Transport Security (HSTS)

HSTS automatically redirects users from HTTP to HTTPS, preventing eavesdropping and man-in-the-middle attacks. To enable HSTS on Vercel, add the following code to your next.config.js file:

module.exports = {
  //...
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload',
          },
        ],
      },
    ]
  },
}

This sets the HSTS max-age to 2 years and includes subdomains.

Content Security Policy (CSP)

CSP defines allowed sources for web page content, such as scripts, styles, and images. A well-configured CSP can prevent cross-site scripting (XSS) attacks. To set up CSP on Vercel, add the following code to your next.config.js file:

module.exports = {
  //...
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' https://cdn.example.com; object-src 'none'",
          },
        ],
      },
    ]
  },
}

This allows scripts from the same origin and a specific CDN, while blocking object sources.

Cross-Origin Resource Sharing (CORS)

CORS controls access to web page resources, such as fonts and images, from other domains. To configure CORS on Vercel, add the following code to your next.config.js file:

module.exports = {
  //...
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: '*',
          },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET,HEAD,PUT,PATCH,POST,DELETE',
          },
        ],
      },
    ]
  },
}

This allows CORS requests from any origin and supports common HTTP methods.

Password Hashing and Environment Variable Protection

Password hashing securely stores user passwords, while environment variable protection safeguards sensitive variables. To hash passwords, use a library like bcrypt:

import bcrypt

def hash_password(password):
    salt = bcrypt.gensalt()
    hashed_password = bcrypt.hashpw(password.encode('utf-8'), salt)
    return hashed_password

For environment variable protection, use a secrets manager like Vercel's built-in Environment Variables feature.

Rate Limiting

Rate limiting prevents brute-force attacks by limiting the number of requests from a single IP address. To implement rate limiting on Vercel, use a library like express-rate-limit:

const rateLimit = require('express-rate-limit')

const limiter = rateLimit({
  windowMs: 15  60  1000, // 15 minutes
  max: 100, // limit each IP to 100 requests per window
})

// apply to all requests
app.use(limiter)

This limits each IP address to 100 requests per 15 minutes.

Quick Fix Checklist

[ ] Enable HTTP Strict Transport Security (HSTS) with a 2-year max-age

[ ] Configure Content Security Policy (CSP) to define allowed sources for web page content

[ ] Set up Cross-Origin Resource Sharing (CORS) to control access to web page resources

[ ] Use a library like bcrypt to hash user passwords

[ ] Protect sensitive environment variables using a secrets manager

[ ] Implement rate limiting to prevent brute-force attacks

Tools like SecuriSky can detect these security issues automatically, allowing you to focus on developing your application. By following these steps and using the right tools, you can ensure the security of your Vercel deployment.