Security Headers for Shopify Stores

What Are Security Headers?

Security headers are HTTP response headers that tell browsers how to behave when handling your website’s content. They’re invisible to your customers but provide critical protection against common web attacks like clickjacking, cross-site scripting (XSS), and data injection.

Think of security headers as instructions to your customers’ browsers: “Only load content from trusted sources,” “Never display this page inside another website’s frame,” and “Always use encrypted connections.”

Why Security Headers Matter for Shopify Merchants

Without proper security headers, attackers can:

• Embed your checkout in a fake site (clickjacking) to steal payment information
• Inject malicious scripts into your pages to capture customer data
• Downgrade connections from HTTPS to HTTP to intercept traffic
• Trick browsers into executing dangerous file types

For e-commerce, these attacks directly threaten customer trust and payment security.

Essential Security Headers

Content-Security-Policy (CSP)

Controls which resources (scripts, styles, images) can load on your pages.

What it prevents: Cross-site scripting (XSS) attacks where attackers inject malicious JavaScript into your site.

Example policy:

Content-Security-Policy: default-src 'self'; script-src 'self' cdn.shopify.com

This tells browsers to only load scripts from your domain and Shopify’s CDN—blocking any injected malicious scripts.

Strict-Transport-Security (HSTS)

Forces browsers to always use HTTPS connections.

What it prevents: Protocol downgrade attacks where attackers intercept the initial HTTP request before it redirects to HTTPS.

Recommended value:

Strict-Transport-Security: max-age=31536000; includeSubDomains

Once set, browsers will refuse to connect over HTTP for one year, even if users type http:// manually.

X-Frame-Options

Controls whether your site can be displayed inside frames or iframes.

What it prevents: Clickjacking attacks where your site is embedded in a malicious page with invisible overlays.

Recommended value:

X-Frame-Options: DENY

This completely prevents your site from being framed. Use SAMEORIGIN if you need to frame your own pages.

X-Content-Type-Options

Prevents browsers from guessing (MIME sniffing) the type of downloaded files.

What it prevents: Attacks where browsers execute malicious files disguised as harmless types.

Recommended value:

X-Content-Type-Options: nosniff

Referrer-Policy

Controls what information is sent in the Referrer header when users click links.

What it prevents: Leaking sensitive URLs, session tokens, or customer information to external sites.

Recommended value:

Referrer-Policy: strict-origin-when-cross-origin

Permissions-Policy

Controls which browser features (camera, microphone, geolocation) your site can use.

What it prevents: Malicious scripts from accessing device features without permission.

Example:

Permissions-Policy: camera=(), microphone=(), geolocation=()

Security Header Grades

Recon grades your security headers from A+ to F:

Grade	Description
A+	Excellent—all headers present and optimally configured
A	Very good—all critical headers present
B	Good—most headers present
C	Fair—some headers missing
D	Poor—many headers missing
F	Failing—critical headers missing

Target grade: A or higher for production Shopify stores.

Shopify and Security Headers

Built-in Shopify Headers

Shopify automatically sets some security headers for stores on their platform:

• Strict-Transport-Security (HSTS) is enabled automatically
• X-Content-Type-Options is set to nosniff
• Basic Content-Security-Policy for checkout pages

Limitations for Theme Customization

Standard Shopify themes have limited control over security headers because:

• Headers are set at the server level, not in theme code
• Shopify manages the hosting infrastructure
• Custom headers require Shopify Plus or headless setups

Hydrogen/Headless Stores

If you’re running a headless Shopify store with Hydrogen, you have full control:

import { createContentSecurityPolicy } from '@shopify/hydrogen';

const { nonce, header, NonceProvider } = createContentSecurityPolicy({
  defaultSrc: ["'self'"],
  scriptSrc: ["'self'", "cdn.shopify.com"],
});

Shopify Apps

If you’re building or using Shopify apps, they must set:

Content-Security-Policy: frame-ancestors https://[shop].myshopify.com https://admin.shopify.com

This allows the app to be embedded in the Shopify admin while preventing clickjacking.

Common Issues Recon Detects

Issue	Severity	Solution
No CSP header	High	Add Content-Security-Policy
CSP in report-only mode	Medium	Switch to enforcing mode after testing
Missing HSTS	High	Enable Strict-Transport-Security
X-Frame-Options missing	High	Add X-Frame-Options: DENY
Permissive CSP	Medium	Tighten script-src and other directives

How to Check Your Security Headers

1. Run a Recon scan to see which headers are present
2. Browser DevTools: Open Network tab, select your domain, view Response Headers
3. Online tools: SecurityHeaders.com provides quick checks

Implementing Security Headers

For Standard Shopify Stores

Limited options exist for standard Shopify stores:

1. Contact Shopify support for specific header requests
2. Use a CDN like Cloudflare to add headers at the edge
3. Consider Shopify Plus for more control

For Headless/Custom Setups

Add headers in your server configuration (Nginx, Apache) or application code.

Nginx example:

add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

For Cloudflare Users

Use Transform Rules or Workers to add headers:

1. Go to Rules > Transform Rules > Modify Response Header
2. Add rules for each security header
3. Apply to your Shopify domain

Best Practices

Start with Report-Only

For Content-Security-Policy, start with report-only mode:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

This logs violations without blocking content, letting you identify legitimate resources before enforcing.

Don’t Break Payment Processors

Ensure your CSP allows:

• Shopify’s payment processing domains
• Your payment gateway (Stripe, PayPal, etc.)
• Analytics and marketing tools

Test Thoroughly

Security headers can break functionality. Test:

• Checkout process
• Third-party apps and widgets
• Analytics tracking
• Marketing pixels

How Recon Helps

Recon monitors your security headers by:

• Scanning all your domains and subdomains
• Grading your header configuration
• Identifying missing or misconfigured headers
• Providing specific recommendations for improvement
• Tracking changes over time

FAQ

Q: Will adding security headers slow down my store?

A: No. Security headers add negligible overhead—they’re just a few extra bytes in each response.

Q: Can security headers break my Shopify store?

A: Overly strict headers can block legitimate resources. On standard Shopify, the platform manages this. For custom implementations, test thoroughly before deploying.

Q: Why does my store get a low grade even on Shopify’s platform?

A: Shopify provides baseline security but doesn’t implement all optional headers. Using Cloudflare or a headless setup gives you more control.

Q: Is an A+ grade necessary?

A: For most Shopify stores, an A or B grade is acceptable. Focus first on the critical headers (HSTS, X-Frame-Options, X-Content-Type-Options) before optimizing for A+.

External Resources

• OWASP Secure Headers Project
• MDN Web Docs: HTTP Headers
• Content Security Policy Reference