Security Configuration

Security Configuration

This document outlines security recommendations for the Wesley Matlock portfolio website.

GitHub Pages Security Headers

GitHub Pages doesn’t support custom headers directly. To add security headers, you have two options:

If you’re using Cloudflare as your DNS provider, add these headers in the Workers or Transform Rules section:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()

Option 2: Using Netlify or Vercel

If you migrate to Netlify or Vercel, create a _headers file in the root:

/*
  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: strict-origin-when-cross-origin
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  Permissions-Policy: geolocation=(), microphone=(), camera=()

Content Security Policy (CSP)

Add this meta tag to _layouts/default.html for basic CSP protection:

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://formspree.io;
  style-src 'self' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' data: https:;
  connect-src 'self' https://formspree.io https://www.google-analytics.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self' https://formspree.io;
">

Note: This CSP is compatible with the current site architecture (external CSS and JS, Google Fonts, Formspree).

Security Best Practices Implemented

✅ External CSS and JavaScript - All styles and scripts are in external files (no inline code) ✅ Form Spam Protection - Honeypot field in contact form ✅ Input Validation - Client-side validation with pattern matching ✅ HTTPS - Enforced via GitHub Pages settings ✅ Google Analytics Privacy - IP anonymization enabled ✅ External Links - rel="noopener noreferrer" on external links ✅ Accessible Forms - ARIA attributes and proper labels

  1. Enable HTTPS in GitHub Pages Settings
    • Go to Repository Settings → Pages
    • Check “Enforce HTTPS”
  2. Update Google Analytics ID
    • Migrate from Universal Analytics (UA-XXXXXX) to GA4 (G-XXXXXXXXXX)
    • Update _config.yml with new measurement ID
  3. Regular Dependency Updates
    • Keep Jekyll and gems updated: bundle update
    • Monitor GitHub security alerts
  4. Environment Variables
    • Never commit API keys or secrets
    • Use GitHub Secrets for sensitive data in Actions

Security Checklist

  • HTTPS enforced in GitHub Pages settings
  • Security headers configured (via Cloudflare/Netlify)
  • CSP meta tag added to default.html
  • Google Analytics updated to GA4
  • Form spam protection tested
  • All dependencies updated
  • No sensitive data in repository

Reporting Security Issues

If you discover a security vulnerability, please email [your-email@example.com] instead of using the public issue tracker.

References