JavaScript(Ajax)和Cookie的同源策略

一个URL由四部分组成，拿http://blog.csdn.net/yanical来说（http的默认端口是80，https的默认端口是443。如果是默认端口，可以省略，所以这个URL等价于http://blog.csdn.net:80/yanical）

协议：http

主机：blog.csdn.net

端口：80

路径：/yanical

所谓的同源就是要求这个URL的协议，主机，端口三部分都相同。一般我们说的域或者domain也是这里的源的概念。

对于上面的URL，有以下结果：

其他URL	是否同源	原因
http://blog.csdn.net/xilang/index.html	是
http://blog.csdn.net/yanical/othersub	是
https://blog.csdn.net/yanical	否	协议，端口不同
http://blog.csdn.net:81/yanical	否	端口不同
http://www.csdn.net/	否	主机不同

存在一种异常情况，javascript可以通过设置document.domain来修改主机和端口部分的值，如果这样做，设置后的值就会作为同源策略检查的标准。比如对于http://blog.csdn.net/yanical和http://bbs.csdn.net/可以执行下面的javascript：

document.domain = "csdn.net";

这样后，这两个页面就是同一个源了。出于安全的考虑，不能设置为其他主domain，比如http://www.csdn.net/不能设置为sina.com

我们看到，javascript中只有主机的部分被设置了，没有提到端口的部分。事实上，在执行上面的javascript的时候，端口也被设置了，且被设置成了null值。所以，对于http://blog.csdn.net:81/yanical和http://blog.csdn.net/yanical如果都执行上面的javascript，那么端口都被设为了null，他们也就变成同源了。

同源策略最早被用来阻止一个源的js去获取或者修改另外一个源的文档属性，这里的javascript的源指的是加载javascript的HTML页面的源，而不是javascript自己所在的源。

举个例子，有两个HTML和两个javascript。test.html包含一个iframe引用了frame.html，且他们在不同的源；test.html还引用了两个js，他们其中一个也和test.html的源不同；test.html的javascript还试图去修改frame.html。

test.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<iframe id="vFrame" name="vFrame" src="http://127.0.0.1/content/frame.html"></iframe>
</body>
<script language="javascript" src="http://127.0.0.1/content/otherdomain.js"></script>
<script language="javascript" src="http://localhost/content/samedomain.js"></script>
<script>
document.write('------write from test.html');
alert(document.getElementById('vFrame').contentDocument.body.innerHTML='------overwrite frame from test.html';
</script>
</html>

frame.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<script>
document.write('------write from frame.html');
</script>
</body>
</html>

otherdomain.js:

document.write('------write from otherdomain.js');

samedomain.js:

document.write('------write from samedomain.js');

我们访问http://localhost/test.html,执行结果如下：

可以看到，尽管test.html和otherdomain.js的源不同，但是因为otherdomain.js是test.html加载进来的，所以他们还是同一个源。但是test.html和frame.html就不是同一个源，浏览器阻止了修改请求。

现在同源策略还被用来判断一个XMLHTTPRequest(AJAX)是否合法，一个页面只能向同一个源的服务器发起AJAX请求。

需要注意的是，Cookie的同源策略和javascript略有不同，就是默认情况下，Cookie忽略了协议和端口，只考虑主机这一部分（端口这一部分听说可以设置，设置后就也会考虑端口，但是java api里我没看到可以设置端口的地方），所以https://blog.csdn.net/yanical和http://blog.csdn.net/yanical的Cookie是共享的。

关键字：Javascript， AJAX，Cookie，同源，同域，同domain

JavaScript(Ajax)和Cookie的同源策略相关推荐

09. ajax跨域问题,同源策略
有三个标签允许跨域加载资源 <img src=""/> <link href=""/> <script src="&qu ...
JavaScript Ajax
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语 ...
Ajax→异步的JavaScript和XML、HTTP请求响应、Ajax简介同步异步、XMLHttpRequest类的方法及属性、原生Ajax、Koa实现Ajax、接口文档、浏览器同源策略、反向代理
浏览器服务器 HTTP请求响应数据库后端语言 Ajax简介同步异步 Koa前端框架 XMLHttpRequest类的方法及属性原生Ajax Koa实现Ajax JSON DOM 接口文档浏览器同 ...
JS实现的ajax和同源策略
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
Django 【第十九篇】JS实现的ajax、同源策略和前端JSONP解决跨域问题
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录同源策略和跨域同源策略跨域 JSONP JSONP的实现原理自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
新蜂商城（newbee-mall-api）部分接口实验，跨域处理（同源策略，跨域访问，CORS）,系统安全问题（Session，Cookie，Token，OAuth）（软件工程综合实践课程第十三周）
文章目录一.要求二.知识总结跨域处理 1.同源策略 1.1 浏览器的同源策略 1.2 跨域请求实验 2 跨域访问 2.1 添加响应头来处理跨域 2.1.1 CORS 跨域资源共享 2.1.2 设 ...
JavaScript 同源策略跨域 JSONP CORS 防抖和节流
同源策略与跨域同源策略定义比较通俗理解跨域定义浏览器对跨域请求的拦截实现跨域的两种方法自定义JSONP jQuery的JSONP 防抖与节流防抖节流总结同源策略定义同源策 ...
JavaScript 的同源策略
本文内容来源:https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy (由于我在本地打不开此链接,所以就转载过 ...
浏览器同源策略及Cookie的作用域
所谓"同源"指的是"三个相同": 1.协议相同 2.域名相同 3.端口相同当着三个地方相同才算同源例如:http://www.example.com:888 ...

JavaScript(Ajax)和Cookie的同源策略

JavaScript(Ajax)和Cookie的同源策略相关推荐

最新文章

热门文章