文章出處

Web API普遍采用面向資源的REST架構，將瀏覽器最終執行上下文的JavaScript應用Web API消費者的重要組成部分。“同源策略”限制了JavaScript的跨站點調用，這必然導致Web API不能垮域提供資源。如果Web API僅限于為“同源客戶端”提供資源，那么它都對不起自己的名字，因為Web本身是一個開放的協議。那么ASP.NET Web API通過怎樣的方式來實現跨域資源共享呢？

同源策略

瀏覽器是訪問Internet的工具，也是客戶端應用的宿主，它為客戶端應用提供一個寄宿和運行的環境。而這里所說的應用，基本是指在瀏覽器中執行的客戶端JavaScript程序。雖然是一種解釋性的腳本語言，JavaScript其實是無比強大的，原則上來講它可以做任何事。但是在能夠在JavaScript腳本并不都是值得信賴的，所以瀏覽器必須對JavaScript的執行作相應的限制，這就是我們接下來著重介紹的“同源策略（Same Origin Policy）”。

同源策略是瀏覽器的一項最為基本同時也是必須遵守的安全策略，毫不夸張地說，瀏覽器的整個安全體系均建立在此之上。同源策略的存在，限制了“源”自A的腳本只能操作“同源”頁面的DOM，“跨源”操作來源于B的頁面將會被拒絕。所謂的“同源”，必須要求相應的URI在如下3個方面均是相同的。術語“源（Origin）”在中文表達中顯得有點突兀，所以在接下來的內容中，我們更多地會采用“站點（Site）”或者“域（Domain）”這樣的說法，在未作特別說明的情況下均與“源”表達相同的意思。

  • 主機名稱（域名/子域名或者IP地址）
  • 端口號
  • 網絡協議（Scheme，分別采用“http”和“https”協議的兩個URI被視為不同源）

值得一提的是，對于一段JavaScript腳本來說，其“源”與它存儲的地址無關，而取決于腳本被加載的頁面。比如我們在某個頁面中通過如下所示的<script>標簽引用了來源于不同地方（“http://www.artech.com/”和“http://www.jinnan.me/”）的兩個JavaScript腳本，它們均與當前頁面同源。實際上接下來介紹的基于JSONP跨域資源共享就是利用了這個特性。

   1: <script src="http://www.artech.com/scripts/common.js"></script>
   2: <script src="http://www.jinnan.me/scripts/utility.js"></script>

除了<script>標簽，HTML還具有其它一些具有src屬性的標簽（比如<img>、<iframe>和<link>等），它們均具有跨域加載資源的能力，所以同源策略對它們不做限制。對于這些具有src屬性的HTML標簽來說，標簽的每次加載都意味著針對目標地址的一次HTTP-GET請求。

同源策略以及跨域資源共享在大部分情況下針對的是Ajax請求。同源策略主要限制了通過XMLHttpRequest實現的Ajax請求，如果請求的是一個“異源”地址，瀏覽器將不允許讀取返回的內容，我們可以通過一個簡單的實例來演示這一點。

實例演示：跨域調用Web API

接下來我們通過于一個簡單的實例來演示同源策略針對跨域Ajax請求的限制。如右圖所示，我們利用Visual Studio在同一個解決方案中創建了兩個Web應用。從項目名稱可以看出，WebApi和MvcApp分別為ASP.NET Web API和MVC應用，后者是Web API的調用者。我們直接采用默認的IIS Express作為兩個應用的宿主，并且固定了端口號：WebApi和MvcApp的端口號分別為“3721”和“9527”，所以指向兩個應用的URI肯定不可能是同源的。

