跨域

127 阅读1分钟

1.跨域问题的由来

何谓同源:URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示它们同源。

浏览器的同源策略,从一个域上加载的脚本不允许访问另外一个域的文档属性 ,是浏览器上为安全性考虑实施的非常重要的安全策略。

举个例子:比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

2.跨域的影响范围

在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制, 但浏览器会限制脚本中发起的跨域请求。

比如,使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略。

Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求,而不能向任何其它域名发起请求。

不允许跨域访问并非是浏览器限制了发起跨站请求,而是跨站请求可以正常发起,但是返回结果被浏览器拦截了。

最好的例子是CSRF跨站攻击原理,请求是发送到了后端服务器,无论是否设置允许跨域, 有些浏览器不允许从HTTPS跨域访问HTTP,比如Chrome和Firefox,这些浏览器在请求还未发出的时候就会拦截请求,这是特例。

此外父页面js操作不同域的iframe属性时,也会受到跨域限制

3.如何进行跨域

方法1.通过PHP设置响应头允许跨域(CORS方式) CORS(跨域资源共享,Cross-Origin Resource Sharing)定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应头即可

header(“Access-Control-Allow-Origin:*”);// 允许任何来源

header(“Access-Control-Allow-Origin:http://local.com”); //只允许来自域名local.com的请求

代码如下:

image.png

请求其他域名native.com:

image.png 请求的结果:成功

image.png

方法2.使用php做代理去请求第三方api接口
php是可以跨域的,我们利用ajax请求本域名中的php文件,php再去请求第三方接口文件,从而达到跨域目的。

php做代理请求

image.png

ajax请求本域名php代理文件:

image.png

请求结果:成功

image.png 将数据取出:

image.png 结果:

image.png

方法3.jsonp方法 只能get

浏览器只对XHR(XMLHttpRequest)请求有同源请求限制,而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制,利用这个“漏洞”就可以很好的解决跨域请求。

JSONP就是利用了script标签无同源限制的特点来实现的,当向第三方站点请求时,我们可以将此请求放在

<script src="http://www.abc.com/index.php/?param1=1&callback=fnName"> </script>