Add security headers to nextjs config to prevent XSS attacks and clickjacking

[geleeroyale]

We got some reports in the past that it is possible to run a "clickjacking" attack against giveth.io

(essentially people could embed the whole site in an iframe and display it on their site, changing some links in their portal to their own)

Now this is known and has been like that for a long time without being exploited (its also quite hard to do something useful) ... regardless, we should probably fix it.

https://dev.to/theinfosecguy/how-to-protect-your-nextjs-website-from-clickjacking-2jbg
https://nextjs.org/docs/pages/building-your-application/configuring/content-security-policy

[kkatusic]

@geleeroyale can you check do we have some default vercel headers serving Giveth app? thx

[geleeroyale]

@kkatusic the frontend config should be located in next-config.ts and we have CORS configured on the reverse proxy to access impact-graph.

Apart from that I think we did not set any headers.

Here is the CORS config we are using:

# CORS Config Block Directive
(cors) {
    @cors_preflight {
        method OPTIONS
    }
    @corsOrigin {
        header_regexp Origin ^https?://([a-zA-Z0-9-]+\.)*vercel\.app$|^https?://localhost(:[0-9]+)?$|^https?://({$DOMAIN_WHITELIST})$
    }

    handle @cors_preflight {
        header {
            Access-Control-Allow-Origin "{http.request.header.Origin}"
            Access-Control-Allow-Credentials true
            Access-Control-Allow-Headers "*"
            Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
            Access-Control-Max-Age "3600"
            Vary Origin
            defer
        }
        respond "" 204
    }

    handle @corsOrigin {
        header {
            Access-Control-Allow-Origin "{http.request.header.Origin}"
            Access-Control-Allow-Credentials true
            Access-Control-Expose-Headers "*"
            Vary Origin
            defer
        }
    }
}

(cors-sse) {
    header {
        Access-Control-Allow-Origin "*"
        Access-Control-Allow-Credentials true
        Access-Control-Expose-Headers "*"
        Vary Origin
        defer
    }
}

[kkatusic]

@geleeroyale ok and that's ok, but look at header that you get from giveth.io and look, what extra we defined inside next.config.js file:

giveth-dapps-v2/next.config.js

Line 156 in 66e0051

headers: [

but same never loads to browser

[geleeroyale]

Yes - It looks like its not properly configured. Please take a deeper look into this.

[kkatusic]

@geleeroyale can you test inside preview link these security headers:

https://giveth-dapps-v2-git-feat-securityheaders-givethio.vercel.app/