跨域处理
跨域什么是跨域跨域方法JSONPCORSwindow.postMessagewindow.namedocument.domain跨域方式间比较什么是跨域概念：只要不遵循同源策略的请求，都被当作是跨域的。同源策略（same-originpolicy）：浏览器出于安全方面的考虑，只允许本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读取对方的资源。这里的本域指：同协议：如均为http或https协议同域名：如github.com/jazen和github.com/Tony同端口：如均为80端口或8080端口也就是说只要协议、端口、域名这三者中有一者不同，则可以说是跨域的。下面是一个关于JavaScript能否跨域通信的例子，以http://www.aaa.com/a.js访问以下URL的结果。见下表：
跨域那点事，JSONP的秘密
如果你是一个WEB开发人员，你肯定遇到过跨域的问题。什么是跨域？我先假装你们不知道(^..^嘻嘻)，域名你们都知道，比如www.baidu.com，www.jd.com等都属于域名，如果我想在京东的页面中通过一个关键字来请求百度获取搜索结果，这就是一个跨域请求。举个例子：民间一位姓陈的人家有一手上好的酿酒本事。他们家立下规矩，这门手艺只传自家孩子。那如果我这个姓何的想去学肯定会被扫地出门，除非得到陈家掌柜的同意才可以。回到我们WEB开发，如果我想在我们京东的页面开发上使用百度的服务，那我如何去做才可以呢？正常来讲浏览器肯定是不允许的，这样会产生严重的安全性问题，具体大家可以Google下CSRF（跨域请求伪造），这里就不具体描述了。如何跨域这也是一个很久以前让WEB开发人员抓心挠肝的事情。一般的做法是在本地服务器通过构建http请求包来访问目标域名服务器获取服务，而在本地服务器再通过提供一个资源访问地址为WEB客户端提供服务。这种做法无疑很繁琐，如图所示：也就是说客户端每次请求京东服务器，京东都要通过网络去访问百度服务器请求
JSONP跨域详解
这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。1.什么是JSON？JSON是JavaScriptObjectNotation的缩写，它是一种数据交换格式。在JSON中，一共就这么几种数据类型：numberbooleanstringnullarrayobject以及上面的任意组合。并且，JSON还定死了字符集必须是UT
get,post,jsonp数据交互—百度下拉列表
三种数据交互形式：getpostjsonp一、get请求1.引入vue.js和vue-resource.js,准备一个按钮
JSONP原理及简单实现
全称JSONwithPadding，用于解决AJAX跨域问题的一种方案。由于同源策略的限制，浏览器只允许XmlHttpRequest请求当前源（域名、协议、端口）的资源，而对请求script资源没有限制。通过请求script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，这种跨域的数据的方式被称为JSONP。实现原理1.首先在客户端注册一个callback方法，放到window对象上，如：callbackFunction(json){console.log(JSON)}然后把callback的名字（callbackFunction）传给服务器。2.服务器先生成JOSN数据。3.将JOSN数据直接以入参的方式，放置到function中，这样就生成了一段js语法的文档（如callbackFunction(JOSN)），返回给客户端。4.客户端浏览器，将返回的JS标签插入DOM，解析script标签后，会执行callbackFunction(JOSN)。通过这种方式，即可实现跨
使用request merging bypass referer(jsonp) 检测
所有代码在:https://github.com/neargle/tips-note/tree/master/request_merging1.关于requestmerging和其会产生的问题requestmerging:浏览器会把多次相同的请求(并非所有请求)合并成一次，以加快资源加载速度。e.g.
审视跨域请求实现方式
之前在组内进行过相关分享，为防止以后再单独整理，故在此将自己的PPT内容存放下。问题产生在JavaScript中，有一个很重要的安全性限制，被称为“Same-OriginPolicy”（同源策略）。同源与非同源的区别：1、协议2、域名3、端口号三者必须相同，才能称为“同源”！实际中的问题Ajax通过XMLHttpRequest发起请求，而XMLHttpRequest则受制于同源策略。解决方式原理追踪“callback”的值明明是“？”，这个问号是什么意思？很容易猜测到，就是这个值上有猫腻JSONP官方原理汇总动态添加一个眼熟吧？写过吧？恭喜你，你已经是会使用动态脚本技术的前端攻城狮了！……纳尼？没错！不要觉得这行代码司空见惯，其实仔细研究下，还颇有点因缺斯艇呢~记住一点，网页归根到底就是一个HTML页面，除此之外别无他物。其他如JS、CSS、图片等，都是页面上的资源，从属于这个页面。JS代码只有作为s
jsonp和代理服务器方案解决跨域
浏览器为了保护用户安全，引入了同源策略，即一个服务器页面无法访问另一个协议、域名、端口不同的服务器数据。当页面需要跨服务器访问另一个服务器的数据时，即产生跨域行为。以豆瓣的公开API（https://api.douban.com/v2/book/1220562）为例，当前我的服务器处于http://127.0.0.1:5000下，豆瓣的服务器很显然跟我的服务器不同源，服务器中的一个页面通过AJAX请求该接口时，浏览器会发出如下警告，并且页面获取数据失败:在实际开发中，如果遇到这样的跨域问题，可以通过以下办法获得跨域的数据：异源服务器的响应头部设置Access-Control-Allow-Origin允许跨域行为JSONP设置自己的代理服务器转发异源的数据对于第一种设置Access-Control-Allow-Origin的方法，如果在PythonFlask搭建的服务器下，可以设置一个简单的修饰器：fromfunctoolsimportwrapsfromflaskimportmake_responsed
原生js插件封装
步骤显然，把所有功能都写在一个单纯的函数内是无法满足上述要求的插件全局函数实现私有作用域，最好的办法就是使用闭包。可以把插件当做一个函数，插件内部的变量及函数的私有变量，为了在调用插件后依旧能使用其功能，闭包的作用就是延长函数(插件)内部变量的生命周期，使得插件函数可以重复调用，而不影响用户自身作用域。故需将插件的所有功能写在一个立即执行函数中：(function(){//插件所有功能都写在这个函数下})();插件默认参数插件的主要功能可以总结至几个关键参数，通过这几个关键参数即可修改插件的主要功能，也是第三步API设置的关键参数。将默认参数放置在全局函数的最前面，参数变量名为options,通过对象字面量进行赋值：varoptions={key1:para1,key2:para2,key3:para3,...keyn:paran}插件API、参数设置和监听因为API指向的是使用者，故需要在用户调用插件时将API暴露给用户，因用户API时是通过插件提供的名字进行使用，故将API设置为Object类型，用户就可
JSONP(Json with padding)
JSONP:一种非官方跨域数据交互协议JSONP怎么产生的JSONP的原理看上面的来源加以理解上面说过了，script是不受跨域影响的那么我们可以在我们代码中引用B服务器的文件1
web开发中跨域解决方案
下面几个域名下的页面都是可以通过document.domain跨域互操作的：http://a.com/foo,http://b.a.com/bar,http://c.a.com/bar。但只能以页面嵌套的方式来进行页面互操作，比如常见的iframe方式就可以完成页面嵌套//URLhttp://a.com/foovarifr=document.createElement('iframe');ifr.src='http://b.a.com/bar';ifr.onload=function(){varifrdoc=ifr.contentDocument||ifr.contentWindow.document;ifrdoc.getElementsById("foo").innerHTML);};ifr.style.display='none';document.body.appendChild(ifr);上述代码所在的URL是http://a.com
水坑攻击之Jsonp hijacking-信息劫持
0X01Jsonphijacking作用这是一种基于水坑攻击的攻击方式，用于大规模的获取用户信息，因为可以绕过同源策略的限制而展开，所以其威力巨大，尤其是在一些大型网站的接口处，用此方法可以盗取已登陆用户的敏感信息从而进行进一步的攻击。0x02劫持原理在说原理之前，首先需要了解js中callback函数的作用，callback是js中的回调函数，这个函数的用处在于它自己是个函数，但是他会将自己作为参数传给另一个函数，并且在父函数执行完成之后再执行。借用这个原理，我们来试试跨域加载数据：这是人人网的一个接口，用于显示用户信息在没登陆的时候，可以看到图中的信息，提示未登陆用户。然后我们本地构造劫持代码，建立evil.html文件。注意到我在url中添加了参数callback=run，这样就会导致url在被加载完成之后会继续加载我们的run函数，本地访问网页：输出了-110，可以看到，我们成功跨域加载了数据到本地域中，但是这有什么作用呢？还是以一个例子尝试，我们登录人人网后来访问这个API可以看到，返回
动手实现一个JSONP
文章首发于我的github及个人博客，github请看https://github.com/huruji/blog/issues/9，转载请注明出处。JSONP的原理就不细说了，就是利用script可以跨域的特点来实现跨域，首先我们考虑一个最简单的jsonp，就是简简单单创建script标签，添加url的功能，如下：functionjsonp(url){constscript=document.createElement('script');script.src=url;script.type='text/javascript';document.body.appendChild(script);}此时我们使用服务端的代码如下：consthttp=require('http');constdata={'data':'hello'};consturl=require('url');constqueryString=require('querystring');http.createS
跨域
一、浏览器的同源策略1.什么是同源？所谓“同源”指的是”三个相同“。相同的域名、端口和协议，这三个相同的话就视为同一个域，本域下的JS脚本只能读写本域下的数据资源，无法访问其它域的资源。协议相同域名相同端口相同（如果没有写端口，默认是80端口）2.什么是同源策略？同源策略是浏览器为了保护用户的个人信息以及企业数据的安全而设置的一种策略，不同源的客户端脚本是不能在对方未允许的情况下访问或索取对方的数据信息；3.同源策略的目的同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的Cookie，会发生什么？很显然，如果Cookie包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。由此可见，“同源政策”是必需的，否则Cookie可以共享，互联网就毫无
ajax和jsonp使用总结
//参考代码：$(function(){$("input").click(function(){$.get("./data.json",function(data,status){console.log(data.name);},"json");});})......
JSONP和CORS实现跨源请求
跨源产生的场景主要是在：如果A页面（通过B页面提供的API）获取B页面的资源，而A页面和B页面的源信息不同，那么便会产生跨源错误。源信息包括：协议、域名、端口三部分，同源指的是源信息的协议、域名、端口都相同这主要源于跨源安全策略，简单说，如果两个页面的源信息不同，就不能通过XHR对象获取对方的信息。需要注意的是，跨源策略是浏览器基于安全考虑做的限制，而非服务器端做了不允许跨源的限制。如果将浏览器设置为允许跨源请求，跨源策略随即失效（Safari浏览器开发菜单下拉列表中有“停用跨源限制”的选项，Chrome设置略复杂，请自行搜索解决）。通过更改代码跳过浏览器跨源限制的方法很多，本文主要讨论常用的JSONP和CORS方法，完整代码已放在Github上cross_origin_example
jsonp 的原理和使用
jsonp是一种非正式的传输协议（数据的调用方式），是解决跨域请求的一种常规方式。它和json的区别是json是一种纯文本，跨平台和语言的数据描述格式。跨域跨域，指浏览器因为同源策略，不能执行其他网站的脚本。同源策略是浏览器的一种安全机制，防止用户信息窃取，判断两个网站是否同源，必须满足三个数据完全一致：协议，域名，端口。原理jsonp是利用script标签请求js文件时添加callback参数，在服务器返回数据时，通过该参数作为函数名称包裹json数据返回浏览器，然后按照常规方式处理数据。使用我们现在创建两个跨域文件(a)demo.html保存localhost:3000(b)testCallback.js保存https://io.github.comtestCallback.jstestCallback({name:'bojue'});我们通过jsonp可以完成js对浏览器的跨域请求，一般有两种常用的调用方式：第一种是直接使用script标签添加callback参数的方式第二种
[CORS：跨域资源共享] 同源策略与JSONP
WebAPI普遍采用面向资源的REST架构，将浏览器最终执行上下文的JavaScript应用WebAPI消费者的重要组成部分。“同源策略”限制了JavaScript的跨站点调用，这必然导致WebAPI不能垮域提供资源。如果WebAPI仅限于为“同源客户端”提供资源，那么它都对不起自己的名字，因为Web本身是一个开放的协议。那么ASP.NETWebAPI通过怎样的方式来实现跨域资源共享呢？同源策略浏览器是访问Internet的工具，也是客户端应用的宿主，它为客户端应用提供一个寄宿和运行的环境。而这里所说的应用，基本是指在浏览器中执行的客户端JavaScript程序。虽然是一种解释性的脚本语言，JavaScript其实是无比强大的，原则上来讲它可以做任何事。但是在能够在JavaScript脚本并不都是值得信赖的，所以浏览器必须对JavaScript的执行作相应的限制，这就是我们接下来着重介绍的“同源策略（SameOriginPolicy）”。同源策略是浏览器的一项最为基本同时也是必须遵守的安全策略，毫不夸张地说，浏览器的整个安
jsonp
看的别人写的关于jsonp的说明：1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如