手把手教你彻底解决跨域问题:遇到Cookie与SameSite【实践】
转载链接：
https://juejin.im/post/5e1437c6e51d45415b4760cb
简介
对于切图仔而言，跨域是个非常熟悉的名词了。虽然浏览器为了我们的网站安全操碎了心，但是往往我们为了网站能够被用户正常访问，不得不绕过这个限制，cors就是其中一种常用的解决跨域的方案。
通过设置
Access-Control-Allow-Credentials: true和xhr.withCredentials = true，可以实现跨域传递Cookie，达到保存用户登录态等目的。这种方案虽好，但是如果使用不当，会有CSRF的风险。所以，从Chrome 51开始，浏览器的Cookie新增加了一个SameSite属性，用来防止CSRF攻击和用户追踪。
该特性当前默认是关闭的，但是有部分用户已经提前受到了影响。如果你出现了无法使用某些网站的第三方登录功能的时候，请检查是不是受了该设置的影响。
亲自体验
禁用SameSite验证
虽然官方声明，从Chrome 79开始，该功能就会默认开启（之前宣称是从Chrome 80开始，最新的声明已经改了），但是经测试发现，部分用户在默认情况下该功能仍然是关闭的，所以我们先禁用SameSite验证，看看情况会怎样。
打开Chrome设置，将chrome://flags/#
same-site-by-default-cookies先禁用，然后重启浏览器。
使用本文最后面的示例代码，在本地模拟登录操作跨域获取Cookie，然后携带Cookie获取用户信息。
可以发现，我们能够正常使用服务端写入的Cookie来发送请求并获取用户信息，但是会在Console中看到一条警告信息。
按照程序员一贯的“警告即可忽略”的原则，我们似乎可以不用管这个特性。但是一旦Chrome浏览器全面开启SameSite特性，且用户升级了浏览器，那么基于Cookie跨域登录的网站都将无法登录。接下来我们模拟下这个过程。
启用SameSite验证
同样打开Chrome设置，将chrome://flags/#
same-site-by-default-cookies启用，然后重启浏览器。
清空Cookie并重新登录。注意：Cookie是在后端域名下，不要清除前端域名对应的Cookie。
这时我们可以发现：请求的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
Demo
<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>
复制代码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（不安全）”，才能正常向后端服务发送请求。
转载链接：
https://juejin.im/post/5e1437c6e51d45415b4760cb