其他分享
首页 > 其他分享> > script标签crossorigin属性及同源策略和跨域方法

script标签crossorigin属性及同源策略和跨域方法

作者:互联网

首先介绍(同源策略)

同源策略是浏览器最核心且基本的安全约定,要求协议、域名、端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务端也响应了,但是会拦截,浏览器无法接收到响应数据,保证了数据的安全,避免XSS攻击

跨域的解决办法:

一:document.domain设置

两个不同的源(子域等情况)可以通过设置document.domain告诉浏览器它们是同一个源,想要实现它们两个之间的通信两个都需要设置相同的document.domain

缺点:

用于父域和子域的情况;存在安全性问题,如果其中一个被攻击,另一个也会引起安全问题;适用范围为cookie共享或iframe使用(获取DOM等);

二:JSONP

原理:动态创建script标签,向服务器发送请求,设置script标签src属性后接callback=回调函数,回调函数名与响应一致,响应成功触发回调函数获取响应的数据

缺点:

存在安全问题,需要进一步做安全验证如token等信息;请求方式只能为get请求;

三:CORS

跨域资源共享,设置响应头,允许某个域或全部向服务器发送请求(Access-Control-Allow-Origin: '*')无请求方法限制

四:HTML5新增的window.postMessage API

允许跨窗口通信,无同源限制,postMessage(data, origin)参数一为通信内容,参数二为接收通信的窗口可以为*(所有),然后通过window.addEventListener('message', function(e){})监听message事件,e有三个属性值e.source:发送信息的窗口,e.origin:接收信息的窗口,e.data:通信的内容

五:window.name

只要在同一个窗口,无同源限制,可以通过window.name通信,window.name值长无限制,但须监听window.name值变化,影响应用性能

六:location.hash

即url#后面的片段,可以通过window.onhashchange方法监听获取通信内容

七:websocket

websocket通信协议采用ws://(非加密)wss://(加密)作为协议前缀,无同源限制,服务器可以通过验证请求头的origin实现通信

 

前端使用window.onerror事件捕获js脚本错误信息,当前端通过script标签加载跨域资源时window.onerror无法获取这些资源中的报错信息,会得到script error,无法知道具体错误,通过设置script标签的crossorigin属性就可以捕获到跨域资源的具体报错信息,对于通过CDN引入js时很有帮助

也需要请求的跨域资源设置Access-Control-Allow-Origin的响应头,不然无法访问该资源

标签:浏览器,请求,script,window,同源,跨域,crossorigin
来源: https://www.cnblogs.com/it-people/p/14772173.html