如何限制 Angular 应用程序在 iframe 中加载

Question

我正在尝试限制 Angular 应用程序在 iframe 中加载，但无法做到这一点。

我有angular 应用程序独立于API 运行。 API 使用.net core 2.1 实现，UI 客户端使用angular 7。

我在api middleware 中尝试了以下不同选项，但在我的情况下都没有：

#1

    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("Content-Security-Policy", "frame-ancestors 'none'; " +
            "script-src 'self'; " +
            "style-src 'self'; " +
            "img-src 'self'");
        await next();
    });

#2

    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("X-Frame-Options", "DENY");
        await next();
    });

我在response header 中获得了超过附加值，但仍然能够在其他应用程序中加载iframe 中的应用程序。

angular/API 这边有什么我遗漏的吗？

添加了更多信息

我们使用 IIS 来托管 Angular 应用程序。还尝试在 Angular 应用程序的 web.config 中进行以下设置：

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

Answer 1

为什么不在 UI 的服务器端提供标题？你用什么来服务你的 Angular 应用程序？是 nginx 吗？阿帕奇httpd？它们都提供了在每个请求上返回标头的能力

编辑：当您使用 IIS 时，它确实似乎是

<system.webServer>
  ...

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

  ...
</system.webServer>

但我不知道更多

来源：https://www.keycdn.com/blog/x-frame-options

Answer 2

一般来说，当你有一个单独的前端技术而不是后端使用的技术时，你会为前端使用一个专用服务器，另一个用于后端。

您可以使用 NGINX 或 NODEJS 为您的 Angular 应用程序提供服务，并使用它们的代理功能将前端调用路由到您的 API。 并通过可执行文件/Visual Studio 启动您的 ASPNet.core 应用程序。

顺便说一下，ANGULAR 原生地提供了一个使用 Webpack 配置的种子，以通过反向代理支持为您的应用程序提供服务。

使用 ANGULAR 的示例 https://medium.com/better-programming/setup-a-proxy-for-api-calls-for-your-angular-cli-app-6566c02a8c4d

NGINX 示例： https://spencerfeng.medium.com/setup-reverse-proxy-for-api-calls-for-your-angular-application-with-node-js-62321f0defb5

总结：

开发： 配置 Angular 代理功能。 使用 ng serve 启动你的 Angular 应用 使用 wisual studio 启动您的 API。

产品：

将您的网络服务器配置为充当反向代理并为 Angular 应用程序提供服务。 使用 IIS 或在 docker 容器中托管您的 aspnet 核心 API。