Secure HTTP Headers Best Practices for Magento &

Introduction

Even the most robust e‑commerce platforms can be vulnerable if the underlying HTTP response headers are misconfigured. Proper security headers give browsers explicit instructions on how to handle content, dramatically reducing attack vectors like click‑jacking, MIME‑type sniffing, and XSS. Search engines also factor site security into rankings, making header hardening a dual benefit for safety and SEO.

1. Core Security Headers

Header	Purpose	Recommended Value
Strict‑Transport‑Security (HSTS)	Enforces HTTPS for all future requests.	`max-age=31536000; includeSubDomains; preload`
X‑Content‑Type‑Options	Prevents MIME type sniffing.	`nosniff`
X‑Frame‑Options	Stops click‑jacking by controlling framing.	`SAMEORIGIN`
Referrer‑Policy	Controls referrer information sent to other sites.	`strict-origin-when-cross-origin`
Content‑Security‑Policy (CSP)	Restricts which sources can load scripts, styles, etc.	See detailed CSP example below.
Permissions‑Policy	Fine‑grained control over browser features (e.g., geolocation).	`geolocation=(), microphone=()`

2. Magento 2 Implementation

2.1 Enable HSTS via `.htaccess`

Add the following lines to pub/.htaccess (or the Apache vhost if using Nginx, adjust accordingly):

# Enforce HTTPS for one year and preload
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"
Header set Referrer-Policy "strict-origin-when-cross-origin"

2.2 Content Security Policy

Create a module Vendor/SecureHeaders with etc/csp_whitelist.xml:

<?xml version="1.0"?>
<CspWhitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policy id="default-src"><value id="self" type="host">'self'</value></policy>
    <policy id="script-src">
        <value id="self" type="host">'self'</value>
        <value id="google-analytics" type="host">https://www.google-analytics.com</value>
    </policy>
    <policy id="style-src">
        <value id="self" type="host">'self'</value>
        <value id="google-fonts" type="host">https://fonts.googleapis.com</value>
        <value id="font-src" type="host">https://fonts.gstatic.com</value>
    </policy>
    <policy id="img-src"><value id="self" type="host">'self' data:</value></policy>
</CspWhitelist>

Run bin/magento setup:upgrade && bin/magento cache:flush. ### 2.3 Permissions‑Policy via Nginx If using Nginx, edit the site config:

add_header Permissions-Policy "geolocation=(), microphone=()";

3. Shopify Implementation

Shopify’s hosted environment limits direct header manipulation, but you can inject most headers via theme.liquid using the {{ 'header' | asset_url }} trick or through Shopify Functions (beta).

3.1 Adding Headers via Liquid

In layout/theme.liquid add:

{% if request.host == 'store.example.com' %}
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://www.google-analytics.com; style-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; img-src 'self' data:;" />
{% endif %}

Shopify automatically includes X‑Frame‑Options and X‑Content‑Type‑Options. To set HSTS, enable SSL in the admin – Shopify provisions a certificate with HSTS preloaded.

3.2 Using Shopify Functions for Edge Headers (Beta)

Create a function that adds Permissions-Policy:

export default async function handler(request) {
  const response = await fetch(request);
  response.headers.set('Permissions-Policy', 'geolocation=(), microphone=()');
  return response;
}

Deploy via shopify function push.

4. SEO Benefits of Hardened Headers

Trust Signals: Browsers display a padlock with extra information when HSTS and CSP are present, improving user confidence and click‑through rates.
Reduced Crawl Errors: Proper CSP prevents accidental script injection that could break page rendering for Googlebot.
Core Web Vitals: By eliminating unintended resource loads, the page renders faster, improving LCP and FID scores.

5. Validation Checklist

Verify HSTS header with curl -I https://example.com | grep strict-transport-security.
Confirm CSP is present and does not block essential scripts (csp-evaluator tool).
Test X‑Frame‑Options using https://www.frameguard.org/.
Run Lighthouse; the Secure Headers audit should pass with no warnings.
Check Google Search Console for security issues after deployment.

6. Common Pitfalls & Fixes

Pitfall	Symptom	Fix
Over‑restrictive CSP blocks Google Analytics.	No analytics data, console errors.	Add `https://www.google-analytics.com` to `script-src`.
Missing `preload` in HSTS.	Browsers may not include your domain in the preload list.	Submit the domain to `https://hstspreload.org/` after enabling `preload`.
Inconsistent header values across subdomains.	Some pages still served over HTTP.	Ensure all subdomains inherit the same vhost/nginx config.

7. Call‑to‑Action

Secure headers are a foundational step toward a trustworthy, SEO‑friendly e‑commerce site. Ready to harden your Magento or Shopify storefront? Click the “Start a project” button in the MODRACX portfolio, and let’s implement bullet‑proof security headers together.

Kenneth D’Silva – Magento & Shopify specialist, MODRACX

Secure HTTP Headers Best Practices for Magento & Shopify