自己动手写一个Ajax
在日常工作中，我经常使用Jquery的Ajax来获取接口数据。这几天有一个的官网要制作，由于网站比较小，有一些与服务器通信的接口处理，并没有涉及到复杂的交互功能。为了可以减少加载Jquery库的时间，也不用负担Jquery复杂的逻辑处理带来的性能消耗。我决定不使用jquery，自己写了一个原生的Ajax函数。需求整理一般来说，前端与服务器的通信是使用XHR对象的。我做的官网是有几个异域的接口，然而XHR对象是没有跨域功能的。所以我把JSONP整合进来。接下来，我们来看看整体功能图：输入参数首先，我们定义一个Ajax函数，并设置了一些输入参数。functionajax(options){varurl=options.url||"",//请求的链接type=(options.type||"get").toLowerCase(),//请求的方法,默认为getdata=options.data||null,//请求的数据
AngularJs最简单解决跨域问题案例
首先我们做点准备说明，不然你明白我说的是啥意思别人不明白，就算别人明白了那总有人不明白，那你要说了，我的意思是这个说明必须要做了，答案是必须的，为了更好的方便大家理解嘛。我们以两个主域名或者一个主域名+一个二级域名为例，均可演示跨域问题。客户端a.com服务端b.com或者s.a.comangularJs版本V1.2.25准备工作做得很充分嘛，就差把我们的编辑器是subline暴露出来了，这个一般人我是不告诉他滴。有人嚷嚷了，这问题老早就有了，你现在提出来有啥意义呢？难不成你还能把花忽悠开了？嗯，我还真能把花写开了。看戏吧，我们本篇要上演的是完整版跨域实例。接下来我们先看客户端是如何请求数据的注意哦，我们的代码是写在a.com域名下面的
浅谈escape、encodeURI、encodeURIComponent的区别
现在开发都是使用流行的框架（比如：jQuery，angular等），很少用到原生的XMLHttpRequest()或ActiveXObject(“Microsoft.XMLHTTP”)了。最近写跨域的JSONP请求，发现网上竟然还没有POST提交的方法（正常下是不可能的，因为JSONP是通过在网页中插入script的element实现的）。可以通过内嵌iframe的方式，post上传数据。请求完成时，iframe的onload事件再去调用JSONP即可完成曲线的JSONPpost方式提交数据。对于中文编码的问题，使用了encodeURIComponent。之前前辈告诫转码只用encodeURIComponent就可以了，escape转码后，提交的哦服务器端是乱码的。escape、encodeURI、encodeURIComponent这三个函数的区别一直不是很了解，看文字头都大了。实际做个简单的实验，还是可以很容易看出他们三个的区别的。//编码str="miao://qiyuan/.cn?query=
JAVA处理跨域问题
在写前端脚本的时候我们经常会遇到发送数据到后台的情况，但是由于浏览器的限制，不同域名之间的数据是不能互相访问的，那前端怎么和后端如何进行数据之间的交换呢？JavaScript由于安全性方面的考虑，不允许页面跨域调用其他页面的对象，那么问题来了，什么是跨域问题？答：这是由于浏览器同源策略的限制，现在所有支持JavaScript的浏览器都使用了这个策略。那么什么是同源呢？所谓的同源是指三个方面“相同”：域名相同协议相同端口相同下面就举几个例子来帮助更好的理解同源策略。
JS跨域问题以及采用JSONP方式解决跨域问题
版权声明：此文章转载自Ithao123（http://www.ithao123.cn/content-10971605.html）如需转载请联系听云College团队成员小尹邮箱：yinhy#tingyun.com在做项目的时候，客户要做成客户端和服务端两部分，客户端向服务端进行认证，我开始的时候没有直接替换ip地址，后来采用ip地址替换之后，出现了问题，后台可以收到访问的请求，但是无法拿到后台返回的信息，后来咨询了些大牛才知道是js中限制跨域访问的，也就是说，你的js中有些数据不能直接通过A服务器拿到B服务器的数据。域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即TrustRelation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。有一种简明的说法来解释广域跨域：跨域访问，简单来说就是A网站的javascript代码试图访问B网
SOME攻击
在SOME[1]攻击的PDF出来之后，可能因为文章内容太长而且又是英语的缘故，导致很多人望而却步。即使国内有人翻译了其中的一小部分，但内容也简直可以说是胡乱拼凑，给人的感觉就是——“这是什么鬼？！”。然而实际上SOME攻击是个非常有趣的漏洞利用技巧，并且国内也存在被该技巧攻击的网站。基于这样的原因，我斗胆半翻译半实践的来说明下这个有趣的前端漏洞利用技巧，望各位轻喷。下面是个演示视频，访问链接后即可自动安装wordpress插件[2]！在线地址或点我下载看完之后，是不是有很多疑问:为什么访问个链接就会给我装个插件？请求的那个链接是什么鬼？貌似要等待好长时间？只是装个插件，貌似然并卵啊？即使如此，又该如何挖掘类似的漏洞？在解释上面的问题之前，你需要知道以下的几个知识点。0x01同源策略什么是同源策略[3]？所谓同源简单的来说就是通信双方协议、域名、端口都要一致，如下：
详解跨域请求的两种方式，支持post请求
原先一直以为要实现跨域请求只能用jsonp，只能支持GET请求，后来了解到使用POST请求也可以实现跨域，但是需要在服务器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers头。下面说明下两个不同的方法实现的方式和原理。JSONP实现跨域常用的jquery实现跨域调用$.ajax({url:"http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",dataType:"jsonp",jsonp:"callback",context:document.body,success:function(data){console.log(data);}});这个调用实际上的实现原理是在网页中构造一个script标签，将src设置为对应的url，并增加上相应的callback参数，形如如下格式：
跨域请求之JSONP
前言由于安全原因，浏览器会限制脚本发起跨站请求，是为浏览器的同源策略。而有时我们又需要跨站请求，比如一个大型网站多个域名之间的信息协同共享。在不违反同源策略的前提下，大概有CORS，JSONP，ProxyServer等技术达到跨站请求的目的。前面我介绍了CORS，它是W3C推荐跨站请求方式，也更安全。这篇文章主要介绍JSONP。什么是JSONPJSONP全称（JSONwithPadding），是一种基于html中
新型XSS总结两则
0x00简介近期看到了两种XSS攻击手法：一种是利用JSONP和serviceWorkers的持久性XSS，一种是移动设备中的XSS，学习后总结一下，同时也请高手多多指点。0x01基于JSONP和serviceWorkers的持久性XSS对于Web攻击者来说，通常都渴望在未知用户浏览器具体类型的情况下，仍然能够顺利通过它来访问网站。甚至在浏览器被关闭，再次访问时要挂钩的回话也没有了的情况下，依旧可以访问网站，那该多好啊！实际上，这不仅是说说而已，如果联合利用未被过滤的JSONP路由、serviceWorkers和XSS的话，完全可以为网站打造一个持久性后门。1ServiceWorker简介ServiceWorkers是一种较为新颖的web技术，它可以用来拦截web请求。实际上，这种技术本意在于实现网站的离线运行。ServiceWorkers可用于拦截web请求，并返回一个缓存版本，这样的话即使在离线的状态下，网站仍然处于可用状态。。关于ServiceWorkers的具体介绍，请参考https://developer.mozil
js跨域交互(jQuery php)之jsonp使用心得
jsonp是什么？说到jsonp，你可能最先想到JSON；它还真和JSON有关系；JSONP(JSONwithPadding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于server1.example.com的网页无法与不是server1.example.com的服务器沟通，而HTML的
前端跨域及其解决方案
前端与服务端数据交互时，涉及到跨域的一些问题。JavaScript出于安全的考虑，禁止了跨域调用其他页面的对象，也即同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。什么是跨域？如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin），JavaScript允许这种同源页面的数据互相通信。端口和协议大家都应该很熟悉，一般生产项目中WEB页面是「看不见」端口号的，其实是缺省端口80，目前网络劫持盛行，因此流行使用安全协议HTTPS来避免劫持，而主机的概念有些初级开发者可能就会搞混淆，我们使用域名来指定一台主机，当然你也可以直接使用IP地址，重点在于不要以为jandou.com与www.jandou.com是同一域名，实际上www.jandou.com是一个二级域名，而jandou.com俗称为裸域，不了解你可
工作五年，后面四年重复着第一年的活儿？
当我们沉浸在旺盛的需求之中时，整个人便会成为一台工作的机器，切着类似的页面，写着同样的逻辑，重复着昨天或者上个月做的事情，时间久了，觉得腻味，没有什么创新，也没有明显的成长。用一句通俗的话来讲：工作五年，后面四年重复着第一年的活儿。很多人尝试跳出这个怪圈，不过基于环境压力和思维受阻，最后又不得不选择放弃。今天想通过介绍如何高效有保障地开发一个无线页面来帮助大家找到突破口。日常开发状态很多无线页面的开发有两种模式，一种是后台输出JSON数据，前端根据数据来渲染页面（同步模式）；第二种是前端异步加载后端数据然后渲染（异步模式）。当然，两种模式夹杂在一起也是存在的，这种情况一般会有一个由前端控制的中间层提供同步数据和异步数据。为了减少前后端的沟通成本，往往采用第二种模式。拿到设计稿后，与后端同学约定接口格式，让后端同学尽快提供mock数据，如果提供不了，便自己构造测试数据。接着回到自己的工位上切图，切图过程中会解决好响应式问题和兼容性问题，待到后端产出真实数据时，更换JS中的接口地址，联调ok便发布页面，大功告成！整
构建一个类jq的函数库
jqfree虽然团队里用上了vue，但是某些情况下可能仍然需要操作DOM，或者是需要一些诸如变量类型判断、时间解析函数、url解析函数、浮点数四舍五入小数位和获取随机位数字符串的辅助函数。而本篇就是教你怎么构建这样一个山寨版的库，只要400行代码，你就能体验写一个库函数畅快的感觉！jqfreecorevar$=function(selector,context){returnnew$.fn.init(selector,context);};$.fn=$.prototype;$.fn.init=function(selector,context){if(selector.nodeType===1){this[0]=selector;this.length=1;returnthis;}varparent=context||document;varnodeList=parent.querySelectorAll(selector);this.length=nodeList.leng
利用 JSONP 实现跨站请求的方法及原理
defsupport_jsonp(f):@wraps(f)defdecorated_function(*args,**kwargs):callback=request.args.get('callback',False)ifcallback:content=str(callback)+'('+f(*args,**kwargs).data.decode('utf-8')+')'returncurrent_app.response_class(content,mimetype='application/json')else:returnf(*args,**kwargs)returndecorated_function@app.route('/test')@support_jsonpdeftest():returnjsonify({'abc':1,'def':2})这边support_jsonp装饰器会判断是否是JSONP请求，如果是，则返回相应的「特殊」数据（具体在下面原理的地方详细讲）
解决cookie跨域访问
一、前言随着项目模块越来越多，很多模块现在都是独立部署。模块之间的交流有时可能会通过cookie来完成。比如说门户和应用，分别部署在不同的机器或者web容器中，假如用户登陆之后会在浏览器客户端写入cookie（记录着用户上下文信息），应用想要获取门户下的cookie，这就产生了cookie跨域的问题。二、介绍一下cookiecookie路径：cookie一般都是由于用户访问页面而被创建的，可是并不是只有在创建cookie的页面才可以访问这个cookie。在默认情况下，出于安全方面的考虑，只有与创建cookie的页面处于同一个目录或在创建cookie页面的子目录下的网页才可以访问。那么此时如果希望其父级或者整个网页都能够使用cookie，就需要进行路径的设置。path表示cookie所在的目录，asp.net默认为/，就是根目录。在同一个服务器上有目录如下：/test/,/test/cd/,/test/dd/，现设一个cookie1的path为/test/，cookie2的path为/test/cd/，那么test
jsonp系列（二）jsonp的原理与实现方式
在介绍jsonp之前，先来聊一聊浏览器的同源策略。关于同源策略的由来1995年，同源策略被引入到浏览器中，其目的是为了保护用户的数据安全。同源策略主要做了以下几点的限制：（1）非同源站点上的Cookie、LocalStorage和IndexDB无法读取。（2）非同源站点上面的DOM节点无法获得。（3）AJAX请求不能发送给非同源站点。试想一下，如果没有这些限制，你在浏览网站的时候，你的cookie可以被别人随意读取，别人可以直接用你的身份去登陆网站，肆意的发挥；你页面的dom结构还可以被别人控制，肆意修改，就问你一句：怕不怕？反正我怕！但是，任何事情都有两面性，浏览器禁止页面脚本跨域请求提高了安全性的同时，也带来一些不方便。很多时候我们确实需要跨站去请求一些资源，那浏览器同源策略的限制是不是有限苛刻了？其实细心的小伙伴们已经发现，浏览器在为我们关闭一扇门的同时，给我们打开了一扇窗，带有src属性的img标签，你随便在src里面写上任意一个网站的图片地址，就可以获取这个图片的数据，说
工作五年，后面四年重复着第一年的活儿？
转自：http://www.barretlee.com/blog/2016/07/21/donnot-repeat-yourself/当我们沉浸在旺盛的需求之中时，整个人便会成为一台工作的机器，切着类似的页面，写着同样的逻辑，重复着昨天或者上个月做的事情，时间久了，觉得腻味，没有什么创新，也没有明显的成长。用一句通俗的话来讲：工作五年，后面四年重复着第一年的活儿。很多人尝试跳出这个怪圈，不过基于环境压力和思维受阻，最后又不得不选择放弃。今天想通过介绍如何高效有保障地开发一个无线页面来帮助大家找到突破口。日常开发状态很多无线页面的开发有两种模式，一种是后台输出JSON数据，前端根据数据来渲染页面（同步模式）；第二种是前端异步加载后端数据然后渲染（异步模式）。当然，两种模式夹杂在一起也是存在的，这种情况一般会有一个由前端控制的中间层提供同步数据和异步数据。为了减少前后端的沟通成本，往往采用第二种模式。拿到设计稿后，与后端同学约定接口格式，让后端同学尽快提供mock数据，如果提供不了，便自己构造测试数据。接着回到自己的工位上
跨域失败？摆好姿势就可以
从图中可以看出，三者只要任何一个不相同，都会导致Failure.什么样的姿势跨域，才能成功的跨域？贴上一份简单的node代码，用以说明服务端的情况：varhttp=require('http');varfs=require('fs');varreg=/(^|\?|&)callback=\w*/;varMINE_TYPE={'css':'text/css','html':'text/html','js':'text/javascript','txt':'text/plain'};http.createServer(function(req,res){var_url=req.url;vardata=_url.indexOf('callback')>=0?req.url.match(reg)[0].substr(10)+'("XMLHttpRequestissuccess")':'XMLHttpRequestissuccess';res.writeHead(200,{'Content-