A rotating card ring with almost no JS
How we built a rotating card carousel driven by CSS custom properties, responsive radius and count without JavaScript animation timelines.
The Blog
Marketing sites still benefit from HSTS, CSP, and Referrer-Policy. They signal trust, reduce XSS surface, and contribute to the "serious platform" positioning that enterprise prospects expect.
The headers
Security headers are HTTP response headers that tell the browser how to handle the page. Most developers associate them with web applications — login systems, payment flows, dashboards. But marketing sites benefit from them too.
HSTS (Strict-Transport-Security) tells the browser to always use HTTPS. Once set, the browser refuses to load the site over HTTP, even if someone types http:// manually or follows an old link. The preload directive gets the site into browser preload lists so the HTTPS enforcement starts from the very first visit.
Referrer-Policy controls what URL information is sent when a visitor clicks a link to another site. origin-when-cross-origin sends the full URL for internal navigation but only the domain for external links. This prevents leaking internal URL paths to third parties.
Content-Security-Policy (CSP) is an allowlist for what the page is permitted to load — scripts, styles, images, fonts, frames. If a script isn't on the allowlist, the browser blocks it. This is the primary defence against cross-site scripting (XSS) attacks, even on a marketing site with no login form.
The business case
Enterprise prospects evaluate vendors partly on how their digital presence is built. A site with proper security headers signals technical maturity. A site without them, or worse, with a permissive CSP that loads scripts from anywhere, signals the opposite.
Security scanners and procurement checklists check for these headers. If your site fails a basic security scan during a vendor evaluation, the conversation ends before it starts.
Beyond credibility, CSP provides real protection. Marketing sites aren't immune to XSS. Compromised third-party scripts, injected ads, or malicious browser extensions can modify page content. A restrictive CSP limits what can execute on the page to only what you've explicitly allowed.
Staging
Our security headers share a config file with another ops concern: keeping staging sites out of search engines. When the environment flag indicates the site isn't live, we add X-Robots-Tag: noindex to every response. Preview environments stay out of Google's index.
Both are set in next.config.ts headers. Security headers apply to every environment. The noindex header applies only when NEXT_PUBLIC_IS_LIVE is false. Same configuration surface, two different hygiene concerns.