Server headers

Share via

Configure the server headers to refine the content security policy.

Hinode uses strict security policies by default. This ensures the site is secure by default. However, if you want to include external resources, such as images and videos, you will need to explicity add these sources to the server headers. If omitted, the browser will refuse to load these resources, resulting in broken links or missing elements.

The settings of the local development server are defined in server.toml. See the below configuration, which captures the external resources currently used by Hinode. Refine these settings as needed. Similar settings are defined in the netlify.toml file provided in the repository’s root when deploying to Netlify.

[[headers]]
for = '/**'
[headers.values]
    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"
    Content-Security-Policy = """\
        default-src 'self'; \
        script-src 'self' \
            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
        style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
        object-src 'none'; \
        base-uri 'self'; \
        connect-src 'self'
            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
        font-src 'self' https://fonts.gstatic.com; \
        frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
        manifest-src 'self'; \
        media-src 'self' \
        """
    X-Frame-Options = "SAMEORIGIN"
    Referrer-Policy = "strict-origin"
    Permissions-Policy = """\
        geolocation=(), \
        midi=(), \
        sync-xhr=(), \
        microphone=(), \
        camera=(), \
        magnetometer=(), \
        gyroscope=(), \
        fullscreen=(), \
        payment=() \
        """
    cache-control = """\
        max-age=0, \
        no-cache, \
        no-store, \
        must-revalidate \
        """
    Access-Control-Allow-Origin = "*"