Sebelumnya, buat yang belum tahu apa itu content security headers silahkan baca artikel di webdock - how to configure security headers, artikel nya ringkas dan mudah di mengerti.
Buat yang males baca, Content Security Policy (CSP) itu adalah intruksi ke browser untuk menampilkan asset/konten yang boleh ditampilkan/whitelist di aplikasi/website.
Berikut cara penarapan CSP di swarm mode pake traefik:
- Tambahkan middleware,
#put this above middleware definition
- traefik.http.middlewares.secure-header-myapp.headers.customresponseheaders.content-security-policy="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://googleads.g.doubleclick.net https://static.doubleclick.net https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com; font-src 'self' https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com; img-src 'self' https://wikipedia.com; frame-src 'self' https://www.youtube.com; frame-ancestor 'self';"
#put this below CSP rule & above port definition
- traefik.http.routers.myapps-https.middlewares=secure-header-myapp
- Setelah di update service swarm nya, saya cek di console browser
Kudu Whitelist upload.wikipedia.org
Kita update CSP nya di bagian img-src, kita tambahkan https://upload.wikipedia.org
- traefik.http.middlewares.secure-header-myapp.headers.customresponseheaders.content-security-policy="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://googleads.g.doubleclick.net https://static.doubleclick.net https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com; font-src 'self' https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com; img-src 'self' https://wikipedia.com https://upload.wikipedia.org; frame-src 'self' https://www.youtube.com; frame-ancestor 'self';"
- Pasang CSP ini kudu sabar, whitelist 1 domain ternyata asset nya (css atau js) itu butuh asset juga dari website lain. Misal kita pake css dari https://maxcdn.bootstrapcdn.com , kita whitelist lah si https://maxcdn.bootstrapcdn.com , ternyata pas cek di console malah ada error CSP baru, kita butuh whitelist https://fonts.googleapis.com , https://fonts.gstatic.com , dll. Begitulah keamanan, ribet emang…
Config headers yang sering saya pake di traefik
# command to not to indexing, crawling, translate our website
- traefik.http.middlewares.secure-headers.headers.customresponseheaders.x-robots-tag=noindex, nofollow, nosnippet, noarchive, noimageindex, notranslate
# yang ini baca aja artikel di awal
- traefik.http.middlewares.secure-headers.headers.customresponseheaders.x-content-type-options=nosniff
# sama yang ini juga
- traefik.http.middlewares.secure-headers.headers.customresponseheaders.x-xss-protection= 1; mode=block