浅谈js跨域问题

learn_shifeng 发布于2019-08-21 10:41 / 2181人阅读

摘要：使用的方法假设要在和页面之间传递数据页面页面参考链接下面谈一下跨域访问的一些安全性问题，主要是和攻击问题。在跨域访问中，注入主要是参数注入，如防止措施是对参数进行校验过滤。

所谓跨域，或者异源，是指主机名（域名）、协议、端口号只要有其一不同，就为不同的域（或源）。浏览器中有一个基本的策略，叫同源策略，即限制“源”自A的脚本只能操作“同源”页面的DOM。

先聊一下w3c的CORS规范：
CORS旨在定义一种规范让浏览器在接收到从提供者获取资源时能够决定是否应该将此资源分发给消费者作进一步处理。
具体如下：
（1）消费者发送一个Origin报头到提供者端：Origin: http://www.a.com；
（2）提供者发送一个Access-Control-Allow-Origin响应报头给消费者，如果值为*或Origin对应的站点，则表示同意共享资源给消费者，如果值为null或者不存在Access-Control-Allow-Origin报头，则表示不同意共享资源给消费者；
（3）浏览器根据提供者的响应报文判断是否允许消费者跨域访问到提供者源。

除了CORS，解决跨域还有以下几种方法：

1、通过Jsonp跨域

对于一段JavaScript脚本来说，其“源”与它存储的地址无关，而取决于脚本被加载的页面，例如我们在页面中使用
这里脚本与当前页面是同源的。除了

也可以使用jquery封装的方法，如$.ajax:

当然还需要服务端配合处理：

String handleData = request.getParameter("callback");//客户端的回调函数
out.println(handleData+"("+resultJSON+")");//返回jsonp格式数据

但这种方式只能用于get请求 (╯-╰)/。

2、修改document.domain来跨子域

www.a.com/1.html和a.com/2.html是不同域的，要使他们可以跨域访问，可通过修改document.domain来实现，即在两个页面中都设置：
document.domain="a.com";
需要注意的是document.domain只能往父级修改，如a.com改为www.a.com是不被允许的，这也是此方法的局限性，只使用于跨子域访问。

3、使用window.name来跨域访问

window.name是同一浏览器窗口下载入的所有页面共享的数据字段，所有窗口都可以读写此字段的内容。所以假设a.com要访问b.com的数据，只需要在b.com中将数据放在window.name中，然后a.com从中取出即可。此方法适用于像iframe这样的嵌套页面架构。

4、使用HTML5的window.postMessage方法:

假设要在a.com和b.com页面之间传递数据：

//a.com页面
window.postMesssage(JSON.stringify({xxx:"test"},"b.com");
//b.com页面
window.onMessage=function(e){
    var data = JSON.parse(e.data);
    console.log(data); //{xxx:"test"}
}

参考链接：http://javascript.ruanyifeng.com/bom/windowpostmessage.html

下面谈一下跨域访问的一些安全性问题，主要是CSRF和XSS攻击问题。

一、CSRF/XSRF攻击

网上找到一个大神发的图，贴在这里膜拜一下：

其实就是危险网站B在自己网站上贴了网站A的某个接口链接（a标签或form提交是支持跨域的），引导用户点击（骗取用户cookie）去访问网站A，祸因在于用户登录了A在不注销的情况下登录了B。解决方法有很多，如验证码，表单附加随机数等，原理基本都是校验登录方的请求令牌。
如果使用跨域访问可以更简单的进行CSRF攻击（当然也有相应的防范措施），当某网站通过JSONP方式来跨域传递用户认证后的敏感信息时，攻击者可以构造恶意的JSONP调用页面，诱导被攻击者访问来达到截取用户敏感信息的目的。（这里有一个微博股吧CSRF攻击的例子）
目前比较好的防止CSRF攻击的方法是referer过滤校验+token验证，即服务端检测JSON文件调用来源和检查token数据是否匹配。

二、XSS攻击（XSS注入）

此攻击方法类似sql注入，即提交含有恶意脚本的数据到服务器，从而达到破坏页面甚至盗取cookie伪装登录等目的。例如，在a.com/index.ftl中有如下代码：欢迎你，${username}，这时恶意网站b.com传递参数：
username=
这样就轻而易举地盗取了用户的cookie值了。
在jsonp跨域访问中，xss注入主要是callback参数注入，如：

防止措施是对参数进行校验过滤。

云服务器 GPU云服务器 js跨域问题跨域问题 cdn跨域问题 javascript跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86006.html

浅谈浏览器端JavaScript跨域解决方法

摘要：回调函数数据就是了，回调函数用来响应应该在页面中调用的函数，数据则用来传入要执行的回调函数。比如会得到小明这样，里面的这个函数就能执行并且得到数据了。由于安全的原因，浏览器做了很多方面的工作，由此也就引入了一系列的跨域问题，需要注意的是：跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 crsf 跨站攻击原理，请求是发送到了后端服...

dantezhao 2019-08-19 17:43 评论0 收藏0
浅谈前端跨域

摘要：一什么是跨域跨域简单的理解就是同源策略的限制。同源策略限制的内容请求不能正常进行。同源策略默认地址是网页的本身。一、什么是跨域？跨域简单的理解就是JavaScript同源策略的限制。是出于安全的考虑，a.com域名下的js不能操作b.com或者c.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算叫跨域。一个正常...

dunizb 2019-08-26 13:55 评论0 收藏0
浅谈JSONP

摘要：就这样被发明了，利用的属性不受同源策略的控制，作弊般地巧妙地逃过了浏览器的这一限制。然后，声明这个回调函数。这是我在13年初写的文章，当时懵懵懂懂写下了自己对JSONP的理解。文章原文博客欢迎订阅提到JSONP，我当时在网上找了无数帖子也没有看懂它。那些文章大同小异，都是讲到JSONP原理以后就戛然而止，把我们这些初学者搞得云里雾里。所以，写下这篇文章，希望对大家有帮助...

binta 2019-08-21 10:41 评论0 收藏0
浅谈模块化加载的实现原理

摘要：如果你不太明白模块化的作用，建议看看玉伯写的一篇文章。我们可以使用自己的方式去管理代码，不过有人已经研究处理一套标准，而且是全球统一，那就拿着用吧关于规范，我这里就不多说了，可以去看看草案，玉伯也翻译了一份。试发一弹，本文同步自：http://barretlee.com 略蛋疼的是不支持: [title][url reference] 相信很多人都用过 seajs、 require...

CodeSheep 2019-08-21 12:09 评论0 收藏0
浅谈前端中的错误捕获

摘要：浅谈前端中的错误捕获某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢日常某次发布怎么确定发布会没有引入呢此时捕获到代码运行的并上报是多么的重要。浅谈前端中的错误捕获某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。既然捕获错误并上报是日常开发中不可缺少的一环，那怎么捕获到...

li21 2019-08-22 18:21 评论0 收藏0