阅读 3075

当跨域遇到Cookie与SameSite

简介

对于切图仔而言,跨域是个非常熟悉的名词了。虽然浏览器为了我们的网站安全操碎了心,但是往往我们为了网站能够被用户正常访问,不得不绕过这个限制,cors就是其中一种常用的解决跨域的方案。

通过设置Access-Control-Allow-Credentials: truexhr.withCredentials = true,可以实现跨域传递Cookie,达到保存用户登录态等目的。这种方案虽好,但是如果使用不当,会有CSRF的风险。所以,从Chrome 51开始,浏览器的Cookie新增加了一个SameSite属性,用来防止CSRF攻击和用户追踪。

该特性当前默认是关闭的,但是有部分用户已经提前受到了影响。如果你出现了无法使用某些网站的第三方登录功能的时候,请检查是不是受了该设置的影响。

亲自体验

禁用SameSite验证

虽然官方声明,从Chrome 79开始,该功能就会默认开启(之前宣称是从Chrome 80开始,最新的声明已经改了),但是经测试发现,部分用户在默认情况下该功能仍然是关闭的,所以我们先禁用SameSite验证,看看情况会怎样。

打开Chrome设置,将chrome://flags/#same-site-by-default-cookies先禁用,然后重启浏览器。

image

使用本文最后面的示例代码,在本地模拟登录操作跨域获取Cookie,然后携带Cookie获取用户信息。

image

可以发现,我们能够正常使用服务端写入的Cookie来发送请求并获取用户信息,但是会在Console中看到一条警告信息。

image

按照程序员一贯的“警告即可忽略”的原则,我们似乎可以不用管这个特性。但是一旦Chrome浏览器全面开启SameSite特性,且用户升级了浏览器,那么基于Cookie跨域登录的网站都将无法登录。接下来我们模拟下这个过程。

启用SameSite验证

同样打开Chrome设置,将chrome://flags/#same-site-by-default-cookies启用,然后重启浏览器。

清空Cookie并重新登录。注意:Cookie是在后端域名下,不要清除前端域名对应的Cookie

这时我们可以发现:请求的Response Cookies下,SameSite属性有了一个提示信息,告诉我们SameSite属性没有设置,将使用默认值Lax

image

此时再去获取用户信息,将无法成功获取,因为Cookie没有跟随请求一起带给后端服务。经过检查可以发现,该Cookie没有成功写入用户浏览器。

image

由此可见,如果不想2020年背故障,那么现在就要开始提前处理这个问题了。

处理SameSite验证

SameSite属性的默认值Lax只允许get请求携带Cookie,这显然没法满足,所以我们将SameSite属性的值改为None,同时将secure属性设置为true。这也意味着你的后端服务域名必需使用https协议访问。

// 注意:cookie 模块必需要更新到最新的版本(0.4.0),才支持 sameSite=none
res.cookie('token', 'token 123', { maxAge: 2592000000, httpOnly: true, sameSite: 'none', secure: true, });
复制代码

再次尝试可发现,问题解决。

image

不过,这只是一种权宜之计,因为设置sameSiteNone之后,CSRF的风险又回来了。所以,换成token的检验方式而不依赖Cookie,或许才是更合理的解决方案。

完整示例

以下是完整的示例代码及Nginx配置。

app.js

var path = require('path');
var cors = require('cors');
var express = require('express');
var cookieParser = require('cookie-parser');

var app = express();

app.use(cors({ origin: true, credentials: true, }));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); // index.html放在public目录下

app.get('/api/info', function login(req, res) {
    let token = req.cookies['token'];

    if (token) {
        res.json({ success: true, data: { name: 'somebody', age: 21 } });
    } else {
        res.json({ success: false, message: '请先登录' });
    }
});

app.get('/api/login', function login(req, res) {
    res.cookie('token', 'token 123', { maxAge: 2592000000, httpOnly: true, });
    res.end();
});

app.get('/api/login/security', function login(req, res) {
    // 注意:cookie 模块必需要更新到最新的版本(0.4.0),才支持 sameSite=none
    res.cookie('token', 'token 123', { maxAge: 2592000000, httpOnly: true, sameSite: 'none', secure: true, });
    res.end();
});

app.listen(8888, function () {
    console.log('http://localhost:8888');
});
复制代码

index.html

<html>

<head>
  <title>Demo</title>
  <style>
    button {
      width: 80px;
      height: 32px;
      line-height: 32px;
      text-align: center;
    }
  </style>
</head>

<body>
<div>
  <p>
    <button id="login">登录</button>
    <button id="security">安全登录</button>
  </p>
  <p>
    <button id="check">查询</button>
  </p>
</div>

<script>
  (function() {
    var get = function get(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.withCredentials = true;
      xhr.open('get', url);
      xhr.onreadystatechange = function onreadystatechange() {
        if (xhr.readyState === 4) {
          var res = xhr.response;

          try {
            res = JSON.parse(res);
          } catch (e) {}

          typeof callback === 'function' && callback(res);
        }
      };
      xhr.send(null);
    };

    var login = document.querySelector('#login');
    var check = document.querySelector('#check');
    var security = document.querySelector('#security');

    login.addEventListener('click', function onLogin() {
      get('https://api.server.cn/login');
    });

    check.addEventListener('click', function onLogin() {
      get('https://api.server.cn/info', function callback(res) {
        if (res.success) {
          console.log(res.data);
        } else {
          alert(res.message);
        }
      });
    });

    security.addEventListener('click', function onLogin() {
      get('https://api.server.cn/login/security');
    });
  })();
</script>
</body>

</html>
复制代码

nginx.conf

server {
    listen               443 ssl;
    server_name          api.server.cn;
    ssl_certificate      /path/to/ssl/server.crt;
    ssl_certificate_key  /path/to/ssl/server.key;
    ssl_ciphers          HIGH:!aNULL:!MD5;

    location / {
        proxy_pass  http://localhost:8888/api/;
    }
}
复制代码

hosts

127.0.0.1 api.server.cn
复制代码

注意

因为我们的证书是自签名的,并不能真正通过浏览器的证书检验,所以需要先手动点击“继续前往xxx(不安全)”,才能正常向后端服务发送请求。

image

参考