为什么 CSP 在 .net core 和 Angular App 中不起作用？答案

【问题标题】：Why CSP is not working in .net core and Angular App?为什么 CSP 在 .net core 和 Angular App 中不起作用？
【发布时间】：2021-06-06 00:35:56
【问题描述】：

我有一个 .net 核心和 Angular 2 SaaS 应用程序。我正在尝试实现 X-Frame-Options: Deny 和 Content-Security-Policy: frame-ancestors 'none';以防止我的应用嵌入到其他框架中。

我在我的 .net Core API 中以不同的方式实现了它，并在响应标头值中获取它们。预期的行为是 iframe 的内容（这是我的网络应用程序）被阻止，但它仍在加载应用程序。

.Net 核心实现：

第一种方法：

    app.Use(async (ctx, next) =>
    {
        ctx.Response.Headers.Add("X-Frame-Options",
                 "deny");
        ctx.Response.Headers.Add("Content-Security-Policy",
                                 "frame-ancestors 'none'; report-uri /cspreport");
        await next();
    });

使用 Nwebsec 的第二种方法

   app.UseXfo(o => o.Deny());
   app.UseCsp(options => options.FrameAncestors(s => s.None()));

我还在 index.html 文件的 head 部分添加了下面的元标记：

<meta http-equiv="Content-Security-Policy" charset="utf-8">

下面是我的网络选项卡，显示响应标头中的标头值：

我阅读了大量指南和文档，但仍然可以看到我的应用正在加载到 iframe 中。

任何帮助/提示将不胜感激。

更新 .net 核心 API 和 Angular 应用都部署在两个不同的 Azure 应用服务中。

【问题讨论】：

标签： asp.net-core content-security-policy x-frame-options

【解决方案1】：

CSP frame-ancestors 和 X-Frame-Options 用于防止文档框架（通常使用内容类型 text/html）。您的响应正在返回 application/json，但您可能不会像这样嵌入响应。在这种情况下，框架预防将无济于事。

数据（例如 application/json）通常通过 CORS 标头进行限制，您可能应该对 Access-Control-Allow-Origin 标头进行更多限制。

【讨论】：