angularjs - 为什么大多数浏览器上的预检请求中不包含 TLS 客户端证书？

Question

我正在构建的网络应用程序遇到问题。该 Web 应用程序由 Angular 4 前端和 dotnet core RESTful API 后端组成。需求之一是对后端的请求需要使用SSL相互认证进行认证；即客户端证书。

目前，我将前端和后端托管为 Azure 应用服务，并且它们位于不同的子域上。

按照本指南将后端设置为需要客户端证书，我相信这是对 Azure 应用服务执行此操作的唯一方法: https://learn.microsoft.com/en-us/azure/app-service/app-service-web-configure-tls-mutual-auth

当前端向后端发出请求时，我将 withCredentials 设置为 true — [根据文档][1]，这也应该与客户端证书一起使用.

The XMLHttpRequest.withCredentials property is a Boolean that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.

前端相关代码:

const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers, withCredentials: true });

let apiEndpoint = environment.secureApiEndpoint + '/api/transactions/stored-transactions/';

return this.authHttp.get(apiEndpoint, JSON.stringify(transactionSearchModel), options)
    .map((response: Response) => {
         return response.json();
     })
     .catch(this.handleErrorObservable);

在 Chrome 上，这是可行的，当发出请求时，浏览器会提示用户输入证书，并将其包含在预检请求中，一切正常。

对于所有其他主要浏览器，情况并非如此。 Firefox、Edge 和 Safari 都会使预检请求失败，因为当它们在请求中不包含客户端证书时，服务器会关闭连接。

直接浏览到 api 端点会使每个浏览器提示用户输入证书，因此我非常确定这与大多数浏览器使用客户端证书处理预检请求的方式明确相关。

我做错什么了吗？还是其他浏览器在发出请求时不提示输入证书而做错了事情？

我需要支持除 Chrome 之外的其他浏览器，因此我需要以某种方式解决这个问题。

我已经看到通过让后端允许而不是要求证书来解决类似的问题。唯一的问题是我还没有找到一种方法来实际使用 Azure 应用服务来做到这一点。要么需要，要么不需要。

有人对我如何继续前进有任何建议吗？

Answer 1

参见https://bugzilla.mozilla.org/show_bug.cgi?id=1019603以及我在CORS with client https certificates的答案中的评论(我忘记了我之前看到过同样的问题报告......)。

最重要的是，您所看到的差异的原因是 Chrome 中的错误。我已在 https://bugs.chromium.org/p/chromium/issues/detail?id=775438 上提交了一个错误.

问题在于 Chrome 没有遵循这方面的规范要求，该规范要求浏览器不得在预检请求中发送 TLS 客户端证书；因此 Chrome 会在预检中发送您的 TLS 客户端证书。

Firefox/Edge/Safari 遵循规范要求，并且不在预检中发送 TLS 客户端证书。

<小时/>

更新:在问题编辑中添加的 Chrome 屏幕截图显示了针对 GET 请求的 OPTIONS 请求，以及后续的 GET 请求 — 不是来自代码的 POST 请求。所以问题可能在于服务器禁止 POST 请求。

<小时/>

/image/GD8iG.png中显示的请求是 CORS preflight OPTIONS request在尝试代码中的 POST 请求之前，浏览器会自动发送。

您的代码添加的 Content-Type: application/json 请求 header 会触发浏览器发出预检 OPTIONS 请求。

重要的是要了解浏览器永远不会包含任何 credentials在该预检 OPTIONS 请求中 - 因此请求发送到的服务器必须配置为不需要对 /api/transactions 的 OPTIONS 请求进行任何凭据/身份验证/自己的交易/。

但是，从 /image/GD8iG.png看来服务器禁止向该 /api/transactions/own-transactions/ 发出 OPTIONS 请求。也许是因为请求缺少服务器期望的凭据，或者可能是因为服务器被配置为禁止所有 OPTIONS 请求，无论如何。

结果是，浏览器断定预检不成功，因此它就在那里停止，永远不会继续尝试代码中的 POST 请求。

鉴于/image/GD8iG.png中显示的内容很难理解这实际上如何在 Chrome 中按预期工作 - 特别是考虑到没有浏览器发送 credentials预检请求中的任何类型，因此就预检而言，浏览器在处理凭据方面可能存在的任何差异都不会产生任何影响。