Add a Content Security Policy

Learn how to implement a Content Security Policy with vendor scripts in your Web Payments SDK integration.

A Content Security Policy (CSP) is a critical security feature that helps protect your Web Payments SDK integration from various attacks, specifically cross-site scripting (XSS) attacks. To comply with the latest PCI DDS security requirements, your application must provide a CSP vendor script for a supported payment method, so that the Web Payments SDK can securely process payments through the payment method, and enable the CSP to protect your application from external scripting attacks.

CSP provides several key security benefits:

• Controls which resources (scripts, styles, images) can load
• Specifies allowed origins for content
• Prevents malicious script injection
• Manages secure communication with payment endpoints

• Web Payments SDK installed and integrate with an application
• Access to modify your application's headers
• An HTTPS-enabled environment for development

If your application deploys a Content Security Policy (CSP) with the Web Payments SDK, you must enable the following CSP directives to add an additional security layer.

1. Modify the headers.

   In index.html, add the CSP meta tag or header to your application:

   For Sandbox Environment:

   <meta http-equiv="Content-Security-Policy" content="
       default-src 'self';
       script-src 'self' https://sandbox.web.squarecdn.com;
       frame-src 'self' https://sandbox.web.squarecdn.com;
       connect-src 'self' https://sandbox.web.squarecdn.com;
       style-src 'self' 'unsafe-inline';">

   For Production:

   <meta http-equiv="Content-Security-Policy" content="
       default-src 'self';
       script-src 'self' https://web.squarecdn.com;
       frame-src 'self' https://web.squarecdn.com;
       connect-src 'self' https://web.squarecdn.com;
       style-src 'self' 'unsafe-inline';">

2. Add the vendor scripts.

   Include the necessary payment scripts in your HTML:

   Square

   Cash App Pay

   Afterpay

   ACH

   Google Pay

   <!-- Square Sandbox -->
   <meta http-equiv="Content-Security-Policy" content="
       frame-src https://sandbox.web.squarecdn.com;
       connect-src https://pci-connect.squareupsandbox.com https://o160250.ingest.sentry.io;
       script-src https://sandbox.web.squarecdn.com;
       style-src https://sandbox.web.squarecdn.com;
       font-src https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net">
   
   <!-- Square Production -->
   <meta http-equiv="Content-Security-Policy" content="
       frame-src https://web.squarecdn.com;
       connect-src https://pci-connect.squareup.com https://o160250.ingest.sentry.io;
       script-src https://web.squarecdn.com;
       style-src https://web.squarecdn.com;
       font-src https://square-fonts-production-f.squarecdn.com https://d1g145x70srn7h.cloudfront.net">

3. Implement error handling in the application.

   Add error handling for the following script loading failures in the application:

   // Monitor script loading
   window.addEventListener('error', function(e) {
       if (e.target.src && e.target.src.includes('square.js')) {
           console.error('Square script failed to load:', e);
           handleScriptLoadError();
       }
   });
   
   function handleScriptLoadError() {
       // Implement your fallback logic
       const paymentForm = document.getElementById('payment-form');
       if (paymentForm) {
        paymentForm.innerHTML = 'Payment temporarily unavailable. Please try again later.';
       }
   
       // Notify your error monitoring service
       notifyErrorService('Square script load failure');
   }

4. Verify the CSP implementation.

   1. Check the console with a web browser:

      • Look for CSP violation messages.
      • Verify script loading success.

   2. Test a payment flow:

      async function testPaymentFlow() {
          try {
              const payments = Square.payments(appId, locationId);
              const card = await payments.card();
              await card.attach('#card-container');
              console.log('Payment flow initialized successfully');
          } catch (e) {
           console.error('Payment flow test failed:', e);
          }
      }

   3. Validate in different environments:

      • Test in sandbox environment first.
      • Verify in staging (if applicable).
      • Confirm in production.

Script loading failtures:

• Verify CSP directives match script sources.
• Check for network connectivity.
• Confirm that the script URLs are correct.

CSP violations:

• Review browser console for specific violation messages.
• Update CSP to include missing sources.
• Verify all resource domains are included.

Integration conflicts:

• Check for conflicts with other security headers.
• Verify compatibility with other third-party scripts.
• Test with all payment methods.

Security:

• Use specific source URLs rather than wildcards
• Minimize use of 'unsafe-inline' and 'unsafe-eval'
• Regularly review and update CSP rules

Performance:

• Load scripts asynchronously when possible
• Implement proper error handling
• Monitor script loading performance

Maintenance:

• Document all CSP modifications
• Keep track of vendor script versions
• Regular testing of all payment flows

• Mozilla - Content Security Policy
• CSP Evaluator tool