Security difference between X-Frame-Options and Content-Security-Policy headers?

Question

These HTTP headers seem to do the same thing, albeit with the latter having a bit more flexibility.

Is there any additional security that the Content-Security-Policy offers?

Answer 1

X-FRAME-OPTIONS allow you to protect your site from being framed in other sites.

For example X-FRAME-OPTIONS: SAMEORIGIN allows your site to be embedded in an iframe on the same domain only. It's needed to prevent clickjacking attacks.

But Content-Security-Policy has completely different purpose. Specification of CSP says that:

Content Security Policy is a declarative policy that lets the authors (or server administrators) of a web application inform the client about the sources from which the application expects to load resources.

So its main purpose is to protect your site from XSS attacks on your users, by not allowing browsers to loader resources (scripts, etc.) from unknown domains.