Security Hardening for Shopify Apps

This skill covers essential security practices for building secure Shopify apps. Security is non-negotiable when handling merchant data, customer PII, and payment information.

Why Security Matters for Shopify Apps

• Merchant Trust: Apps handle sensitive business data

• Customer PII: Access to customer names, emails, addresses

• Payment Data: Some apps process or display financial information

• App Store Requirements: Shopify reviews apps for security compliance

• Legal Liability: GDPR, CCPA, and data protection regulations apply

1. Authentication & Authorization

Session Management

// app/routes/app.tsx - Secure session handling import { authenticate } from '~/shopify.server';

export async function loader({ request }: LoaderFunctionArgs) { // ALWAYS authenticate every request const { admin, session } = await authenticate.admin(request);

// Session contains sensitive data - never expose to client return json({ shop: session.shop, // DON'T return: accessToken, session object directly }); }

Route Protection Pattern

// app/lib/auth.server.ts import { authenticate } from '~/shopify.server'; import { redirect } from '@remix-run/node';

export async function requireAuth(request: Request) { try { return await authenticate.admin(request); } catch (error) { // Log for monitoring, don't expose details console.error('Authentication failed:', error); throw redirect('/auth/login'); } }

// Protect all app routes // app/routes/app._index.tsx export async function loader({ request }: LoaderFunctionArgs) { const { admin, session } = await requireAuth(request); // ... rest of loader }

API Route Protection

// app/routes/api.products.tsx import { json, type ActionFunctionArgs } from '@remix-run/node'; import { authenticate } from '~/shopify.server';

export async function action({ request }: ActionFunctionArgs) { // ALWAYS authenticate API routes const { admin, session } = await authenticate.admin(request);

// Validate request method if (request.method !== 'POST') { return json({ error: 'Method not allowed' }, { status: 405 }); }

// ... handle request }

// Block unauthenticated GET requests export async function loader({ request }: LoaderFunctionArgs) { await authenticate.admin(request); return json({ error: 'Use POST' }, { status: 405 }); }

2. Webhook Security

HMAC Verification (Critical)

// app/routes/webhooks.tsx import crypto from 'crypto'; import { json, type ActionFunctionArgs } from '@remix-run/node';

export async function action({ request }: ActionFunctionArgs) { // Get raw body for HMAC verification const { topic, session, admin, payload } = await authenticate.webhook(request)

// Process webhook... return json({ success: true }); }

2. Input Validation & Sanitization

Never Trust User Input

// app/lib/validation.server.ts import { z } from 'zod'; import DOMPurify from 'isomorphic-dompurify';

// Sanitize HTML content export function sanitizeHtml(dirty: string): string { return DOMPurify.sanitize(dirty, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'], ALLOWED_ATTR: ['href'], }); }

// Validate Shopify GID format export const shopifyGidSchema = z .string() .regex( /^gid://shopify/[A-Za-z]+/\d+$/, 'Invalid Shopify GID format' );

// Validate and sanitize product input export const productInputSchema = z.object({ title: z .string() .min(1) .max(255) .transform(val => val.trim()),

description: z .string() .max(5000) .transform(sanitizeHtml) .optional(),

vendor: z .string() .max(255) .transform(val => val.trim()) .optional(),

tags: z .array(z.string().max(50).transform(val => val.trim())) .max(100) .optional(), });

SQL Injection Prevention

// ALWAYS use parameterized queries with Prisma // app/services/product.server.ts

// GOOD - Parameterized query (Prisma handles escaping) export async function findProducts(shop: string, search: string) { return db.product.findMany({ where: { shop, title: { contains: search, // Prisma escapes this automatically mode: 'insensitive', }, }, }); }

// BAD - Never do this! // const products = await db.$queryRaw// SELECT * FROM products WHERE title LIKE '%${search}%' //;

// If you MUST use raw queries, use Prisma.sql export async function rawSearch(shop: string, search: string) { return db.$queryRaw SELECT * FROM products WHERE shop = ${shop} AND title ILIKE ${%${search}%} ; // Prisma.sql handles escaping }

Command Injection Prevention

// app/services/export.server.ts import { execFile } from 'child_process'; import { promisify } from 'util';

const execFileAsync = promisify(execFile);

// GOOD - Use execFile with arguments array export async function generatePdf(templatePath: string, outputPath: string) { // Validate paths if (!templatePath.startsWith('/app/templates/')) { throw new Error('Invalid template path'); }

// execFile doesn't use shell, so command injection is not possible await execFileAsync('wkhtmltopdf', [ '--quiet', templatePath, outputPath, ]); }

// BAD - Never use exec with user input // exec(wkhtmltopdf ${templatePath} ${outputPath}); // VULNERABLE!

4. XSS Prevention

React/Remix Built-in Protection

// React automatically escapes content - this is SAFE function ProductTitle({ title }: { title: string }) { return <h1>{title}</h1>; // Escaped automatically }

// DANGER - dangerouslySetInnerHTML function ProductDescription({ html }: { html: string }) { // Only use with sanitized content! const sanitized = DOMPurify.sanitize(html);

return ( <div dangerouslySetInnerHTML={{ __html: sanitized }} /> ); }

Content Security Policy

// app/entry.server.tsx import { renderToString } from 'react-dom/server'; import { RemixServer } from '@remix-run/react';

export default async function handleRequest( request: Request, responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext ) { const markup = renderToString( <RemixServer context={remixContext} url={request.url} /> );

// Set security headers responseHeaders.set('Content-Type', 'text/html'); responseHeaders.set( 'Content-Security-Policy', [ "default-src 'self'", "script-src 'self' https://cdn.shopify.com", "style-src 'self' 'unsafe-inline' https://cdn.shopify.com", "img-src 'self' data: https://cdn.shopify.com https://.shopifycdn.com", "connect-src 'self' https://.shopify.com", "frame-ancestors https://*.myshopify.com https://admin.shopify.com", ].join('; ') );

return new Response('<!DOCTYPE html>' + markup, { status: responseStatusCode, headers: responseHeaders, }); }

5. Data Protection

Environment Variables Security

// .env - NEVER commit this file SHOPIFY_API_KEY=your_api_key SHOPIFY_API_SECRET=your_api_secret DATABASE_URL=postgresql://user:pass@host:5432/db ENCRYPTION_KEY=your_32_byte_encryption_key

// app/lib/env.server.ts import { z } from 'zod';

const envSchema = z.object({ SHOPIFY_API_KEY: z.string().min(1), SHOPIFY_API_SECRET: z.string().min(1), DATABASE_URL: z.string().url(), ENCRYPTION_KEY: z.string().length(32), NODE_ENV: z.enum(['development', 'production', 'test']), });

// Validate at startup export const env = envSchema.parse(process.env);

// NEVER log secrets console.log('Starting app with API key:', env.SHOPIFY_API_KEY.slice(0, 4) + '...');

Encrypting Sensitive Data

// app/lib/encryption.server.ts import crypto from 'crypto';

const ALGORITHM = 'aes-256-gcm'; const IV_LENGTH = 16; const AUTH_TAG_LENGTH = 16; const ENCRYPTION_KEY = Buffer.from(process.env.ENCRYPTION_KEY!, 'hex');

export function encrypt(plaintext: string): string { const iv = crypto.randomBytes(IV_LENGTH); const cipher = crypto.createCipheriv(ALGORITHM, ENCRYPTION_KEY, iv);

let encrypted = cipher.update(plaintext, 'utf8', 'hex'); encrypted += cipher.final('hex');

const authTag = cipher.getAuthTag();

// Return iv:authTag:encrypted return ${iv.toString('hex')}:${authTag.toString('hex')}:${encrypted}; }

export function decrypt(ciphertext: string): string { const [ivHex, authTagHex, encrypted] = ciphertext.split(':');

const iv = Buffer.from(ivHex, 'hex'); const authTag = Buffer.from(authTagHex, 'hex');

const decipher = crypto.createDecipheriv(ALGORITHM, ENCRYPTION_KEY, iv); decipher.setAuthTag(authTag);

let decrypted = decipher.update(encrypted, 'hex', 'utf8'); decrypted += decipher.final('utf8');

return decrypted; }

// Usage: Encrypt sensitive metafield values export async function storeSecureMetafield( admin: AdminApiClient, ownerId: string, key: string, value: string ) { const encryptedValue = encrypt(value);

return admin.graphql( mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) { metafieldsSet(metafields: $metafields) { metafields { id } userErrors { field message } } } , { variables: { metafields: [{ ownerId, namespace: 'app_secure', key, value: encryptedValue, type: 'single_line_text_field', }], }, }); }

Data Retention & Deletion

// app/services/gdpr.server.ts import { db } from '/db.server'; import { encrypt, decrypt } from '/lib/encryption.server';

// Handle customers/data_request webhook export async function handleDataRequest(shop: string, customerId: string) { const customerData = await db.customerData.findMany({ where: { shop, customerId }, });

// Decrypt sensitive fields before returning return customerData.map(record => ({ ...record, email: record.encryptedEmail ? decrypt(record.encryptedEmail) : null, phone: record.encryptedPhone ? decrypt(record.encryptedPhone) : null, })); }

// Handle customers/redact webhook export async function handleCustomerRedact(shop: string, customerId: string) { // Delete all customer data await db.customerData.deleteMany({ where: { shop, customerId }, });

// Log for compliance await db.auditLog.create({ data: { shop, action: 'customer_redact', targetId: customerId, timestamp: new Date(), }, }); }

// Handle shop/redact webhook (app uninstall + 48h) export async function handleShopRedact(shop: string) { // Delete ALL shop data await db.$transaction([ db.product.deleteMany({ where: { shop } }), db.order.deleteMany({ where: { shop } }), db.customer.deleteMany({ where: { shop } }), db.session.deleteMany({ where: { shop } }), db.settings.deleteMany({ where: { shop } }), ]);

console.log(Shop data redacted: ${shop}); }

