使集成的安全性和 CORS 与 Asp.Net、Angular 6 和 IIS 一起工作

Question

我有一个带有 Angular 前端和 Asp.Net Web 服务的应用程序。我正在使用 Angular 中的 HttpClient 实体进行 Web 服务调用。我已经配置了 CORS，并且我的 GET 使用以下基本结构在整个应用程序中完美运行

let url = environment.base_url + 'api/SubDoc/GetDocument?docID=' + docID;

this.httpClient.get(url,
  {
    withCredentials: true
  })
  .subscribe(
    response => {
      console.log(response);
      newData = response;
      this.currentDocument = newData;
    }
  );

我已经证明 CORS 可以正常工作，因为只要我在调用 EnableCors 时正确编辑 Origin 值，我就可以从我的本地主机会话或运行在我们的 QA 和生产服务器上的应用程序会话访问相同的服务端点

        config.EnableCors(new EnableCorsAttribute(origins: "http://localhost:2453,http://localhost:2452,http://***,http://10.100.101.46", headers: headers, methods: methods) { SupportsCredentials = true });

标头和方法定义为以下字符串：

        headers = "Origin, Content-Type, X-Auth-Token, content-type,application/x-www-form-urlencoded";
        methods = "GET,PUT,POST,OPTIONS,DELETE";

但是，我无法使用以下 HttpClient 结构向同一服务发出 PUT 请求

let url = this.base_url + 'api/ContactGroup/Put';
// Try the new HttpClient object
this.httpClient.put(url, body,
  {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
    withCredentials: true
  })
  .subscribe(
    response=>{
      let temp:number;
      temp = parseInt(response.toString(),10);
      if(!isNaN(temp)){
        this.groupID = temp;          
      }
    }
  );

当我从同一服务器连接时（即没有适用的 CORS），此 PUT 请求运行完美，但当我尝试从任何其他服务器连接时失败并出现预检错误。

未能加载 http://***/api/ContactGroup/Put：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:2452' 不允许访问。

如上所述，我确实定义了 Access-Control-Allow-Origin 标头，并且我相信我已将 PUT 和 OPTIONS 作为支持的方法包含在内。

我认为问题与未发送凭据的 PUT 请求有关。 GET 请求在请求标头中有一个凭证项，但 PUT 没有，即使我使用的是 withCredentials 选项。

PUT 请求的标头如下所示：

Request URL: http://reitgc01/REITServicesQA/api/ContactGroup/Put
Request Method: OPTIONS
Status Code: 401 Unauthorized
Remote Address: 10.100.101.46:80
Referrer Policy: no-referrer-when-downgrade
Content-Type: text/html
Provisional headers are shown
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: PUT
DNT: 1
Origin: http://localhost:2452
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

我现在已经在这个问题上花费了数天时间，如果能提供任何帮助，我们将不胜感激。

Answer 1

这就是我解决这个确切示例的方法。我正在使用启用了 WebApi 和 Windows 身份验证的 Angular 5。 CORS的东西详细here

TL;DR;本文的重点是您需要匿名（因为 CORS 标头不携带身份验证信息）和 Windows 身份验证（因此您可以保护您的应用程序）。

所以在我的 webapi 项目中，我有一个 CorsConfig 类来设置我的 CORS

public static class CorsConfig
{
    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute(ConfigurationManager.AppSettings["CorsClientUrl"], "*", "*")
        {
            SupportsCredentials = true
        };

        config.EnableCors(cors);
    }
}

用你的 HttpConfiguration 注册它

CorsConfig.Register(config);

在您的网络配置中

<authorization>
  <allow verbs="OPTIONS" users="*" />
  <allow users="<your user list>" />
  <deny users="*" />
</authorization>

这将使您的 OPTIONS 检查通过所有用户。对于所有其他动词，我拒绝所有人，只允许特定的用户列表。您可以将其更改为使用角色。

在 Angular 方面，我创建了一个拦截器，它将把凭据放在所有 http 请求上。

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';


@Injectable()
export class WinAuthInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      withCredentials: true
    });

    return next.handle(req);
  }
}

在您的提供商列表中的 app.module.ts 中注册

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: WinAuthInterceptor, multi: true }
  ]

Answer 2

感谢 sideshowbarker 为我指明了正确的方向。我终于弄清楚了我一直在努力解决的根本问题并实施了解决方案。

基本问题是我们的站点是一个内部站点，它对连接使用集成安全性，这会导致与 IIS 中的 CORS 和 CORS 支持不兼容。前端是一个带有 ASP.NET Web 服务的 Angular 6 接口。为了使用集成安全性，您必须禁用匿名身份验证。此外，为了使身份验证正常工作，您必须将 {withCredentials:true} 与您的请求一起传递。这适用于 GET 请求，因为 CORS 规范不需要这些请求的飞行前 OPTIONS，并且 GET 请求标头将具有正确解析所需的凭据令牌。

