網頁應用設計中的JSONP技巧可以做到跨網域資料傳送的功能,但它卻只能傳送純文字資料,而我希望能在跨網域的環境下開發AJAX上傳檔案的功能,那麼就需要一些小技巧才能進行。
雖然我想應該也有人提出這個作法了,不過實際上在之前我並沒有找到過。因此我把這個在論文中實作的技巧在此記錄、分享。
這篇用到大量的網頁設計專有名詞,主要是以AJAX設計網頁應用的人為主要對象撰寫的。
範例
這個範例網頁中,你可以上傳一個檔案,並填寫下面的敘述Description,再按下UPLOAD按鈕上傳。伺服器會回傳給你檔案的上傳結果、檔案名稱、檔案大小。檔案上傳最大是1MB,超過1MB的檔案,伺服器會回傳錯誤結果。
原本我是將HTML網頁放在Dropbox空間(http://dl.dropbox.com/),而伺服器則是放在You Hosting的空間(http://pulipuli.co.cc/),想用兩個不同網域來呈現透過POST方式實作JSONP跨網域檔案上傳的範例。但是因為You Hosting放著一陣子就被強制關閉了,所以很遺憾的,在此無法看到線上即時的成果。(2011/9/19更新)
此範例中用了三個檔案,請直接下載研究、並自行配置使用吧:
應用背景
使用AJAX開發網頁應用的程式設計師,大多時候都是在同個網域之下處理client(使用者端電腦)與server(伺服器)之間的訊息傳遞。更進一步的,利用jQuery框架,以JSON物件、GET方式傳遞資料的jQuery.getJSON()函數,讓處理AJAX資料傳遞更為簡單。
但是我的論文中需要使用的AJAX跟上述常見情況有個很大的差別。第一個是跨網域,client端呼叫server端資料,這兩者是位於不同的網域,因此普通的GET或POST方式都無法讓client端取得server端的資料,必須仰賴JSONP(JavaScript Object Notation with Padding)技巧;其二,這次要傳送的資料並非純文字或可以用JSON來組織的資料,而是需要上傳二進位的檔案,或是超過GET資料傳送上限的資料量。在這種情況下是不能單純使用JSONP,必須使用POST方式與form表單傳送資料才行。
因此,我將POST的傳送優勢與JSONP的跨網域AJAX特色融合,寫成以POST方式實作的JSONP跨網域檔案傳送。
角色
在此應用中是以前端的瀏覽器與遠端的伺服器進行溝通合作,因此我先簡單敘述這兩種角色。
「C」 client
在這篇文章中,我以「C」表示「client」(客戶端)瀏覽器中執行的程式語言,主要是HTML跟JavaScript,這也是AJAX的基礎。多虧了jQuery框架克服了相容性問題,因此在Chorme、Firefox或IE都可以使用。
在此範例中,「C」是擺在Dropbox的空間,他並不具備伺服器端的功能,不能判斷檔案大小。此外,我將「C」的HTML外觀寫在client.html當中,而JavaScript的邏輯運作寫在client.js當中。稍候會再敘述他們的功用。
「S」 server
另外「S」代表「server」(伺服器),在此範例中我以PHP寫成,擺在You Hosting空間。伺服器端的程式語言具備了處理檔案的能力,可以判斷檔案大小。在此利用AJAX架構,讓「C」能夠與「S」進行溝通。
為了利用POST傳送檔案,並能以JSONP進行跨網域溝通,「S」必須判斷請求方式(request method)是POST還是GET。並以session來暫存狀態。
稍微有點概念之後,接下來就是實際看看這方法要怎麼運作了。
Step1. C1:資料準備
為了讓大家好理解,此範例中的檔案上傳做得跟傳統網頁一樣。這是一個<form>表單,裡面有個可以選擇檔案上傳的input,並限制只能上傳1MB大小的檔案,還有一個可以撰寫「Description」(敘述)的input,最後則是一個submit(遞交)的「UPLOAD」按鈕。
在這個表單前面,引用了大家的好朋友jQuery以及我另外寫的client.js;表單後面則有個<div>容器,負責顯示待會跟伺服器溝通的結果。
原始碼很簡單,寫在client.html中,摘錄如下:
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load("jquery","1.2.6");</script>
<script src="client.js" type="text/javascript"></script>
<form id="form" method="post" action="http://pulipuli.co.cc/20110517-jsonp-post/server.php" enctype="multipart/form-data">
<input type="hidden" name="max_file_size" value="1048576">
<label>File: <input type="file" name="file" /> * Max File Size: 1MB</label>
<br />
<label>Description: <input type="text" name="description" value="The description of this file."></label>
<br />
<button type="submit">UPLOAD</button>
</form>
<div id="output"></div>
另外,為了讓這個form表單能具備AJAX跨網域上傳的功能,我利用JavaScript幫他做了些初始化的調整,讓form的遞交會以AJAX方式進行,並設定回傳資料時所要執行的回呼函數(callback)。
這部份寫在client.js開頭,程式碼如下:
/**
* Initialize Form
*/
$(function () {
$("#form").submit(function () {
if ($(this).attr("jsonp_by_post") == null)
{
$.jsonp_by_post(this, function (_result) {
//...Step7時再講解...
});
return false;
}
});
});
Step2. C2:AJAX式的POST遞交
當form的UPLOAD按鈕被按下時,就會開始一連串的AJAX式的POST遞交作業。
在此步驟中,JavaScript會做以下事情:
- 以timestamp作為辨識每次檔案上傳作業的代號。
- 讀取form的資料,並將timestamp設定到action的網址中,提供伺服器辨識每次檔案上傳作業的代號。
- 建立一個接收資料的iframe,隱藏之,並設定name。
- 調整form的action跟name,讓form的遞交會傳送到iframe去,而不是把整個網頁都替換掉。
- 給form做個記號(此範例用jsonp_by_post屬性),以免跟Step1初始化form的submit事件相衝突。
- 設定iframe遞交完成之後的後續動作。
- form執行遞交作業。
程式碼寫在client.js,摘錄如下,其中6.設定iframe遞交完成之後的動作,我會在下面的Step4詳細敘述,這邊先以略過。
$.jsonp_by_post = function (_form_ele, _callback) {
var _timestamp = (new Date()).getTime();
var _form_obj = $(_form_ele);
var _action = _form_obj.attr("action");
var _action_post = _action + "?timestamp=" + _timestamp;
//建立接收資料的iframe
var _iframe_name = _action + _timestamp;
var _iframe_obj = $('<iframe></iframe>')
.attr('name', _iframe_name)
.appendTo($('body'));
//隱藏iframe
_iframe_obj.css('width', '0').css('height', '0')
.css('position', 'absolute').css('left', '-1000px').css('top', '-1000px');
//調整傳送資料的form
_form_obj.attr('action', _action_post)
.attr('target', _iframe_name)
.attr('method', 'post')
.attr('enctype', 'multipart/form-data');
//防止重複觸發初始化的事件
_form_obj.attr('jsonp_by_post', 'true');
//設定iframe讀取完畢之後的動作
_iframe_obj.load(function () {
//...Step4時再講解...
});
//執行遞交
_form_obj.submit();
};
Step3. S1:伺服器接收POST資料
伺服器端的程式會依照請求方式的不同,決定此程式是要接收檔案上傳,還是要回報檔案上傳的結果。
在Step3中,form以POST方式呼叫了位於另一個伺服器的server.php,並執行以下動作:
- 接收$timestamp,作為判斷這次作業的辨識代號,並與一個特定的$header組成session使用的$index。
- 透過透過PHP的$_SERVER['REQUEST_METHOD']來判斷請求方式。
- 如果是POST,則將檔案的檔名、大小、以及從POST過來的description資料儲存在session當中。
- 判斷檔案上傳的狀態,失敗就是「error」,成功則是「sussesful」。
- 顯示一些資料,作為簡單偵錯。但其實可以省略。
以下程式碼寫在server.php中,摘錄如下。請求方式是GET的情況,我會在下面的Step6再來講解。
<?php
$header = "data";
$timestamp = $_GET["timestamp"];
$index = $header . $timestamp;
session_start();
if ($_SERVER['REQUEST_METHOD'] == "POST")
{
$description = $_POST["description"];
$_SESSION[$index]['name'] = $_FILES['file']['name'];
$_SESSION[$index]['size'] = $_FILES['file']['size'];
$_SESSION[$index]['description'] = $description;
if ($_FILES['file']['size'] == 0)
{
$_SESSION[$index]['state'] = 'error';
echo "false";
}
else
{
$_SESSION[$index]['state'] = "sussesful";
echo "true";
}
}
else
{
// ...Step5時再講解...
}
Step4. C3:以JSONP取得檔案上傳結果
當iframe讀取完畢之後,「C」就可以知道檔案上傳動作已經結束。但是因為POST在跨網域的狀況下是無法取得iframe裡面的資料,所以必須要改用JSONP的方式來跟「S」取得結果。
這些動作寫在Step2中省略的iframe onload事件中,大概動作如下:
- 設定JSONP的網址,加入jQuery.getJSON()特有的callback=?參數。
- 執行jQuery.getJSON(),並設定執行完後的回呼函數。
這些程式碼寫在client.js中,摘錄如下。執行完getJSON()的回呼函數會在Step6講解。
//設定iframe讀取完畢之後的動作
_iframe_obj.load(function () {
//設定get方法JSONP的網址,要注意加入了JSONP特有的callback參數
var _action_get = _action + "?timestamp=" + _timestamp
+ "&callback=?";
$.getJSON(_action_get, function (_result) {
// ...Step6時再講解...
});
});
Step5. S2:伺服器回傳檔案上傳的結果
以JSONP方式呼叫伺服器時,「S」是以GET方式運作,他會做以下動作:
- 接收$timestamp,並與$header組成$index。這跟Step3做的事情一樣。
- 判斷請求方法為GET。
- 取得回呼函數的代號$callback,這是搭配jQuery.getJSON的作法。
- 從$index取得session資料,將檔案上傳結果存進$output字串。
- 刪除session資料,避免後來有心人再利用同樣的timestamp取得資料。
- 以JSONP方式輸出。
以下程式碼寫在server.php中,摘錄如下:
<?php
$header = "data";
$timestamp = $_GET["timestamp"];
$index = $header . $timestamp;
session_start();
if ($_SERVER['REQUEST_METHOD'] == "POST")
{
// ...Step3講解...
}
else
{
$callback = $_GET['callback'];
$output = '';
if (isset($_SESSION[$index]))
{
$output = $_SESSION[$index]['state'].'; '
.$_SESSION[$index]['name'].'; '
.$_SESSION[$index]['size'].'; '
.$_SESSION[$index]['description'];
unset($_SESSION[$index]);
}
if (is_null($callback))
echo $output;
else
echo $callback."('".$output."');";
}
Step6. C4:接收資料,復原form,呼叫回呼函數
以jQuery的getJSON取得資料之後,接下來就是復原form、刪除臨時建立的iframe,然後呼叫回呼函數。
這段程式碼也很簡單,寫在client.js中,摘錄如下:
$.getJSON(_action_get, function (_result) {
//復原form
_form_obj.attr('action', _action)
.removeAttr('target')
.removeAttr('jsonp_by_post');
//移除iframe
_iframe_obj.remove();
_callback(_result);
});
Step7. C5:結果輸出
在Step1初始化時設定好的回乎函數會在最後接收資料,然後將結果輸出到div容器中。程式碼寫在client.js的上方,摘錄如下:
$.jsonp_by_post(this, function (_result) {
$("#output").html("Message: " + _result);
});
如果檔案正常上傳,你會看到以下畫面:
如果你上傳超過1MB的檔案,則伺服器會記錄錯誤狀態,於是會看到以下畫面:
這樣就大功告成啦!
變化與應用
範例中的講解很簡單,身為能夠舉一反三的程式設計師,腦袋裡面應該已經呈現出很多不同的應用方式吧。這邊我大略提一下幾個變化的重點,還有最後應該注意的安全性問題。
資料的輸入
在此範例中,我所有資料都是來自於撰寫好的form表單。實作時,我們的原始資料不一定是真的來自form表單,通常會以JSON、陣列、變數形式存在記憶體中,以方便JavaScript進行處理。
如果是以JSON等非form的資料型態,想要進行跨網域的AJAX傳輸,那麼你還是得要自己將這些資料寫成form,這樣才能以POST進行遞交。雖然多了點步驟,但相信對於熟悉jQuery的你來說應該不是什麼問題。
安全性問題
網頁之間有很多跨網域的限制,而本篇旨在於打破這個跨網域限制來做到更多功能,但相對的就會負擔起更多安全性問題。
提供JSONP的服務,很容易就會受到跨網域指令碼(Cross-site Script)的攻擊,而被找漏洞、挖出使用者的資料。我並不是資安專家,對這方面研究還不夠深入,只能提供幾個簡單的安全性加強方向。大致上,我建議搭配身分認證的session、來源IP或網址,來判斷這個C是否有跟S溝通的資格,S再決定是否接受C的POST或GET請求。這樣應該會安全許多吧。
範例程式中為了講解方便,所以並沒有加上這些措施。如果你要將這個方法放到自己的應用程式中,請務必做好安全性的防範措施。
結語
這是我論文系統中實作的一個技巧,但因為論文無法寫出這些細節,所以我以寫blog的方式,記錄這個技巧的細節,供有需要的人參考。實際上這篇從想寫、擬完心智圖、寫了一半覺得不滿意、又改了好多次,到現在才完成。
這只是一個很基礎的AJAX技巧,可以應用到很多地方,可以進一步寫成更漂亮的framework或library。也許已經有人發表過這種方法了也說不定,不過,我另一個目的也只是給未來的自己留下一個參考而已,就作為一篇記錄吧。
(more...)
Comments