如何在Linux版Azure App Service的Angular13+项目中添加X-Frame-Options:DENY

针对你的场景（Linux Azure App Service、Angular13静态部署、无中间件、无法用web.config），以下是两种可靠的方案添加X-Frame-Options:DENY头解决点击劫持问题：

方案1：Azure门户直接配置自定义HTTP头（推荐，无需改代码） #

这是最简便的方式，直接通过Azure平台层面配置全局响应头：

• 登录Azure门户，找到你的目标App Service资源
• 左侧导航栏选择「配置」→「HTTP头」标签页
• 点击「添加」按钮，在弹出的表单中：
  • 「名称」填X-Frame-Options
  • 「值」填DENY
• 保存配置，等待App Service自动重启生效。此后所有静态资源的响应都会带上这个安全头。

方案2：自定义Nginx配置（适用于依赖Nginx的Linux栈） #

如果你的App Service使用Nginx作为反向代理（比如Node.js栈或静态站点默认配置），可以通过自定义Nginx配置文件添加头：

1. 在Angular项目的src目录下创建nginx.conf，内容如下：

server {
    listen 8080;
    server_name localhost;
    root /home/site/wwwroot;
    index index.html index.htm;

    # 强制添加X-Frame-Options头
    add_header X-Frame-Options DENY always;

    # 处理Angular单页应用的路由重写
    location / {
        try_files $uri $uri/ /index.html;
    }
}

2. 修改angular.json的build配置，将nginx.conf加入assets数组，确保构建时复制到dist目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/nginx.conf" // 新增这一行
]

3. 重新构建Angular项目（ng build --prod），将dist目录部署到App Service
4. 在Azure门户的App Service「配置」→「常规设置」中，将「启动命令」设置为nginx -g "daemon off;"，强制使用自定义的Nginx配置

重要提醒 #

不要尝试用HTML meta标签设置<meta http-equiv="X-Frame-Options" content="DENY">，这种方式不被所有浏览器支持，尤其是部分旧版浏览器完全忽略meta标签形式的X-Frame-Options，必须通过HTTP响应头设置才能有效防范点击劫持。

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