项目中出现多个域名下的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设置失败! 但是我们看到了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可见。 自己实现哈。
项目中出现多个域名下的Cookie的更多相关文章
- laravel 中 同个主域名下,多个项目共享session登录状态
共享session的前提是session在一个公共的地方,比如database,redis等,laravel框架提供了很大驱动选择: 这里只需要在配置文件里配置三个地方即可 'driver' => ...
- Vue 项目中遇到的跨域问题及解决方法
原文:https://www.jb51.net/article/137278.htm 问题描述 前端 vue 框架,跨域问题后台加这段代码 header("Access-Control-Al ...
- 相同域名下的cookie污染
问题描述 本地用同一个tomcat调试两个相同框架的不同项目,在同一个浏览器界面里切换时,A项目的登录会把B项目的登录给踢掉,翻反过来亦如此.通过查看浏览器cookie,发现两个项目的cookie完全 ...
- 以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题
以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念: 单页应用: 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具 ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- 如何在ASP.NET Core中实现CORS跨域
注:下载本文的完整代码示例请访问 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core 如何在ASP.NET C ...
- Flash+fms视频录制在项目中的实际应用
Flash+fms视频录制在项目中的实际应用 前言:以下只是记录本人在项目中的应用,而flash+fms视频录制有多种实现方式,具体可根据实际情况而定! 1:古人云:工欲善其事,必先利其器,首先安装f ...
- 项目中关于ajax jsonp的使用
项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() { $.ajax({ ...
随机推荐
- 2019年百度最新Java工程师面试题
一.单选题(共27题,每题5分) 1若下列所用变量均已经正确定义,以下表达式中不合法的是? A.x>>3 B.+++j C.a=x>y?x:y D.x%=4 参考答案:B 答案解 ...
- SpringCloud的入门学习之概念理解、Eureka服务注册与发现入门
1.微服务与微服务架构.微服务概念如下所示: 答:微服务强调的是服务的大小,它关注的是某一个点,是具体解决某一个问题.提供落地对应服务的一个服务应用,狭意的看,可以看作Eclipse里面的一个个微服务 ...
- 使用laravel-amdin调用文件上传阿里oss注意点
开发者工作中,项目代码开发提高效率,往往会使用一些github上面的一些扩展类,这里举例说明一下遇到的情况. 一.使用laravel-admin框架开发管理后台文件或者图片上传 情景:运营或者产品通过 ...
- NIO基础方法一
1.remaining();返回当前位置与limit之间得元素数. int[] intArray={1,2,3,4}; IntBuffer intBuffer=IntBuffer.wrap(intAr ...
- vue.js+THREE.js演示服务端3D模型流程总结
three.js官网 ·场景搭建 使用npm或者其他获取安装three,就像npm i three,之后在需要演示模型的vue组件内import * as THREE from 'three',此时我 ...
- leaflet 实现克里金插值功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- Flutter学习一
包管理 依赖本地包 dependencies: pkg1: path: ../../code/pkg1 依赖git包 dependencies: pkg1: git: url: git://githu ...
- spark利用yarn提交任务报:YARN application has exited unexpectedly with state UNDEFINED
spark用yarn提交任务会报ERROR cluster.YarnClientSchedulerBackend: YARN application has exited unexpectedly w ...
- 利用phpqrcode二维码生成类库合成带logo的二维码并且用合成的二维码生成海报(二)
前期准备 引入phpqrcode类库(下载地址:https://download.csdn.net/download/weixin_37557729/11891240:支持彩色二维码的下载地址:htt ...
- Linux系统学习 六、网络基础—Linux的IP地址的配置
1.ifconfig命令临时配置IP地址 2.setup工具永久配置IP地址 3.修改网络配置文件 4.图形界面配置IP地址 ifconfig命令临时配置IP地址 主要的作用是查看网络信息,也可以临时 ...