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: https://github.com/Giveth/giveth-dapps-v2/blob/66e00518cd7277f96b3bcf990f436d86e4787e0c/next.config.js#L156 but same never loads to browser

[geleeroyale]

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