快捷搜索:

金沙第一娱乐娱城官网

当前位置:金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网 > 据驻留的远程服务器并且每个请求都前往同一域

据驻留的远程服务器并且每个请求都前往同一域

来源:http://www.dlksamusic.com 作者:金沙第一娱乐娱城官网 时间:2019-10-01 12:27

跨域访问和防盗链基本原理(二)

2015/10/18 · HTML5 · 跨域, 防盗链

原文出处: 童燕群 (@童燕群)   

 

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

二、跨域访问基本原理

在上一篇,介绍了盗链的基本原理和防盗链的解决方案。这里更深入分析一下跨域访问。先看看跨域访问的相关原理:跨网站指令码。维基上面给出了跨站访问的危害性。从这里可以整理出跨站访问的定义:JS脚本在浏览器端发起的请求其他域(名)下的网站数据的HTTP请求。

这里要与referer区分开,referer是浏览器的行为,所有浏览器发出的请求都不会存在安全风险。而由网页加载的脚本发起请求则会不可控,甚至可以截获用户数据传输到其他站点。referer方式拉取其他网站的数据也是跨域,但是这个是由浏览器请求整个资源,资源请求到后,客户端的脚本并不能操纵这份数据,只能用来呈现。但是很多时候,我们都需要发起请求到其他站点动态获取数据,并将获取到底数据进行进一步的处理,这也就是跨域访问的需求。

 

现在从技术上有几个方案去解决这个问题。

 金沙第一娱乐娱城官网 1

3、如何使用JSONP?

1、JSONP跨域访问

利用浏览器的Referer方式加载脚本到客户端的方式。以:

<script type="text/javascript" src=";

1
<script type="text/javascript" src="http://api.com/jsexample.js"></script>

这种方式获取并加载其他站点的JS脚本是被允许的,加载过来的脚本中如果有定义的函数或者接口,可以在本地使用,这也是我们用得最多的脚本加载方式。但是这个加载到本地脚本是不能被修改和处理的,只能是引用。

而跨域访问需要正是访问远端抓取到的数据。那么能否反过来,本地写好一个数据处理函数,让请求服务端帮助完成调用过程?JS脚本允许这样。

<script type="text/javascript"> var localHandler = function(data) { alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:'

  • data.result); }; </script> <script type="text/javascript" src=";
1
2
3
4
5
6
7
<script type="text/javascript">
var localHandler = function(data)
{
    alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

远端的服务器上面定义的remote.js是这样的:

JavaScript

localHandler({"result":"我是远程js带来的数据"});

1
localHandler({"result":"我是远程js带来的数据"});

上面首先在本地定义了一个函数localHandler,然后远端返回的JS的内容是调用这个函数,返回到浏览器端执行。同时在JS内容中将客户端需要的数据返回,这样数据就被传输到了浏览器端,浏览器端只需要修改处理方法即可。这里有一些限制:1、客户端脚本和服务端需要一些配合;2、调用的数据必须是json格式的,否则客户端脚本无法处理;3、只能给被引用的服务端网址发送get请求。

<script type="text/javascript"> var localHandler = function(data) { alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:'

  • data.result); }; </script> <script type="text/javascript" src=";
1
2
3
4
5
6
7
<script type="text/javascript">
var localHandler = function(data)
{
    alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.php?callBack=localHandler"></script>

服务端的PHP函数可能是这样的:

PHP

<?php $data = "......."; $callback = $_GET['callback']; echo $callback.'('.json_encode($data).')'; exit; ?>

1
2
3
4
5
6
7
8
<?php
 
$data = ".......";
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';
exit;
 
?>

这样即可根据客户端指定的回调拼装调用过程。

2、JSONP有什么用?

  1. <?php  
  2.   
  3. //服务端返回JSON数据  
  4. $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
  5. $result=json_encode($arr);  
  6. //echo $_GET['callback'].'("Hello,World!")';  
  7. //echo $_GET['callback']."($result)";  
  8. //动态执行回调函数  
  9. $callback=$_GET['callback'];  
  10. echo $callback."($result)";  

2、CORS(Cross-origin resource sharing)跨域访问

上述的JSONP由于有诸多限制,已经无法满足各种灵活的跨域访问请求。现在浏览器支持一种新的跨域访问机制,基于服务端控制访问权限的方式。简而言之,浏览器不再一味禁止跨域访问,而是需要检查目的站点返回的消息的头域,要检查该响应是否允许当前站点访问。通过HTTP头域的方式来通知浏览器:

JavaScript

Response headers[edit] Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Expose-Headers Access-Control-Max-Age Access-Control-Allow-Methods Access-Control-Allow-Headers

1
2
3
4
5
6
7
Response headers[edit]
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Methods
Access-Control-Allow-Headers

服务端利用这几个HTTP头域通知浏览器该资源的访问权限信息。在访问资源前,浏览器会先发出OPTIONS请求,获取这些权限信息,并比对当前站点的脚本是否有权限,然后再将实际的脚本的数据请求发出。发现权限不允许,则不会发出请求。逻辑流程图为:

金沙第一娱乐娱城官网 2

浏览器也可以直接将GET请求发出,数据和权限同时到达浏览器端,但是数据是否交给脚本处理需要浏览器检查权限对比后作出决定。

一次具体的跨域访问的流程为:

金沙第一娱乐娱城官网 3

因此权限控制交给了服务端,服务端一般也会提供对资源的CORS的配置。

跨域访问还有其他几种方式:本站服务端代理、跨子域时使用修改域标识等方法,但是应用场景的限制更多。目前绝大多数的跨域访问都由JSONP和CORS这两类方式组成。

1 赞 1 收藏 评论

金沙第一娱乐娱城官网 4

JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

Html代码  金沙第一娱乐娱城官网 5

 

Js代码  金沙第一娱乐娱城官网 6

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

Js代码  金沙第一娱乐娱城官网 7

 金沙第一娱乐娱城官网 8

  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  2. <script type="text/javascript">  
  3.     function jsonpCallback(result) {  
  4.         //alert(result);  
  5.         for(var i in result) {  
  6.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
  7.         }  
  8.     }  
  9.     var JSONP=document.createElement("script");  
  10.     JSONP.type="text/javascript";  
  11.     JSONP.src="";  
  12.     document.getElementsByTagName("head")[0].appendChild(JSONP);  
  13. </script>  

 

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

Js代码 

1、什么是JSONP?

JavaScript的链接,必须在function的下面。

 

要了解JSONP,不得不提一下JSON,那么什么是JSON ?

 

1、什么是JSONP?

 

 

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。

 

 

Js代码 

$.getJSON
$.ajax
$.get

 

 

JSON也有一些劣势:

 

 

 

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

客户端JS代码在jQuery中的实现方式1:

 

 

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。

其中 jsonCallback 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。

这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用 GET 请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。

HTML代码 (任一 ):

JSON也有一些劣势:

  1. jsonpCallback({msg:'this is json data'})  

 

 

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

 

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

 金沙第一娱乐娱城官网 9

 

下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。

 

尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

 

 

 

本文由金沙第一娱乐娱城官网发布于金沙第一娱乐娱城官网,转载请注明出处:据驻留的远程服务器并且每个请求都前往同一域

关键词: