Missing frame-ancestors Directive

This test page demonstrates a security vulnerability where a Content Security Policy (CSP) is implemented, but lacks the crucial frame-ancestors directive, which protects against clickjacking attacks.

Security Issue: Content Security Policy is missing the frame-ancestors directive, leaving the page vulnerable to clickjacking attacks where it could be embedded in malicious websites.

Test Case

Vulnerable code:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self';">

This CSP controls script and style sources, but doesn't restrict who can embed this page in an iframe.

Explanation

The frame-ancestors directive in Content Security Policy controls which parent pages can embed the current page in a frame, iframe, object, embed, or applet. Without this directive, any website can potentially embed your page.

This creates vulnerability to clickjacking attacks where malicious sites can:

Overlay transparent iframes over seemingly innocent content
Trick users into clicking elements they didn't intend to interact with
Capture sensitive information or perform actions without user awareness
Potentially bypass other security measures through UI redressing

How Pink Sock detects this issue:

Pink Sock analyzes CSP headers and meta tags for the presence of the frame-ancestors directive. When a CSP exists but lacks this directive, it flags it as a medium-severity security issue.

How to fix:

Add the frame-ancestors directive to your Content Security Policy:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; frame-ancestors 'self';">

For most applications, setting frame-ancestors 'self' is appropriate, allowing only your own site to embed the page. For maximum security, you can use frame-ancestors 'none' to prevent any embedding.

For more specific control, you can list allowed domains:

frame-ancestors 'self' https://trusted-partner.example.com

Additional Information

Legacy X-Frame-Options Header

Before CSP was widely supported, the X-Frame-Options header was used to prevent clickjacking:

X-Frame-Options: DENY

X-Frame-Options: SAMEORIGIN

While this header is still useful for backward compatibility, frame-ancestors provides more flexibility and should be used in modern applications.

Clickjacking Example

In a clickjacking attack, a malicious site might create this type of structure:

<div style="position:relative;">
  <div style="opacity:0.5; position:absolute; top:0; left:0; width:100%; height:100%;">
    Click here to win a prize!
  </div>
  <iframe src="https://your-site.com/sensitive-action" style="opacity:0.1;"></iframe>
</div>

The user sees the "Click here" text but actually clicks on a button in your application, potentially performing an unintended action like a purchase or data deletion.