已配置防嵌入脚本与X-Frame-Options，仍被Checkmarx报Angular组件HTML页面‘客户端点击劫持防护不足’漏洞的修复方法

First, let's break down why Checkmarx is flagging these components even though you've set up global protections: Checkmarx's static code analysis often scans files in isolation. It might not recognize the framebusting logic in your root index.html or the server-side X-Frame-Options header, leading to false positives for individual component HTML files.

Here are actionable fixes to resolve this:

1. Verify Server-Side Header Coverage #

Double-check that the X-Frame-Options: SAMEORIGIN header is being sent with all responses from your server, including those for Angular's routed paths and static assets.

• Use your browser's DevTools (Network tab) to inspect the response headers for any request related to your app. Ensure every response includes the header.
• For modern apps, consider replacing X-Frame-Options with the more robust Content-Security-Policy header using the frame-ancestors directive:

  Content-Security-Policy: frame-ancestors 'self';
  

  This is supported by all modern browsers and is more flexible than X-Frame-Options.

2. Add Component-Level Protection (For Static Scan Compliance) #

Since Checkmarx scans individual component files, add framebusting logic directly in your component's TypeScript code (avoid inline scripts in Angular templates, as they're disabled by default):

In app.component.ts and create.component.ts, add this logic to the ngOnInit lifecycle hook:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // Prevent clickjacking by enforcing the app runs in the top-level window
    if (window.self !== window.top) {
      window.top.location.href = window.self.location.href;
    }
  }
}

This ensures the scan tool detects protective logic in the component's associated code, even though the global index.html logic already covers this.

3. Mark as False Positive in Checkmarx #

If you've confirmed your global protections (index.html framebusting + server headers) are fully functional, you can mark these findings as false positives in Checkmarx:

• Add a note explaining that your Angular SPA uses global framebusting in index.html and server-side X-Frame-Options/Content-Security-Policy headers, which provide comprehensive clickjacking protection for all components.
• Reference that OWASP guidelines confirm global protections are sufficient for SPAs, as all components render within the root HTML context.

4. Validate Your Protections #

Test your clickjacking safeguards to ensure they work:

• Create a test HTML file that tries to embed your app in an iframe.
• If your protections are working, the embedded app should either redirect the top-level window to your app's URL or not render at all.

内容的提问来源于stack exchange，提问作者Yogesh Patel