跨站(cross-site)、跨域(cross-origin)、SameSite与XMLHttpRequest.withCredentials

概念说明

浏览器使用同源策略在提高了安全性的同时也会带来一些不变，常见，如：不同源间的cookie或其它数据的访问。

跨站(cross-site)与跨域(cross-origin)是两个不同的概念。之前的文章同源策略与CORS已对什么是跨域作了说明，不再赘述，本文作为对之前文章的补充，以cookie的访问为切入点，介绍下跨站(cross-site)、跨域(cross-origin)、SameSite与XMLHttpRequest.withCredentials四个知识点。

⚠️ 浏览器的安全策略也在不断的变化，若干时间后文中所述内容可能不再适用

SameSite与XMLHttpRequest.withCredentials针对的是cross-site或者same-site的情况，以下是MDN上对SameSite与XMLHttpRequest.withCredentials的概述：

SameSite主要用于限制cookie的访问范围。

The SameSite attribute of the Set-Cookie HTTP response header allows you to declare if your cookie should be restricted to a first-party or same-site context.

XMLHttpRequest.withCredentials主要针对XHR请求是否可以携带或者接受cookie。

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.

In addition, this flag is also used to indicate when cookies are to be ignored in the response. The default is false. XMLHttpRequest from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request. The third-party cookies obtained by setting withCredentials to true will still honor same-origin policy and hence can not be accessed by the requesting sc

什么是同站呢？举个例子：web.wjchi.com与service.wjchi.com具有相同的二级域名，可以看作是同站不同源(same-site, cross-origin)。但，web.github.io与service.github.io则是不同的站点不同的源(cross-site, cross-origin)，因为github.io属于公共后缀（Public Suffix）。对于跨站问题，这两篇文章都有讲述：当 CORS 遇到 SameSite、【译】SameSite cookies 理解，可以参考阅读。

2021-02-21补充：关于SameSite和SameOrigin的对比说明，可参考 Understanding "same-site" and "same-origin"

根据是否区分URL协议，又可分为 schemeful Same-Site 和 scheme-less same-site

测试代码

首先在本地映射几个域名：

// 这两个域名不同站也不同源，cross-site, cross-origin
127.0.0.1 www.web.com
127.0.0.1 www.service.com

// 这两个域名是同站不同源，same-site, cross-origin
127.0.0.1 web.local.com
127.0.0.1 service.local.com

然后创建两个ASP.NET Core项目，一个作为API，一个作为Web端。

API监听以下地址：

http://www.service.com:5000
http://service.local.com:5001
https://www.service.com:5002
https://service.local.com:5003

Web端监听以下地址：

http://www.web.com:5010
http://web.local.com:5011
https://www.web.com:5012
https://web.local.com:5013

API核心代码如下：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace cookie
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy("default", builder =>
                {
                    builder.AllowAnyHeader().AllowAnyMethod()
                    .WithOrigins("http://www.web.com:5010", "http://web.local.com:5011", "https://www.web.com:5012", "https://web.local.com:5013")
                    .AllowCredentials();
                });
            });

            services.AddControllers();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseHttpsRedirection();

            app.UseCors("default");

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }
}

View Code