如何在Yarn部署的Angular应用中配置frame-ancestors指令？

首先明确两个关键点：

1. frame-ancestors是Content-Security-Policy的核心指令，但它无法通过index.html里的meta标签配置，浏览器会直接忽略这类meta规则，必须通过HTTP响应头设置。
2. Yarn只是包管理工具，负责安装依赖、执行构建/启动脚本，本身不处理服务端响应头——你需要在部署应用的服务器（或开发调试用的服务器）上配置响应头，以下是几种常见场景的实现方法：

1. 本地开发调试（Angular Dev Server） #

如果是用ng serve本地跑项目，直接修改angular.json配置添加响应头：
找到projects -> [你的项目名称] -> architect -> serve -> options，新增headers字段：

"options": {
  // 保留原有配置，比如port、host等
  "headers": {
    "Content-Security-Policy": "frame-ancestors 'self'"
  }
}

改完重启ng serve，就能在浏览器开发者工具的响应头里看到这条规则。

2. Nginx生产部署 #

用Nginx托管Angular静态文件的话，在你的站点配置文件（比如/etc/nginx/sites-available/your-app.conf）的server或location块里加：

add_header Content-Security-Policy "frame-ancestors 'self';" always;

always关键字能保证错误响应也带上这个头，配置完重启Nginx生效：sudo systemctl restart nginx

3. Apache生产部署 #

如果用Apache，在项目根目录的.htaccess文件里添加：

Header always set Content-Security-Policy "frame-ancestors 'self'"

或者在Apache的站点配置文件的<Directory>/<VirtualHost>块里加同样的指令，之后重启Apache：sudo systemctl restart apache2

4. Node.js（Express）部署 #

如果用Express托管Angular的dist静态文件，通过中间件添加响应头：

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

// 托管Angular构建后的静态文件
app.use(express.static('dist/your-project-name'));

// 全局添加CSP响应头
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "frame-ancestors 'self'");
  next();
});

app.listen(3000, () => console.log('Server running on port 3000'));

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