Angular 14应用中X-Frame-Options header缺失问题的解决方法

缺失X-Frame-Options响应头会带来点击劫持风险，需将其设置为DENY（禁止任何网站嵌入）或SAMEORIGIN（仅允许同域名页面嵌入），以下是不同场景的解决方法：

开发环境（自定义服务器） #

Angular内置开发服务器无法直接配置响应头，可通过自定义Express服务器实现：

1. 安装依赖：

npm install express @types/express --save-dev

2. 在项目根目录创建server.js：

const express = require('express');
const app = express();
const path = require('path');

// 托管Angular构建产物
app.use(express.static(path.join(__dirname, 'dist/your-app-name')));

// 注入X-Frame-Options头
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'SAMEORIGIN'); // 按需替换为DENY
  next();
});

// 所有请求返回Angular入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

// 启动服务器
const port = process.env.PORT || 4200;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

3. 修改package.json启动脚本：

"scripts": {
  "start": "node server.js",
  "build": "ng build"
}

执行npm run build构建后，用npm start启动服务器即可。

生产环境服务器配置 #

Nginx #

在站点的server配置块中添加：

add_header X-Frame-Options SAMEORIGIN; # 或DENY

注意：若存在多个add_header指令，需确保它们处于同一配置块，避免被覆盖。

Apache #

在.htaccess或虚拟主机配置中添加：

Header always set X-Frame-Options "SAMEORIGIN"

IIS #

在web.config的<system.webServer>节点下添加：

<httpProtocol>
  <customHeaders>
    <add name="X-Frame-Options" value="SAMEORIGIN" />
  </customHeaders>
</httpProtocol>

Angular Universal（SSR）场景 #

在server.ts中添加中间件注入响应头：

import * as express from 'express';

const app = express();

// 注入X-Frame-Options头
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'SAMEORIGIN'); // 按需替换
  next();
});

// 剩余SSR配置逻辑...

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