AWS Amplify and CSP/CORs

TonyTheTonyToneTone — Fri, 22 Apr 2022 17:07:20 +0000

After much wailing and gnashing of teeth, I finally got something that works in the AWS Custom Headers:

customHeaders:
  - pattern: '**/*'
    headers:
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'
      - key: 'X-Frame-Options'
        value: 'SAMEORIGIN'
      - key: 'X-XSS-Protection'
        value: '1; mode=block'
      - key: 'X-Content-Type-Options'
        value: 'nosniff'
      - key: 'Content-Security-Policy'
        value: "default-src 'self' https://www.your-tld.co.uk; script-src 'self' https://www.your-tld.co.uk 'unsafe-inline' https://www.googletagmanager.com; connect-src 'unsafe-inline' https://analytics.google.com; img-src 'unsafe-inline' https://www.googletagmanager.com 'self' https://www.your-tld.co.uk 'unsafe-inline' https://i.vimeocdn.com 'self' data:; media-src 'unsafe-inline' https://f.vimeocdn.com 'unsafe-inline' https://i.vimeocdn.com; frame-src 'unsafe-inline' https://player.vimeo.com"

This will allow Google Tag Manager, image src as data, and Vimeo videos playing in iframes.

I hope it saves someone the hours it's taken me to find this solution...

DEV Community: TonyTheTonyToneTone

AWS Amplify and CSP/CORs