1.同源策略:
同源策略(same-origin policy):浏览器的同源策略是一个重要的安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。
它能帮助阻隔恶意文档,减少被攻击。例如它可以防止互联网上的恶意网站在浏览器中运行js脚本,从第三方网络邮件服务(用户已登录)或公司内网(因没有公共IP地址而受到保护,不会被攻击者直接访问)读取数据,并将这些数据转发给攻击者。
同源:如果两个url的协议、主机和端口都相同的话,那么这两个url是同源的。http与https视为不同的协议。
源的继承:在页面中通过about:blank或javascript:URL执行的脚本会继承打开该URL的文档的源。
2.CORS:
同源策略控制不同源之间的交互,例如在使用XMLHttpRequest或<img>标签时则会受到同源策略的约束。在某些情况下确实有跨源访问的需求,那么如何满足这种需求呢?可以使用CORS来允许跨源访问。CORS是http的一部分,它允许服务端来指定哪些主机可以从这个服务端加载资源。CORS:Cross-Origin Resource Sharing即跨源资源共享。
我们先利用http-server这个命令行服务器来演示一下同源策略:
新建两个平行的文件夹cors-1与cors-2。
cors-1中新建一个http-server-8888.htm:
<html>
<head>
<title>
http-server-8888
</title>
</head>
<body>
<script>
function fetchReq(url){
fetch(url).then(res => res.text());
}
fetchReq("http://localhost:9999/index.htm")
</script>
</body>
</html>
cors-2中新建一个index.htm:
<html>
<head>
<title>
http-server-9999
</title>
</head>
<body>
http-server-9999 index
</body>
</html>
可以看到从
http://localhost:8888/http-server-8888.htm访问http://localhost:9999/index.htm因为同源策略被阻止了。
如果我们使用http-server -p 9999 --cors启动第二个服务,然后再次从第一个服务开始访问第二个服务,这一次我们就可以成功,因为第二个服务启动时--cors参数告诉服务器允许跨源资源共享。
通过浏览器的控制台可以看到响应头多了两个Header,其中最核心的就是Access-Control-Allow-Origin。