如何在AngularJS中设置X-Frame-Options头部？设置后遇TypeError报错求解

Let's break down your problem step by step—you're making a common mistake here, but it's easy to fix once you clarify how X-Frame-Options works.

First: Why Your Current Approach Is Wrong (and Causing the TypeError) #

You tried adding X-Frame-Options to your request headers via $httpProvider.defaults.headers.get, but this header is meant to be sent in the server's HTTP response, not the client's request. Browsers ignore this header if it's in a request—they only check it when it comes from the server to block clickjacking.

As for the TypeError: 'undefined' is not an object, that's likely because $httpProvider.defaults.headers.get hasn't been initialized yet when you try to assign to it. Even if you fixed that, though, this approach wouldn't resolve the OWASP ZAP warning.

Step 1: Fix the TypeError (For Curiosity’s Sake—Skip This for the Real Security Fix) #

If you just want to make the error go away (again, this won’t fix the vulnerability), ensure the headers.get object exists before assigning to it, and confirm you're injecting $httpProvider correctly in your AngularJS config block:

angular.module('yourAppName', [])
  .config(['$httpProvider', function($httpProvider) {
    // Initialize the get headers object if it doesn't exist
    if (!$httpProvider.defaults.headers.get) {
      $httpProvider.defaults.headers.get = {};
    }
    $httpProvider.defaults.headers.get['X-Frame-Options'] = 'DENY';
  }]);

But to emphasize—this does nothing to protect against clickjacking.

Step 2: The Correct Fix: Set X-Frame-Options as a Response Header (Server-Side) #

To resolve the OWASP ZAP warning, configure your server to send the X-Frame-Options header in responses (at least for the vulnerable URL https://10.11.12.13/web/network/config.html). Here’s how to do it for common server setups:

Option 1: Node.js/Express #

Add this middleware to your server code (app.js or server.js):

// Apply to all routes
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY'); // Use 'SAMEORIGIN' if you need to embed your own pages
  next();
});

// Or apply only to the specific vulnerable URL
app.get('/web/network/config.html', (req, res) => {
  res.setHeader('X-Frame-Options', 'DENY');
  // Your existing route logic here
});

Option 2: Nginx #

Add this line to your server or location block in the Nginx config:

add_header X-Frame-Options DENY;

Reload Nginx to apply changes: sudo nginx -s reload

Option 3: Apache #

Add this line to your httpd.conf, virtual host config, or .htaccess file:

Header always set X-Frame-Options "DENY"

Restart Apache to activate the setting.

Quick Note on X-Frame-Options Values #

• DENY: Blocks any site from embedding your page in an iframe.
• SAMEORIGIN: Allows embedding only if the parent page shares your site’s origin.
• ALLOW-FROM https://example.com: Allows embedding only from a specific URL (deprecated in modern browsers—use Content-Security-Policy with frame-ancestors for granular control).

Step 3: Verify the Fix #

After configuring the server, use Chrome DevTools (Network tab) to check the response headers for the vulnerable URL—you should see X-Frame-Options: DENY listed. Rescan with OWASP ZAP, and the warning should be resolved.

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