CSP cause Netlify CMS failed to open

[mazipan]

Description

On #634 we have CSP related pull-request for issue #611

It cause our CMS Netlify failed to open on https://www.wargabantuwarga.com/admin/

Preview Blank Page:

Error:

Content Security Policy: The page’s settings blocked the loading of a resource at https://identity.netlify.com/v1/netlify-identity-widget.js (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at https://unpkg.com/netlify-cms@%5E2.0.0/dist/netlify-cms.js (“script-src”).

Expected Behaviour

Should not effected

Additional Info

Our homepage also show error

Content Security Policy: The page’s settings blocked the loading of a resource at https://analytics.google.com/g/collect?v=2&tid=G-Q32QC5END5&gtm=2oe8b0&_p=1768343212&sr=1920x1080&_gaz=1&ul=en-us&cid=1694819148.1628219111&_s=1&dl=https%3A%2F%2Fwww.wargabantuwarga.com%2F&dt=Informasi%20Faskes%20%26%20Alkes%20untuk%20COVID-19%20%7C%20Warga%20Bantu%20Warga&sid=1628753583&sct=9&seg=1&en=page_view&ep.debug_mode=true (“default-src”).

[mazipan]

Call @asaadam & @resir014

[asaadam]

oh sorry.
i will fix now

[mazipan]

Keep this OPEN for now, for discussion w @resir014 later

[resir014]

@mazipan @asaadam We forgot to add the domains for Cloudinary as well.

Edit: #651.

[asaadam]

just wondering, can we merge [[headers]] to one like this?

[[headers]]
  for ="/admin/*
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "same-origin"
    Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.googletagmanager.com *.netlify.com unpkg.com analytics.google.com 'unsafe-eval'; img-src 'self' blob: data: https:; frame-ancestors 'none'; "
    Permissions-Policy = "camera=(), microphone=(), geolocation=(), interest-cohort=()"
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "same-origin"
    Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.googletagmanager.com analytics.google.com; img-src 'self' blob: data: https:; frame-ancestors 'none'; "
    Permissions-Policy = "camera=(), microphone=(), geolocation=(), interest-cohort=()"
   for = "/_next/static/*"
   [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

it's also try to disabled 'unsafe-eval' except on admin page

[resir014]

No. As per the TOML spec, each [[headers]] must exist on its own.

[mazipan]

I think the order was wrong @asaadam.

Should

[[headers]]
  for = "/*"
  [headers.values]
    # value
  for = "/admin/*"
  [headers.values]
    # value
  for = "/_next/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[asaadam]

I think the order was wrong @asaadam.

Should

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "same-origin"
    Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.googletagmanager.com analytics.google.com; img-src 'self' blob: data: https:; frame-ancestors 'none'; "
    Permissions-Policy = "camera=(), microphone=(), geolocation=(), interest-cohort=()"
  for ="/admin/*
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "same-origin"
    Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' *.googletagmanager.com *.netlify.com unpkg.com analytics.google.com 'unsafe-eval'; img-src 'self' blob: data: https:; frame-ancestors 'none'; "
    Permissions-Policy = "camera=(), microphone=(), geolocation=(), interest-cohort=()"
   for = "/_next/static/*"
   [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

hmm, that make sense. oke i will try it

but as @resir014 comment, we should have seperate [[headers]] for each domain

[mazipan]

Not sure about that 😂
I don't have knowledge to setting up Netlify TOML

[asaadam]

okay I will try to create PR 😆

[mazipan]

Try reading some references first.
So we are not coding in blind

https://docs.netlify.com/routing/headers/
https://toml.io/en/v1.0.0-rc.3#array-of-tables

Hmmm, I hate TOML, why not just use YAML ya 😂

[asaadam]

Try reading some references first.
So we are not coding in blind

https://docs.netlify.com/routing/headers/
https://toml.io/en/v1.0.0-rc.3#array-of-tables

Hmmm, I hate TOML, why not just use YAML ya 😂

based on this code

[[plugins]]
  package = "@netlify/plugin-nextjs"

[[plugins]]
  package = "netlify-plugin-cache-nextjs"

[[plugins]]
  package = "netlify-plugin-image-optim"
  

I assume we must declare [[headers]] again.

same here why not just use YAML 😂.

hopefully next header will soon can be used in netlifly, so we don't need to declare headers again 😭

[resir014]

I thought I replied to this, but yeah, nope. As per the TOML spec, you must declare each [[headers]] separately. @asaadam @mazipan