当跨域遇到Cookie与SameSite

时间 2020-01-09

标签遇到 cookie samesite 栏目 HTML 繁體版

原文原文链接

简介

对于切图仔而言，跨域是个很是熟悉的名词了。虽然浏览器为了咱们的网站安全操碎了心，可是每每咱们为了网站可以被用户正常访问，不得不绕过这个限制，cors就是其中一种经常使用的解决跨域的方案。javascript

经过设置Access-Control-Allow-Credentials: true和xhr.withCredentials = true，能够实现跨域传递Cookie，达到保存用户登陆态等目的。这种方案虽好，可是若是使用不当，会有CSRF的风险。因此，从Chrome 51开始，浏览器的Cookie新增长了一个SameSite属性，用来防止CSRF攻击和用户追踪。css

该特性当前默认是关闭的，可是有部分用户已经提早受到了影响。若是你出现了没法使用某些网站的第三方登陆功能的时候，请检查是否是受了该设置的影响。html

亲自体验

禁用`SameSite`验证

虽然官方声明，从Chrome 79开始，该功能就会默认开启（以前宣称是从Chrome 80开始，最新的声明已经改了），可是经测试发现，部分用户在默认状况下该功能仍然是关闭的，因此咱们先禁用SameSite验证，看看状况会怎样。前端

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

使用本文最后面的示例代码，在本地模拟登陆操做跨域获取Cookie，而后携带Cookie获取用户信息。nginx

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

按照程序员一向的“警告便可忽略”的原则，咱们彷佛能够不用管这个特性。可是一旦Chrome浏览器全面开启SameSite特性，且用户升级了浏览器，那么基于Cookie跨域登陆的网站都将没法登陆。接下来咱们模拟下这个过程。chrome

启用`SameSite`验证

一样打开Chrome设置，将chrome://flags/#same-site-by-default-cookies启用，而后重启浏览器。express

清空Cookie并从新登陆。注意：Cookie是在后端域名下，不要清除前端域名对应的Cookie。json

这时咱们能够发现：请求的Response Cookies下，SameSite属性有了一个提示信息，告诉咱们SameSite属性没有设置，将使用默认值Lax。

此时再去获取用户信息，将没法成功获取，由于Cookie没有跟随请求一块儿带给后端服务。通过检查能够发现，该Cookie没有成功写入用户浏览器。

~~因而可知，若是不想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, });
复制代码

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

不过，这只是一种权宜之计，由于设置sameSite为None以后，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（不安全）”，才能正常向后端服务发送请求。

当跨域遇到Cookie与SameSite

简介

亲自体验

禁用SameSite验证

启用SameSite验证

处理SameSite验证

完整示例

参考

禁用`SameSite`验证

启用`SameSite`验证

处理`SameSite`验证