同源策略与JSONP
[CORS：跨域资源共享] 同源策略与JSONP
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请求），所以我们必须寻求一种更好的解决方案。
[1] 同源策略与JSONP
[2] W3C的CORS规范
[3] 通过自定义HttpMessageHandler实现跨域资源共享
[4] CORS在ASP.NET Web API中的实现
同源策略与JSONP的更多相关文章
- [CORS：跨域资源共享] 同源策略与JSONP
Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...
- 同源策略与 JSONP CORS
同源策略与 JSONP CORS 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以 ...
- 同源策略和JSONP（概念性）
同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy). 所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(javascript.ActionScript)在没明 ...
- Ajax跨域请求 同源策略与Jsonp
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- 同源策略和Jsonp、CORS
一.同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之 ...
- javascript 同源策略和 JSONP 的工作原理
同源策略 同源策略是一个约定,该约定阻止当前脚本获取或操作另一域的内容.同源是指:域名.协议.端口号都相同. 简单地说,A 服务器下的 a 端口执行 ajax 程序,不能获取 B 服务器或者 A 服务 ...
- 第十九篇 同源策略与Jsonp
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- 同源策略与JSONP劫持原理
同源策略 浏览器中有两个安全机制,一个浏览器沙盒(Sandbox),另一个就是同源策略(Same Origin Policy,简称SOP) ,下面介绍同源策略.同源是指同协议.同域名.同端口,必须三同 ...
- ajax同源策略，jsonP跨域访问
浏览器处于安全性的考虑,要求ajax请求,必须满足同源策略 规定:访问的协议://域名:端口号都相同时满足同源策略,浏览器可以正确解析数据,否则如果有一项不满足要求,则属于跨域访问,浏览器可以正常获取 ...
随机推荐
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- Android 内存管理 &Memory Leak & OOM 分析
1.Android 流程管理&内存 Android主要应用在嵌入式设备其中.而嵌入式设备因为一些众所周知的条件限制,通常都不会有非常高的配置,特别是内存是比較有限的. 假设我们编写的代 码其中 ...
- .NET 中易混淆的概念（Delegate vs Event）
事件(event)是一个非常重要的概念,我们的程序时刻都在触发和接收着各种事件:鼠标点击事件,键盘事件,以及处理操作系统的各种事件.所谓事件就是 由某个对象发出的消息.比如用户按下了某个按钮,某个文件 ...
- java io流之int数组数据的插入与取出
java io流大家都非常熟悉吧,有时候假设用的不熟,对于数据的处理真的非常头疼,以下是对与int数组的处理. 以下是代码: public class Stream { private int a[] ...
- mysql 数据库插入语句之insert into,replace into ,insert ignore
近期才发现mysql的插入语句竟然有如此多的使用方法,这里拿来分享一下. ①关于insert into : insert into table_name values(); insert into t ...
- EF 事物
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- 使用JavaScriptSerializer进行序列化日期类型应该注意的问题
原文:使用JavaScriptSerializer进行序列化日期类型应该注意的问题 JavaScriptSerializer在序列化DateTime时,是用刻度来表示的,具体在Json体现为:\/Da ...
- HtmlAgilityPack + Fizzler
HtmlAgilityPack + Fizzler 这两天在做个爬虫, 一次任务要下载3万多个页面, 然后从这3万多个页面提取数据. 以前写过两年的类似的东西, 基本都是写正则表达式, 速度快, 就是 ...
- 《java系统性能优化》--2.高速缓存
上一节.简介了怎样发现性能瓶颈.从这节開始.我会和大家分享我在项目中做的一些性能调优工作.这个系列没有什么顺序可言,认为什么重要.就说说什么. 这节.我们聊缓存. 最開始接触缓存这个词,是学习硬件知识 ...
- white-space的值
white-space的值:normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的 标签.nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 标签 ...