PixelPilot: Instructions file for GitHub Copilot

Security Headers Skill

Configure essential security headers to protect your application.

---

REQUIRED SECURITY HEADERS

Header	Purpose	Priority
Content-Security-Policy	Prevent XSS, injection attacks	Critical
Strict-Transport-Security	Force HTTPS	Critical
X-Content-Type-Options	Prevent MIME sniffing	High
X-Frame-Options	Prevent clickjacking	High
Referrer-Policy	Control referrer info	Medium
Permissions-Policy	Restrict browser features	Medium

---

CONTENT-SECURITY-POLICY (CSP)

Start with Report-Only

Content-Security-Policy-Report-Only: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self';
  report-uri /api/csp-report;

Production CSP (Strict)

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net https://unpkg.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' data: https://images.unsplash.com https://picsum.photos;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://api.example.com;
  frame-ancestors 'none';
  form-action 'self';
  base-uri 'self';
  upgrade-insecure-requests;

CSP with Nonces (for inline scripts)

<!-- Server generates unique nonce per request -->
<script nonce="abc123">
  // Inline script allowed because nonce matches
</script>

Content-Security-Policy: script-src 'self' 'nonce-abc123';

---

NEXT.JS CONFIGURATION

next.config.js

// next.config.js
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: [
      "default-src 'self'",
      "script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cdn.jsdelivr.net https://unpkg.com",
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
      "img-src 'self' data: blob: https://images.unsplash.com https://picsum.photos",
      "font-src 'self' https://fonts.gstatic.com",
      "connect-src 'self' https://api.example.com wss:",
      "frame-ancestors 'none'",
      "form-action 'self'",
      "base-uri 'self'",
    ].join('; '),
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=31536000; includeSubDomains; preload',
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY',
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block',
  },
  {
    key: 'Referrer-Policy',
    value: 'strict-origin-when-cross-origin',
  },
  {
    key: 'Permissions-Policy',
    value: [
      'camera=()',
      'microphone=()',
      'geolocation=()',
      'interest-cohort=()',
    ].join(', '),
  },
];

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        // Apply to all routes
        source: '/:path*',
        headers: securityHeaders,
      },
    ];
  },
};

module.exports = nextConfig;