Javascript的同源策略是Web开发中一个十分重要的安全措施。它指的是,两个文档或脚本只有在协议、主机名和端口这三个信息都相同的情况下,才具有相同的源。其他情况下,它们就被认为是异源(跨源)的,Javascript的访问就会受到限制,以防止未经授权的信息全球公开。
同源策略的限制主要针对以下三个方面:
- cookie、LocalStorage及IndexDB等存储性数据
- DOM节点
- Ajax等发送网络请求的方法
举个例子,假如有两个网页a和b,它们的本地存储均有以下操作:
localStorage.setItem('key', 'value');localStorage.getItem('key');在同源的情况下,这两个操作可以互相访问,而在不同源的情况下,这两个操作将无法访问对方的本地存储,因为这样做会导致安全风险。在实际开发中,我们常常会面临这样的问题:如何与其他域的服务器进行通信?
解决方法就是,使用JSONP技术。JSONP可以破解跨域限制,它的原理是利用cript>标签的跨域能力,通过script.src的方式来实现在不同域之间传递JSON数据。以下是代码实现:
function JSONP(url, callback) {var script = document.createElement('script');script.src = url + '&callback=' + callback;document.body.appendChild(script);}function parseData(data) {console.log(data);}JSONP('example/data', 'parseData');在上述代码中,我们使用JSONP方法来从example获取数据,parseData函数将在数据获取成功后自动调用,并且将获得的数据作为参数传入。
总结一下,同源策略是Web开发中非常重要的安全机制。它的限制在cookie、LocalStorage、DOM节点、Ajax等多个方面体现出来。JSONP技术可以破解跨域限制,但也有一定的局限性。在实际开发中,我们应该注重安全问题,合理使用同源策略和JSONP技术,让Web应用变得更加健壮和安全。