imac screen

Content Security Policy (CSP)

This is probably one of the most forgotten aspects in website security. CSP allows you to set certain parameters for your website in order to prevent specific attacks or unauthorized access or modifications from external resources.

You can easily add a CSP to your website with Workers.

Workers code:

const DEFAULT_SECURITY_HEADERS = {
    "Content-Security-Policy": "default-src 'self' https://workers.cloudflare.com/favicon.ico https://static.cloudflareinsights.com/beacon.min.js; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/tsparticles@1.18.11/dist/tsparticles.min.js https://static.cloudflareinsights.com/beacon.min.js https://static.cloudflareinsights.com/beacon.min.js/; font-src 'self' fonts.gstatic.com fonts.googleapis.com https://fonts.gstatic.com/s/lato/ https://fonts.gstatic.com/s/ubuntu/ https://fonts.googleapis.com/css; style-src 'self' 'unsafe-inline' 'unsafe-hashes' 'sha256-vdvKP1mIR86XddBFtvN5py4cjhcA5Q8R0HvgJy+hG3E=' 'sha256-jrqa2xeX6JXjJQ2s/r8RpH0sIkQDhRTLkdtQh7denWA=' 'sha256-LyYrIkErYz0Ssn+p+Uo7BJWCHLg0HP8KiMgOP+1dyeg=' 'sha256-SxavVqSjaNG1B8VNDAAtySTOb1fQtd9ATDIonP6w+TE=' 'sha256-SxavVqSjaNG1B8VNDAAtySTOb1fQtd9ATDIonP6w+TE=' fonts.googleapis.com fonts.gstatic.com; style-src-elem 'self' fonts.googleapis.com https://fonts.googleapis.com/css/; frame-src 'self' https://iframe.videodelivery.net/; img-src 'self' data:; object-src 'self'; base-uri 'self';",
    "Strict-Transport-Security": "max-age=63072000; includeSubDomains; preload",
    "X-XSS-Protection": "1; mode=block",
    "X-Frame-Options": "SAMEORIGIN",
    "X-Content-Type-Options": "nosniff",
    "Referrer-Policy": "no-referrer",
    "Permissions-Policy": "fullscreen=(self), autoplay=(), geolocation=(), microphone=(), camera=(), payment=(), interest-cohort=()",
    "Set-Cookie": "SameSite=None; Secure",
    'Cross-Origin-Embedder-Policy': 'require-corp; report-to="default";',
    'Cross-Origin-Opener-Policy': 'same-site; report-to="default";',
    "Cross-Origin-Resource-Policy": "same-site",
}
const BLOCKED_HEADERS = [
    "Public-Key-Pins",
    "X-Powered-By",
    "X-AspNet-Version",
]
addEventListener('fetch', event => {
    event.respondWith(addHeaders(event.request))
})
async function addHeaders(req) {
    let response = await fetch(req)
    let newHeaders = new Headers(response.headers)

    const tlsVersion = req.cf.tlsVersion
    // This sets the headers for HTML responses: 
    if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        })
    }

    Object.keys(DEFAULT_SECURITY_HEADERS).map(function (name) {
        newHeaders.set(name, DEFAULT_SECURITY_HEADERS[name]);
    })

    BLOCKED_HEADERS.forEach(function (name) {
        newHeaders.delete(name)
    })

    if (tlsVersion != "TLSv1.2" && tlsVersion != "TLSv1.3") {
        return new Response("You need to use TLS version 1.2 or higher.", { status: 400 })
    } else {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        })
    }
}

Let’s talk!

Disclaimer

The information contained on this website is for general information and educational purposes only. This website is not affiliated with the company Cloudflare, nor does it represent Cloudflare in any way.