TL;DR
Netlify provides free HTTPS but you configure headers and security settings via _headers file or netlify.toml. Environment variables go in the dashboard, and Netlify Functions need their own security considerations. These prompts cover secure Netlify configuration.
Security Headers via _headers
Copy this prompt to generate a complete _headers file for your Netlify site. Your AI will produce security headers (CSP, X-Frame-Options, Referrer-Policy), caching rules for static assets, and CORS configuration for API routes.
Configure _headers File
Add security headers to my Netlify site using _headers file.
Create _headers in your publish directory (usually public/ or dist/):
/* X-Frame-Options: DENY X-Content-Type-Options: nosniff Referrer-Policy: strict-origin-when-cross-origin Permissions-Policy: camera=(), microphone=(), geolocation=() Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; frame-ancestors 'none';
Cache static assets
/assets/* Cache-Control: public, max-age=31536000, immutable
Don't cache HTML
/*.html Cache-Control: public, max-age=0, must-revalidate
API routes might need different headers
/api/* Access-Control-Allow-Origin: https://mysite.com Access-Control-Allow-Methods: GET, POST, OPTIONS
Note: Netlify adds HSTS automatically for sites with HTTPS enabled.
Headers via netlify.toml
Use this prompt to configure security headers, redirects, and environment-specific settings in netlify.toml. Your AI will generate the TOML configuration with per-path header rules, SPA routing, HTTPS enforcement, and deploy context overrides.
Configure netlify.toml
Configure security headers in netlify.toml.
netlify.toml
[[headers]] for = "/*" headers.values X-Frame-Options = "DENY" X-Content-Type-Options = "nosniff" Referrer-Policy = "strict-origin-when-cross-origin" Permissions-Policy = "camera=(), microphone=(), geolocation=()"
[[headers]] for = "/assets/*" headers.values Cache-Control = "public, max-age=31536000, immutable"
Redirects for SPA
[[redirects]] from = "/*" to = "/index.html" status = 200
Force HTTPS redirect
[[redirects]] from = "http://example.com/*" to = "https://example.com/:splat" status = 301 force = true
Environment-specific config
context.production.environment NODE_ENV = "production"
context.deploy-preview.environment NODE_ENV = "preview"
Deploy previews are public by default: Anyone with the URL can access them. Use Netlify's password protection or branch deploy settings to restrict access to preview deployments containing sensitive features.
Environment Variables
Paste this prompt to get a step-by-step guide for securely managing Netlify environment variables. Your AI will explain scoping by deploy context (production vs preview), the difference between build-time and runtime variables, and how to keep secrets out of your client bundle.
Secure Environment Variables
Set up secure environment variables in Netlify.
Best practices:
- Use Netlify Dashboard for secrets: Site settings > Environment variables Never commit secrets to netlify.toml!
- Scope variables by context:
- Production: Real credentials
- Deploy Preview: Test credentials
- Branch deploy: Environment-specific
- Local development: .env file (gitignored)
- Build vs Runtime variables:
Build time: Available during build (can be baked into JS)
Runtime: Only available in Netlify Functions
// Build time - will be in client bundle! REACT_APP_API_URL=https://api.example.com
// Runtime only - safe for secrets DATABASE_URL=postgresql://... (only in Functions) - Don't expose secrets to frontend:
// Netlify Functions access process.env directly
exports.handler = async () => {
const secret = process.env.API_SECRET; // Safe
};
// Frontend code - DON'T use secrets here! - Using in netlify.toml (non-sensitive only): context.production.environment API_ENDPOINT = "https://api.example.com"
Netlify Functions Security
Copy this prompt to harden your Netlify Functions against abuse. Your AI will add HTTP method validation, origin checking, rate limiting patterns, input parsing, and proper security headers to your function responses.
Secure Netlify Functions
Secure my Netlify Functions from abuse.
// netlify/functions/api.js
exports.handler = async (event, context) => { // 1. Validate HTTP method if (event.httpMethod !== 'POST') { return { statusCode: 405, body: 'Method not allowed' }; }
// 2. Validate origin (CORS at function level) const origin = event.headers.origin; const allowedOrigins = 'https://mysite.com', 'https://www.mysite.com'; if (!allowedOrigins.includes(origin)) { return { statusCode: 403, body: 'Forbidden' }; }
// 3. Rate limiting with Netlify Blobs or external service // (Netlify doesn't have built-in rate limiting)
// 4. Validate input let body; try { body = JSON.parse(event.body); } catch { return { statusCode: 400, body: 'Invalid JSON' }; }
// 5. Use environment variables for secrets const apiKey = process.env.API_KEY; // Safe - server only
// 6. Set security headers on response return { statusCode: 200, headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': origin, }, body: JSON.stringify({ success: true }), }; };
Pro tip: Use Netlify's built-in forms carefully - they're powerful but can be abused. Enable spam filtering and consider using honeypot fields or reCAPTCHA for public forms.
How do I password protect my entire site?
Use Netlify's password protection feature (Pro plan) at Site settings > Access control > Password protection. For free plans, implement basic auth in a Netlify Function or use edge functions.
Are my Netlify Functions secure by default?
Functions are publicly accessible by default. Add authentication, input validation, and rate limiting. Environment variables are secure and only available server-side in Functions.
Further Reading
Want to understand the vulnerability before fixing it? These guides explain what's happening and why.
Audit Your Netlify Config
Scan your Netlify deployment for security misconfigurations.