2012-12-19

JSON 跨域資料傳輸資料的方法

JSON 資料格式

 JSON 原名為 Javascript Object Notation,是一種輕量級的資料交換語言,以文字為基礎,且易於讓人閱讀。JSON最開始被廣泛的應用於WEB應用的開發,透過 JSON 資料格式, JavaScript 語言能輕易的處理或交換資料,所以在Web2.0興起前,JSON在WEB資料傳輸領域佔有重要的地位。

JSON 的描述資料結構有兩種型式,分別為物件(object) 與 陣列(array),多數的 JSON 資料則是採用兩者混用模式。

物件格式

物件是以大括弧包起來的一段描述  {  .....  } 。物件中包含了一系列 名稱:數值 的對應,而每個名稱:數值的對應間使用「,」分隔,如下所示:
{name1:value1, name2:value2}

陣列

陣列在是以中括弧包起來的一段描述  [ ..... ] 。每個值使用「,」分隔,範列如下:
["Taipei", "New Taipei", "Taichung"]

安全性問題

因 Javascript 一般都是使用 eval( ) 讀取 JSON 的資料,此方式是在可靠資料來源與不支援 JSON 解析的瀏覽器上最快速的方法。但因為透過 eval( ) 的方式同樣可以執行任意的 Javascript 導致安全性的漏洞。另一個安全上的問題則是在跨站請求偽造(Cross-site request forgery,簡稱 CSRF 或 XSRF) 的部分,而這個問題在Javascript採用了稱為沙盒的機制,限制Javascript僅能引入同一個網站的程式碼後提高了安全性。雖然採用沙盒的增加了安全性,卻導致 AJAX  無法進行跨網站間的資料傳輸。

解決 JSON 無法跨域 ( Cross Domain ) 的問題

解決此問題的方法有兩種,一、在 http response 的 header ,加入 Access-Control-Allow-Origin 的來源許可;二、透過 JSONP 的方式,將分述如下:

Access-Control-Allow-Origin

網頁伺服器在回應瀏覽器請求時,都會送口客戶端一個 http header,在 http header 中有時會帶有 Access-Control-Allow-Origin ,開發者透過定義 Access-Control-Allow-Origin,就可以控制 Javascript 的訪問與資料傳輸請求,接受 aaa.bbb.com 與 ccc.ddd.com 的訪問與資料傳輸請求。
Access-Control-Allow-Origin: http://aaa.bbb.com http://ccc.ddd.com

如果去設定 Access-Control-Allow-Origin 呢?可以透過Web伺服器的環境變數設定方式,

PHP 中加入
<?php header("Access-Control-Allow-Origin: *"); ?>

 ASP.NET 中加入
Response.AppendHeader("Access-Control-Allow-Origin", "*");

JSONP

JSONP 全名為 JSON with Padding ,為 JSON 的一種使用模式,可以讓網頁從別的網域取得資料。

callback = ?

JSONP 的方法所傳送的 URL 結尾都會帶一個問號 (?),這個問號會在取得 server 回傳值的時候,自動轉換成 call function 的 function name。

以下述的 test.html code 為例,要從 http://test.abc.org/json.php 取資得料,且無輸入值
Url 為 http://test.abc.org/json.php?iamback=?  ( callback function 的名稱不是重點 )

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSONP Example</title>
        <script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script> google.load('jquery','1.4.2');</script>
        <script>
           $(document).ready(function(){
                $("#button1").click(function(){
                   $.get('http://test.abc.org/json.php?iamback=?',                                                function(data){
                        $("#content").html('');
                        $("#content").append('Your name is' + data.name+'.<br />');                    
                        $("#content").append('You live in' + data.addr+'.');                    
                    }) ;
                 });              
            });          
        </script>      
    </head>
    <body>
        <button id="button1">JSONP Eaxmple</button> <br/>
        <div id="content">content</div>    
    </body>
</html>


而 json.php 的內容為

<?php echo $_GET['iamback'] . '(' . "{'name' : 'Tom','addr':'Taipei'}" . ')';?>

透過動態 callback function 載入的方式,Javascript 就具有取得跨域的 JSON 資料的能力。


Related Posts Plugin for WordPress, Blogger...

沒有留言 :

張貼留言

,,