问题与 PUT 请求有关。 CORS 需要 PUT 的预检 OPTIONS 请求，但即使您设置了 withCredentials:true 标志，OPTIONS 请求也不包含凭据。这意味着您必须启用匿名身份验证，这将破坏您的集成安全性。有点问题 22. 我无法找到一种方法来仅对 OPTIONS 启用匿名登录。我确实找到了几篇 StackOverflow 帖子，声称您可以在 IIS 中执行此操作，但我无法使其正常工作。我还发现 MS 的帖子表明 IIS 不支持此功能。这意味着您必须为 OPTIONS 请求编写自定义处理程序并生成正确的响应以满足浏览器的要求。关于这个主题有几个帖子，但我发现最好的是 Stu 在这个线程上的回应 401 response for CORS request in IIS with Windows Auth enabled

通过一个小的改进，我能够让它为我工作。我需要在我的系统配置中支持多个域，如果我在源字段中放置多个 url，我仍然会收到错误消息。我使用 Request.Headers 的 Origin 字段来获取当前来源，并将该值发送回我构造的响应标头中，如下面的代码所示：

编辑：玩了一段时间后，我意识到原来的解决方案存在缺陷。我的原始代码没有明确检查来源以确保它被允许。正如我之前所说，这对于 GET 操作是可以的，因为 GET 仍然会失败（并且 OPTIONS 调用对于 GET 无论如何都是可选的）但是对于 PUT，客户端将传递 OPTIONS 调用并发出 PUT 请求并在响应中得到错误。但是，服务器仍然会执行 PUT 请求，因为 CORS 是在客户端强制执行的。这将导致不应该发生的数据插入或更新。解决方案是根据 web.config 中维护的 CORS 源列表显式检查检测到的源，如果请求源无效，则返回 403 状态和空白源值。更新后的代码如下

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        // Declare local variables to store the CORS settings loaded from the web.config
        String origins;
        String headers;
        String methods;

        // load the CORS settings from the webConfig file
        origins = ConfigurationManager.AppSettings["corsOrigin"];
        headers = ConfigurationManager.AppSettings["corsHeader"];
        methods = ConfigurationManager.AppSettings["corsMethod"];


        if (Request.HttpMethod == "OPTIONS")
        {
            // Get the Origin from the Request header. This should be present for any cross domain requests
            IEnumerable<string> headerValues = Request.Headers.GetValues("Origin");
            var id = headerValues.FirstOrDefault();

            String httpOrigin = null;
            // Assign the origin value to the httpOrigin string.
            foreach (var origin in headerValues)
            {
                httpOrigin = origin;
            }

            // Construct the Access Control headers using the derived origin value and the desired content.
            if (httpOrigin == null) httpOrigin = "*";

            // Check to see if the origin is included in the CORS origin list
            if (origins.IndexOf(httpOrigin) < 0)
            {
                // This has failed the CORS check so send a blank origin list and a 403 status (forbidden)
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "");
                HttpContext.Current.Response.StatusCode = 403;
            }
            else
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", httpOrigin);
                HttpContext.Current.Response.StatusCode = 200;
            }

            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With,content-type, Content-Type, Accept, X-Token");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");


            var httpApplication = sender as HttpApplication;
            httpApplication.CompleteRequest();
        }

    }

此代码已添加到 global.asax.cs 文件中的 Application_BeginRequest 方法中。此外，该方法的签名已修改为包含发送者对象，如下所示： protected void Application_BeginRequest（对象发送者，EventArgs e） { 现在这将生成对满足 CORS 要求的浏览器 OPTIONS 请求的响应，并且后续的 GET 仍将得到验证，因此我认为不会对安全产生任何负面影响。

最后一步是构建您的 GET 和 PUT 以包含凭据信息。示例请求如下所示： 让 url = environment.base_url + 'api/SubDoc/GetDocument?docID=' + docID;

this.httpClient.get(url,
  {
    withCredentials: true
  })
  .subscribe(
    response => {
      console.log(response);
      newData = response;
      this.currentDocument = newData;
    }
  );

和

body = { "GroupID": groupID, "ContactID": contact.ContactID, "IsActive": isActive }

let url = this.base_url + 'api/ContactGroup/Put';
this.httpClient.put(url, body,
  {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
    withCredentials: true
  })
  .subscribe(
    response=>{
      let temp:number;
      temp = parseInt(response.toString(),10);
      if(!isNaN(temp)){
        this.groupID = temp;          
      }
    }
  );

希望这可以让其他人摆脱我在尝试让 CORS 与 Angular 6、ASP.NET 和集成安全性一起工作时所经历的痛苦和沮丧的日子