JSONP跨域实现

JSONP(JSON con Padding)跨域实现

跨域问题是由于浏览器为了防止CSRF攻击,避免恶意攻击而带来的风险
而采取的同源策略限制

当一个页面中使用XMLHTTPRequest对象发送HTTP请求时(XHR请求),必须
保证当前页面和请求的对象是同源的,即协议,域名和端口号要完全一致,否则 浏览器就会阻止此跨域请求返回的数据

同源策略:
协议,域名和端口号的完全一致

CSRF攻击:

1.用户浏览并登陆信任网站
2.验证通过在用户处产生Cookie
3.用户在,没有退出A或者本地Cookie没有过期状态下访问网站B
4.B要求访问站点A,并发出request请求
5.根据B的请求用户带着本地Cookie访问网站A,从而实现CSRF的利用

需求
虽然同源策略可以有效的防止网络上的恶意攻击,但是在实际开发应用中,
我们往往需要从本站点向第三方站点发送XHR请求,这就需要有效的解决跨
域问题,

解决方案:
JSONP:只支持GET,不支持POST请求
代理:使用代理去避开跨域请求
服务端修改:在服务端页面添加header限制

headr('Access-Control-Allow-Origin:*')//设置所有来源访问
headr('Access-Control-Allow-Method:POST,GET')//设置访问方式

JSONP原理:

浏览器只对XHR(XMLHttpRequest)请求有同源请求限制,而对Script标签的src属性
link标签的ref属性和img标签src属性没有这种限制,利用这个漏洞就可以很好的解决跨域请求
JSONP就是利用Script标签的src属性开发策略来实现,当向第三方站点请求时,我们可以将此请求放在
<script>标签的src属性里如同我们请求一个普通的JS脚本,可以自由的向不同的站点请求

利用js实现跨域底层原理:

1.利用javaScript中的src属性发送请求
2.定义回调函数 function callback()
3.将返回值经过特殊封装串 callback(JSON)

jsvaScript实现
服务器:

public void ProcessRequest(HttpContext context) {
context.Response.ContentType = "text/plain";

//指定的回调函数名称
string callbackFuncName = context.Request.QueryString["callback"]; 
string reponseData = "test jsonp";
//回调脚本string scriptContent = callbackFuncName + "('" + reponseData + "'"; context.Response.Write(scriptContent); 
}

前端:

<script type="text/javascript" src="http://localhost/Service.ashx?callback=jsonpCallback" />
 //回调函数
 function jsonpCallback(content){ alert(content);
  } 
 </script>

JQuery实现
JQuery的ajax方法对JSONP方法进行了封装，使用JQuery提供的方法变得非常简单
前端：

<script type="text/javascript">
	$(function(){
		alert("测试访问开始!!!!!")
		
		$.ajax({
			url:"http://manage.jt.com/web/testJSONP",
			type:"get",			   //jsonp只能是get
			dataType:"jsonp",	   //jsonp必须添加
			//jsonp: "callback",   //指定参数名称
			//jsonpCallback: "hello",  //指定回调函数名称
			success:function (data){
				alert(data.id);
				//转化为字符串使用
				//var obj = eval("("+data+")");
				//alert(obj.name);
			}	
		});	
	})
</script>

防御CSRF攻击:

1.在客户端页面增加伪随机数
2.验证码
3.One-Time Tokens(不同的表单包含一个不同的伪随机值)