6. Rate Limiting & DoS Prevention

Request Rate Limiting

// app/lib/rate-limit.server.ts import { LRUCache } from 'lru-cache';

interface RateLimitEntry { count: number; resetAt: number; }

const cache = new LRUCache<string, RateLimitEntry>({ max: 10000, // Max entries ttl: 60000, // 1 minute TTL });

interface RateLimitOptions { maxRequests: number; windowMs: number; }

export function rateLimit( identifier: string, options: RateLimitOptions = { maxRequests: 100, windowMs: 60000 } ): { allowed: boolean; remaining: number; resetAt: number } { const now = Date.now(); const entry = cache.get(identifier);

if (!entry || now > entry.resetAt) { // New window const newEntry = { count: 1, resetAt: now + options.windowMs, }; cache.set(identifier, newEntry); return { allowed: true, remaining: options.maxRequests - 1, resetAt: newEntry.resetAt, }; }

if (entry.count >= options.maxRequests) { return { allowed: false, remaining: 0, resetAt: entry.resetAt, }; }

entry.count++; cache.set(identifier, entry);

return { allowed: true, remaining: options.maxRequests - entry.count, resetAt: entry.resetAt, }; }

// Usage in routes export async function action({ request }: ActionFunctionArgs) { const { session } = await authenticate.admin(request);

const { allowed, remaining, resetAt } = rateLimit(session.shop, { maxRequests: 50, windowMs: 60000, });

if (!allowed) { return json( { error: 'Too many requests' }, { status: 429, headers: { 'Retry-After': String(Math.ceil((resetAt - Date.now()) / 1000)), 'X-RateLimit-Remaining': '0', }, } ); }

// Process request... }

7. Secure Headers

// app/lib/security-headers.server.ts export const securityHeaders = { // Prevent clickjacking (Shopify embedded apps need specific frame-ancestors) 'X-Frame-Options': 'DENY', // For non-embedded pages

// Prevent MIME type sniffing 'X-Content-Type-Options': 'nosniff',

// XSS Protection (legacy, but still useful) 'X-XSS-Protection': '1; mode=block',

// Referrer policy 'Referrer-Policy': 'strict-origin-when-cross-origin',

// Permissions policy 'Permissions-Policy': 'camera=(), microphone=(), geolocation=()',

// HSTS (only in production) ...(process.env.NODE_ENV === 'production' && { 'Strict-Transport-Security': 'max-age=31536000; includeSubDomains', }), };

// Apply in entry.server.tsx Object.entries(securityHeaders).forEach(([key, value]) => { responseHeaders.set(key, value); });

8. Logging & Monitoring

Secure Logging Practices

// app/lib/logger.server.ts import pino from 'pino';

const logger = pino({ level: process.env.LOG_LEVEL || 'info', redact: { // Never log these fields paths: [ 'accessToken', 'password', 'secret', 'apiKey', 'authorization', '.accessToken', '.password', 'headers.authorization', 'headers.x-shopify-access-token', ], censor: '[REDACTED]', }, });

export { logger };

// Usage logger.info({ shop: session.shop, action: 'product_created' }, 'Product created');

// DON'T do this // logger.info({ session }); // May leak accessToken!

Security Event Logging

// app/lib/security-events.server.ts import { logger } from './logger.server'; import { db } from '~/db.server';

export async function logSecurityEvent( event: { type: 'auth_failure' | 'rate_limit' | 'suspicious_activity' | 'data_access'; shop?: string; ip?: string; userAgent?: string; details: Record<string, unknown>; } ) { // Log to application logs logger.warn({ event }, Security event: ${event.type});

// Store in database for audit trail await db.securityEvent.create({ data: { type: event.type, shop: event.shop, ip: event.ip, userAgent: event.userAgent, details: JSON.stringify(event.details), timestamp: new Date(), }, });

// Alert on critical events (integrate with your alerting system) if (event.type === 'suspicious_activity') { // Send alert to Slack, PagerDuty, etc. } }

9. Security Checklist

Before Deployment

• All routes authenticated with authenticate.admin()

• Webhook HMAC verification implemented

• Input validation on all user inputs (Zod schemas)

• No secrets in code or logs

• Environment variables validated at startup

• Rate limiting on API endpoints

• Security headers configured

• CSP configured for embedded app

• GDPR webhooks implemented (data_request, redact)

Regular Audits

• Dependency audit: npm audit

• Check for outdated packages: npm outdated

• Review access logs for anomalies

• Test webhook verification

• Verify encryption keys are rotated periodically

• Review and remove unused API scopes

Shopify-Specific

• Only request necessary API scopes

• Implement app proxy authentication if used

• Handle app/uninstalled webhook to clean up data

• Implement session token verification for App Bridge

• Test with Shopify's security review checklist

Anti-Patterns to Avoid

• DON'T store access tokens in localStorage or cookies

• DON'T log full request/response bodies

• DON'T use eval() or Function() constructor

• DON'T trust client-side validation alone

• DON'T hardcode secrets in source code

• DON'T disable HTTPS in production

• DON'T ignore security warnings from npm audit

• DON'T use outdated dependencies with known vulnerabilities