fr1nge.xyz/themes/after-dark/docs/content/feature/content-security-policy.md

+++ title = "Content Security Policy" description = "Control resources the user agent is allowed to load." categories = ["security"] tags = ["privacy", "xss", "csp"] features = ["code highlighter", "related content", "snippets"] [blackfriday] smartypants = false copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

After Dark helps you secure your site using Content Security Policy (CSP). Basic CSP is enabled by default and [Advanced Configurations]({{< relref "#advanced-configuration" >}}) are also possible.

Basic CSP offers minimal protection but is still helpful as it keeps resources from accidentally being loaded over http. In addition, Basic CSP automatically blocks all Flash and Silverlight objects before they have a chance to load.

Basic Configuration

Disable CSP site-wide add the following to your site config:

[params]
  disable_csp = true # disable site-wide

Disable CSP for a specific page using front matter:

disable_csp = true # disable for page

Advanced Configuration

Advanced configuration allows you to fine-tune policy directives based on your specific needs. To get started specify at least 1 CSP directive in site config.

{{% hackcss-alert type="info" %}}Note: You may wish to {{< external "https://gohugo.io/getting-started/usage/#disable-livereload" "Disable LiveReload" />}} while defining advanced config.{{% /hackcss-alert %}}

Define the {{< external "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src" "script-src" />}} directive site-wide:

[params.security.csp.directives]
  scriptSrc = [
    "'self'",
    "'unsafe-inline'",
    "https:",
    "'sha512-Jx/MqTxYWqHdoOkHItRJJZCvFDhERPr5gG4I5ESu3V+BgQyAQ6wXfdsGzhzmT0yyvkAWz2jbrn81q90RRJTSTg=='",
    "'sha512-hno7WeTIciCJSjg/myjyK30HYkrcGCVwo4g4SpUalvrs3r2lS7bPNIQwbCNypKbg7BZ1sA4AsGnk6Gq4NOKpGA=='",
    "'sha512-ISTAV0GadOIz/NXXHOS&+eCM0ysXVVHhQTlvA6LJxz/DeA5yIxm0Vqf5IE&+WH0yuuXkayAKtoZkQ326nch5f/fg=='",
    "'strict-dynamic'"
  ]

This will override the script-src directive's advanced default:

Directive	Mapping	Advanced Default
default-src	defaultSrc	'none'
connect-src	connectSrc	'self'
worker-src	workerSrc	'self'
font-src	fontSrc	'self'
media-src	mediaSrc	'self'
img-src	imgSrc	'self' data:
script-src	scriptSrc	'none'
style-src	styleSrc	'self' 'unsafe-inline'
frame-src	frameSrc	'self'
object-src	objectSrc	'none'

Once set, view the Content-Security-Policy meta tag in the head of your page and inspect the console for errors as you navigate to different pages. Each time you encounter an error caused by CSP is an opportunity to improve your policy.

Add page-specific directives from page front matter using the same structure and naming conventions used in site config to append items for that page:

[security.csp.directives]
  scriptSrc = [
    "'sha512-TKVuLlCT8+a0Chpa6Pw3clhu9fhZ9JOzgblgxQaUQVP/z4lfPnrdyWDOgucORnS2qapWu/iPVG2d0ywyGH2NjA=='"
  ]

{{% hackcss-alert type="info" %}}Note: Page-specific directives will not override any site-wide setting and will not apply without first overriding its advanced default via site config.{{% /hackcss-alert %}}

Continue overriding advanced defaults as necessary until all CSP errors are resolved or you're satisfied with the changes.

Additional Resources

• About {{< external "https://infosec.mozilla.org/guidelines/web_security#content-security-policy" "Content Security Policy" />}}
• Test policy with {{< external "https://observatory.mozilla.org" "Observatory by Mozilla" />}}
• See {{< external "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#Examples" "CSP examples" />}} to learn more