欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

项目中出现多个域名下的Cookie

程序员文章站 2022-08-30 10:24:43
浏览器的一种默认机制:如果我们引用了另一个项目的资源,那么该项目域下的Cookie对本项目可见;但是虽然可见,但依然,不可跨域访问和设置Cookie。 ......

  前言:我们在查看一个项目的cookie时,有时会看到多个域名下的cookie,如下图:

  项目中出现多个域名下的Cookie

  

  其中一种常见的原因是:因为我们在项目中引用了另一个项目的资源。如下图:

  项目中出现多个域名下的Cookie

 

   重点:浏览器的一种默认机制:如果我们引用了另一个项目的资源,那么该项目域下的cookie对本项目可见;但是虽然可见,但依然,不可跨域访问和设置cookie。

 

  那么我们如何去模仿一下这个效果呢? 

  实验方案一:根据默认机制,我们需要2个项目,a和b,在a里建一个可以创建a对应域名:a.com的cookie的js:test.js,在b项目里添加a项目的资源:

  1-项目a-test.js:

alert(1);
$(function () {
    alert(2);
    $.cookie('the12345555', 'value123', { expires: 7, domain: 'a.com', path: '/' });
});

  2-项目b-common.js添加a项目资源:

var script = document.createelement('script');
script.src = "https://mstyle1.tbdress.com/script/usercenter/test.js";
script.type = "text/javascript";
script.async = true;
document.head.appendchild(script);

 

  最后访问b项目测试效果:我们可能会遇到浏览器的提示:blocked devtools   或者   request may be blocked    请参考解决访问:https://community.akamai.com/customers/s/article/blocking-requests-other-hidden-chrome-developer-tools?language=en_us

  也可以在谷歌浏览器打开开发者工具f12,在按f1打开设置页面如下,大家试试效果吧:

  项目中出现多个域名下的Cookie

 

  测试结果:有弹框,但是cookie设置失败!  但是我们看到了a项目下的cookie,只是没有添加新的cookie成功。   这是因为新的cookie创建的方式是靠b引用a,在b里执行了域名在a下的cookie,属于跨域设置cookie,最后的结果必然就失败了。

  

  根据上面失败的原因改进实验:

  实验方案二:我们需要2个项目,a和b,在a里建一个可以创建a对应域名:a.com的cookie的js:test.js,在a项目里引用test.js(让创建方法执行在a项目中),在b项目里添加a项目的资源test.js,其实可以是任一资源,不一定在引用test.js,即使引用了,也会跨域设置失败,真正成功的还是靠a项目自己执行的效果。   思路就是这样了,大家自己测试哈。

 

  实验方案三:我们需要2个项目,a和b,  b随便引用a的一资源,同时b发起一个异步请求到a中,让a在程序中创建a的cookie,由于b引用了a的资源,那么a自己创建的cookie对b可见。      自己实现哈。