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标签crossorigin属性及同源策略和跨域方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！