我們在WebApi應用中定義了如下一個繼承自ApiController的ContactsController類型，它具有的唯一Action方法GetAllContacts返回一組聯系人列表。由于具體返回的數據類型為JsonResult<IEnumerable<Contact>>，所以聯系人 列表以JSON格式被序列化。

   1: public class ContactsController : ApiController
   2: {
   3:     public IHttpActionResult GetAllContacts()
   4:     {
   5:         Contact[] contacts = new Contact[]
   6:         {
   7:             new Contact{ Name="張三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
   8:             new Contact{ Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
   9:             new Contact{ Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
  10:         };
  11:         return Json<IEnumerable<Contact>>(contacts);
  12:     }
  13: }
  14:  
  15: public class Contact
  16: {
  17:     public string Name { get; set; }
  18:     public string PhoneNo { get; set; }
  19:     public string EmailAddress { get; set; }
  20: }

接下來們在MvcApp應用中定義如下一個HomeController，默認的Action方法Index會將對應的View呈現出來。

   1: public class HomeController : Controller
   2: {
   3:     public ActionResult Index()
   4:     {
   5:         return View();
   6:     }
   7: }

如下所示的是Action方法Index對應View的定義。我們的目的在于：當頁面成功加載之后以Ajax請求的形式調用上面定義的Web API獲取聯系人列表，并將自呈現在頁面上。如下面的代碼片斷所示，Ajax調用和返回數據的呈現是通過調用jQuery的getJSON方法完成的。

   1: <html>
   2: <head>
   3:     <title>聯系人列表</title>
   4:     <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.10.2.js")"></script>
   5: </head>
   6: <body>
   7:     <ul id="contacts"></ul>
   8:     <script type="text/javascript">
   9:         $(function ()
  10:         {
  11:             var url = "http://localhost:3721/api/contacts";
  12:             $.getJSON(url, null, function (contacts) {
  13:                 $.each(contacts, function (index, contact)
  14:                 {
  15:                     var html = "<li><ul>";
  16:                     html += "<li>Name: " + contact.Name + "</li>";
  17:                     html += "<li>Phone No:" + contact.PhoneNo + "</li>";
  18:                     html += "<li>Email Address: " + contact.EmailAddress + "</li>";
  19:                     html += "</ul>";
  20:                     $("#contacts").append($(html));
  21:                 });
  22:             });
  23:         }
  24:         );
  25:     </script>
  26: </body>
  27: </html>

如果運行我們的程序，我們將會得到如右圖所示的空白頁面，這就是“同源策略”導致的后果。值得一提的是，我們并不會得到任何的錯誤信息，這是因為大部分瀏覽器針對同源策略的支持都是隱性和透明的。如果開發人員對此不了解的話，根本想不明白錯誤根源何在。

如果我們采用Fiddler來監測頁面加載過程中發送的請求和接收到的響應，我們會發現針對Web API調用的Ajax請求被成功發送，并且以JSON格式表示的聯系人列表會被成功接收，請求和響應的內容如下所示。這實際上說明支持同源策略的瀏覽器其實并不會阻止跨域請求的發送和響應的接收，它僅僅是阻止程序獲取和操作返回的數據而已。

   1: GET http://localhost:3721/api/contacts HTTP/1.1
   2: Host: localhost:3721
   3: Connection: keep-alive
   4: Cache-Control: max-age=0
   5: Accept: application/json, text/javascript, */*; q=0.01
   6: Origin: http://localhost:9527 
   7: User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36
   8: Referer: http://localhost:9527/
   9: Accept-Encoding: gzip,deflate,sdch
  10: Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh-TW;q=0.4
  11:  
  12:  
  13: HTTP/1.1 200 OK
  14: Cache-Control: no-cache
  15: Pragma: no-cache
  16: Content-Length: 205
  17: Content-Type: application/json; charset=utf-8
  18: Expires: -1
  19: Server: Microsoft-IIS/8.0
  20: X-AspNet-Version: 4.0.30319
  21: X-SourceFiles: =?UTF-8?B?RTpc5oiR55qE6JGX5L2cXEFTUC5ORVQgV2ViIEFQSeahhuaetuaPreenmFxOZXcgU2FtcGxlc1xDaGFwdGVyIDE0XFMxNDAxXFdlYkFwaVxhcGlcY29udGFjdHM
  22: X-Powered-By: ASP.NET
  23: Date: Mon, 02 Dec 2013 01:47:53 GMT
  24:  
  25: [{"Name":"張三","PhoneNo":"123","EmailAddress":"zhangsan@gmail.com"},{"Name":"李四","PhoneNo":"456","EmailAddress":"lisi@gmail.com"},{"Name":"王五","PhoneNo":"789","EmailAddress":"wangwu@gmail.com"}]

對于上面給出的針對Web API的Ajax請求的內容，我們可以看到它具有一個名為“Origin”的報頭。該報頭值表示請求頁面的所在的站點（http://localhost:9527），它可以看成是瀏覽器對CORS（Cross-Origin Resource Sharing）規范的支持。

采用JSONP實現跨域資源共享

上面我們已經說過：JavaScript腳本的源決定于其被加載的頁面，而不是其存儲的地址。對于一段通過<script>標簽的src屬性加載的JavaScript腳本，它與當前頁面同源。對于上面我們演示的實例來說，如果我們按照如下的方式來定義View：聯系人列表的呈現單獨定義在listContacts函數中（參數contacts表示聯系人列表），并將Web API的地址置于<script>標簽的src屬性中來間接地調用它。

   1: <html>
   2: <head>
   3:     <title>聯系人列表</title>
   4:     <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.10.2.js")"></script>
   1:     <script type="text/javascript">
   2:         function listContacts(contacts)
   3:         {
   4:             $.each(contacts, function (index, contact) {
   5:                 var html = "<li><ul>";
   6:                 html += "<li>Name: " + contact.Name + "</li>";
   7:                 html += "<li>Phone No:" + contact.PhoneNo + "</li>";
   8:                 html += "<li>Email Address: " + contact.EmailAddress + "</li>";
   9:                 html += "</ul>";
  10:                 $("#contacts").append($(html));
  11:             });
  12:         }
   1:     </script>
   2: </head>
   3: <body>
   4:     <ul id="contacts"></ul>
   5:     <script type="text/javascript" src="http://localhost:3721/api/contacts?callback=listContacts"></script>
   5: </body>
   6: </html>

如果請求地址“http://localhost:3721/api/contacts?callback=listContacts”能夠返回如下的內容，即返回的不是以JSON表示的數據，而是針對該數據的方法調用，毫無疑問聯系人列表能夠順利呈現在頁面上。這種將JSON對象填充（Padding）到某個JavaScript回調方法將數據轉換成針對數據的操作語句的形式就是JSONP（JSON Padding）。

   1: listContacts([{"Name":"張三","PhoneNo":"123","EmailAddress":"zhangsan@gmail.com"},{"Name":"李四","PhoneNo":"456","EmailAddress":"lisi@gmail.com"},{"Name":"王五","PhoneNo":"789","EmailAddress":"wangwu@gmail.com"}]);

為了讓定義在ContactsController的Action方法GetAllContacts返回如上所示的內容，我們可以對其相應的改動來完成。如下面的代碼片斷所示，我們將GetAllContacts的返回類型替換成HttpResponseMessage，其參數callback表示填充的JavaScript回調函數。在該方法中，我們利用JavaScriptSerializer對Contact列表對象進行序列化，并將得到的內容填充到回調函數中從而得到如上所示的內容。方法最終返回具有此主體內容的HttpResponseMessage對象，響應主體內容的媒體類型被設置為“text/javascript”。

   1: public class ContactsController : ApiController
   2: {
   3:     public HttpResponseMessage GetAllContacts(string callback)
   4:     {
   5:         Contact[] contacts = new Contact[]
   6:         {
   7:             new Contact{ Name="張三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
   8:             new Contact{ Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
   9:             new Contact{ Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
  10:         };
  11:         JavaScriptSerializer serializer = new JavaScriptSerializer();
  12:         string content = string.Format("{0}({1})", callback, serializer.Serialize(contacts));
  13:         return new HttpResponseMessage(HttpStatusCode.OK)
  14:         {
  15:             Content = new StringContent(content, Encoding.UTF8, "text/javascript")
  16:         };
  17:     }
  18: }

如果現在運行我們的程序，通過“跨域”（其實不是）調用Web API得到的聯系人列表就會按照如右圖所示的效果呈現出來。JSONP僅僅是利用<script>的src標簽加載的腳本不受同源策略約束而采取的一種編程技巧，其本身并不是一種官方協議。并且并非所有類型跨域調用都能采用JSONP的方式來解決（由于所有具有src屬性的HTML標簽均通過HTTP-GET的方式來加載目標資源，這決定了JSONP只適用于HTTP-GET請求），所以我們必須尋求一種更好的解決方案。

CORS系列文章
[1] 同源策略與JSONP
[2] 利用擴展讓ASP.NET Web API支持JSONP
[3] W3C的CORS規范
[4] 利用擴展讓ASP.NET Web API支持CORS
[5] ASP.NET Web API自身對CORS的支持: 從實例開始
[6] ASP.NET Web API自身對CORS的支持: CORS授權策略的定義和提供
[7] ASP.NET Web API自身對CORS的支持: CORS授權檢驗的實施
[8] ASP.NET Web API自身對CORS的支持: CorsMessageHandler

文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