网站首页 > 技术文章正文

手把手教你彻底解决跨域问题:遇到Cookie与SameSite【实践】

nanyue 2024-09-18 21:39:15 技术文章 3 ℃

转载链接：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

<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（不安全）”，才能正常向后端服务发送请求。