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/

[geleeroyale]

Sorry - missed this. Will take a look.

[geleeroyale]

@kkatusic Sorry for taking so long - I reviewed your PR and it is a great improvement - specifically as requested X-Frame Options (disallows using giveth in iframes) and content security policy (prevents against cross site scripting attacks) have now been implemented.

Before:

After:

1 - I did not use these testing sites before and we might want to try to reach A grade by implementing the rest of recommended security headers
2 - I strongly suggest we take your experience and knowledge to all our other products and make this a standard in all our applications across the Giveth Galaxy and GM

Edit: Results are taken from https://securityheaders.com - also a good resource is Mozilla Observatory for quick checks (https://developer.mozilla.org/en-US/observatory)

[kkatusic]

Thx @geleeroyale for reply, can you check now with new ones added headers:

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

thx

[geleeroyale]

You are a goddamn hero!! A+ score

Please consider doing this for our other products as well 💜

[kkatusic]

You are a goddamn hero!! A+ score

Please consider doing this for our other products as well 💜

thx @geleeroyale.

[kkatusic]

For QA people, I tested donation, checked values and seems that everything is working fine, maybe some external api url request can fail, just to notice here if it is blocked by newly added headers.