node 第十一天纯使用第三方cookie 实现跨源单点登录(或者说免登录) 以及白话说cookie的跟踪原理

1. 白话说cookie跟踪, 广告推送基础原理

第三方cookie

首先第三方要在第一方设置cookie, 必要条件是两方互相同意

天猫和淘宝是两个域名天猫决定可以设置淘宝的cookie, 比如去请求一个淘宝的接口 [注释1] (这里反映了第一方的同意 )

访问者访问天猫, 同时设置上了一个淘宝的cookie ；设置第三方cookie本质上是后端设置的，因为js设置cookie是不能指定domain为第三方源的（这里需要后端设置cookie, 第三方设置cookie必须同时指定 SameSite=None; Secure）因为是第三方给第一方设置cookie 这里反映了第三方的同意 。
例如 :

1 登录天猫时设置一个淘宝cookie user: li 这样就知道了你的用户名

2 在天猫上买了一瓶水又设置一个淘宝的cookie buy: water 这样就知道你渴了要买水

然后你去登录淘宝, 带上已经有的淘宝域下cookie, 既然访问的是淘宝, 那当然可以带上淘宝自己的cookie

淘宝就知道你的用户名, 你要买水, 给你推多多的水

注释1: 请求第三方接口, 例如:

可以通过ajax(需要处理跨域, 和cookie许可, 如果只是为了设上第三方cookie一般不这么做)
请求一张第三方图片, 第三方做相应操作
请求一个第三方js文件 (百度统计的做法)

2.设想一个单点登录需求
我有两个网站A(http://127.0.1.1:5500)和B(http://127.0.4.1:5500), 我的服务器是http://127.0.1.1:3007, , 用户只要登录B网站, 就不需要再登录A网站了(A或B网站的登录接口都是访问一个服务器), 这是一个单点登录的特例

前置知识一, 对浏览器来说，cookie是区分域，不区分端口的，
前置知识二, 标记为 secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端。它永远不会使用不安全的HTTP 发送(本地主机除外 ) 本文所用的ip都是本地主机ip
同一个ip地址下多个端口的cookie是共享的, 意味着我只要登录过B网站, 然后服务器端往B网站设置一个cookie,设置cookie的过程可以是, B请求服务器的登录接口, 然后服务器做相应操作, 显然这个cookie的域肯定是服务器的源127.0.1.1, 这样就成功在B上设置上了第三方cookie, 当我访问A时, A和服务器除了端口是同源的, 访问登录接口时会带上我在B设置的源为127.0.1.1的cookie, 携带了这个cookie我的服务器就让用户免登录.
这么一来流程就通了~
什么? 你想用户登录过A也可以免登录B, 换个思维, 你让A的登录接口请求服务器http://127.0.4.1不就可以了吗 ! ! !

3.下面是演示代码 (代码处理跨域的思路在第九天已经说了, 代码也是第九天的改造)
node.js 服务端代码

js 复制代码

const fs = require('fs');
const url = require('url');
const http = require('http');
const querystring = require('querystring');
const path = require('path');

const server = http.createServer((req, res) => {
  if (['http://127.0.1.1:5500', 'http://127.0.4.1:5500'].includes(req.headers['origin'])) {
    res.setHeader('Access-Control-Allow-Origin', req.headers['origin']);
  }
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, x-token');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, OPTIONS, DELETE');
  res.setHeader('Access-Control-Max-Age', 1728000); //预请求缓存20天
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
  } else {
    let cookie = req.headers.cookie;
    cookie = cookie?.replace(/\s/g, '');
    const cookieInfo = querystring.parse(cookie ?? '', ';');
    //有cookie直接免登录
    if (cookieInfo.token === '10086') {
      res.writeHead(200, {
        'content-type': 'application/json'
      });
      res.end(JSON.stringify({ code: 1, data: { name: 'jian' }, msg: '登录成功' }));
    } else if (req.url === '/login') {
      req.on('data', chunk => {
        let { pw } = JSON.parse(chunk.toString('utf-8'));
        if (pw === '123456') {
          let date = new Date();
          date.setDate(date.getDate() + 1);
          let expires = date.toUTCString();
          //这里设置第三方cookie
          res.writeHead(200, {
            'content-type': 'application/json',
            'set-cookie': [`token=10086; Expires=${expires}; SameSite=None; Secure`]
          });
          res.end(JSON.stringify({ code: 1, data: { name: 'jian' }, msg: '登录成功' }));
        } else {
          res.writeHead(200, {
            'content-type': 'application/json'
          });
          res.end(JSON.stringify({ code: 0, data: {}, msg: '密码错误' }));
        }
      });
    } else {
      res.writeHead(200, {
        'content-type': 'application/json'
      });
      res.end(JSON.stringify({ code: 0, data: {}, msg: '未登录' }));
    }
  }
});
server.listen(3007, '127.0.1.1');

4.网站A和网站B代码, 运行在不同的源(origin)下

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajaxCookie</title>
  </head>
  <body>
    <div id="login" style="display: none">
      <h1>请登录:</h1>
      <input id="password" name="pw" type="password" />
      <input id="submit" type="submit" value="登录" />
    </div>
    <div id="content" style="display: none">
      <h1>欢迎您~</h1>
    </div>
  </body>
  <!-- <script src="http://127.0.1.1:3007/jsonp"></script> -->
  <script>
    function myAjax({
      method = 'GET',
      url = '/',
      data = {},
      headers = {
        'content-type': 'application/x-www-form-urlencoded'
      },
      responseType = 'text',
      withCredentials = false,
      success = res => {
        console.log(res);
      },
      error = err => {
        console.log(err);
      }
    }) {
      let ajax = new XMLHttpRequest();
      ajax.withCredentials = withCredentials;
      ajax.open(method, url);
      for (const key in headers) {
        if (Object.hasOwnProperty.call(headers, key)) {
          ajax.setRequestHeader(key, headers[key]);
        }
      }
      ajax.responseType = responseType;
      ajax.send(data);
      ajax.onreadystatechange = () => {
        if (ajax.readyState === 4) {
          success(ajax.response);
        }
      };
      ajax.onerror = err => {
        error(err);
      };
    }
  </script>
  <script>
    const loginEl = document.querySelector('#login');
    const submitEl = document.querySelector('#submit');
    const contentEl = document.querySelector('#content');
    //前端控制路由
    function toLogin() {
      loginEl.style.display = 'block';
      contentEl.style.display = 'none';
    }
    function toContent() {
      loginEl.style.display = 'none';
      contentEl.style.display = 'block';
    }
    //进入即发起请求(不携带密码, 携带同源cookie)
    myAjax({
      method: 'POST',
      url: 'http://127.0.1.1:3007/ajax',
      data: JSON.stringify({}),
      headers: {
        'content-type': 'application/json',
        'x-token': 'x-token'
      },
      responseType: 'json',
      withCredentials: true,
      success: res => {
        console.log(res);
        if (res.code === 1) {
          this.toContent();
        } else {
          this.toLogin();
        }
      },
      err: err => {
        console.log(err);
      }
    });
    submitEl.onclick = () => {
      let pw = document.querySelector('#password').value;
      myAjax({
        method: 'POST',
        url: 'http://127.0.1.1:3007/login',
        data: JSON.stringify({
          pw: pw
        }),
        headers: {
          'content-type': 'application/json',
          'x-token': 'x-token'
        },
        responseType: 'json',
        withCredentials: true,
        success: res => {
          console.log(res);
          if (res.code === 1) {
            this.toContent();
          } else {
            this.toLogin();
          }
        },
        err: err => {
          console.log(err);
        }
      });
    };
  </script>
</html>

5. 你在B登录后就能免登录A啦 fun:-)

node 第十一天 纯使用第三方cookie 实现 跨源单点登录(或者说免登录) 以及白话说cookie的跟踪原理

node 第十一天纯使用第三方cookie 实现跨源单点登录(或者说免登录) 以及白话说cookie的跟踪原理