谈CSRF与JSONP设置header问题

时间: 2019-06-11阅读: 875标签: ajax

问题一 js发起请求的方式

方法一:js代码中发起请求的方式普遍为AJAX,该技术在 1998 年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)  
方法二:script标签请求
方法三:通过html的方法


通过js自动在jsp中创建一个form表单,并给其method属性为post

function post(URL, PARAMS) {        
    var temp = document.createElement("form");        
    temp.action = URL;        
    temp.method = "post";        
    temp.style.display = "none";        
    for (var x in PARAMS) {        
        var opt = document.createElement("textarea");        
        opt.name = x;        
        opt.value = PARAMS[x];               
        temp.appendChild(opt);        
    }        
    document.body.appendChild(temp);        
    temp.submit();        
    return temp;        
}        

$(".submit_d a").click(function(){
    var data = ($(this).attr("class")).split("-");
    var series = data[0];
    var discharge = data[1];
    var carriageNum = data[2];
    var seatNum = data[3];
    var gear = data[4];
    var cost = data[5];
    var pictureUrl = data[6];
    var id = data[7];
    post(ctx+"/order/rentcar.action",{"series":series,"discharge":discharge,"carriageNum":carriageNum,"seatNum":seatNum,"gear":gear,"cost":cost,"pictureUrl":pictureUrl,"id":id});
});


问题二 设置header、cookie

CSRF发起的请求可以设置cookie(token)、header么

CSRF或者jsonp,利用时需要跨域。


CORS

简单来说,请求时浏览器检测到跨域,会带上Origin,得到服务器的准许后才能够获取数据

CORS不仅设置了AJAX跨域时的域名,还有请求方法、返回Header获取字段、允许发送cookie等

浏览器同源政策及其规避方法(阮一峰)

CORS需要大多数情况下,前端是无感知的,这是后端服务器做的部分。


jsONP

jsONP能够跨域的原因在于 标签允许跨域。

通过script拿到数据,形如 

将会返回 foo(data)打在前端

前端再定义function foo(){},返回前端时就直接调用并传入数据

缺点:

限于GET方法

一样无法自定义设置header和cookie。


代理

本地设置代理,ajax请求本地代理,再由本地通过非ajax方法去请求数据,返回给前端。不考虑。但是在某些情况下可以用,比如payload中需要拼接由跨域获取的数据


这三种方法都是js/AJAX跨域的方法。
在CSRF/jsONP劫持的运用上,CORS跨域被限制的情况下不存在了,因此AJAX的GET/POST一堆灵活操作没法用。jsONP也无法设置header、cookie等。FORM表单请求的方式当然也没法设置header。 


结论 

CSRF/JSONP劫持中所用请求难以自定义header、cookie



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3657

js中关于ajax笔试面试题汇总

什么是ajax?Ajax包含下列技术,为什么要用ajax?Ajax应用程序的优势在于?Ajax的最大的特点是什么?请介绍一下XMLHTTPREQUEST对象?Ajax技术体系的组成部分有哪些?AJAX应用和传统Web应用有什么不同...

javascript的ajax是什么?

AJAX(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax 它是与服务器交换数据的技术,在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),它在不重载全部页面的情况下

Ajax跨域CORS

在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin、Methods、Headers、Credentials;Origin当浏览器用Ajax跨域请求的时候,会带上一个请求头“Origin: 协议://页面域名”,

ajax 高级技术

ajax技术是一种从客户端向服务器请求数据的技术,而如果是要将数据从服务器主动推向客户端,那么就需要更加高级的数据传输技术,这些技术主要是为了处理一些在客户端展示服务器上实时变化的数据

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

纯Js实现ajax

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。创建对象,并兼容各种浏览器;请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够

使用Ajax同步请求时,等待时间过长增加页面提示问题

后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,以及项目的完善性,这个时候就需要增加一个等待页面进行提示。

Ajax原理以及优缺点

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

web项目通过ajax提交数据太大报错

ajax提交数据很多的时候报错,web后端没有接收到数据解决方案:经查为tomcat默认限制post提交2M数据。这里需要修改tomcat中大配置文件server.xml文件

使用原生Ajax进行用户名重复的检验

XMLHtttpRequest对象调用status属性可获得服务器返回的 HTTP 状态码,Ajax请求时,加了个一时间戳,目的是防止浏览器使用缓存。因为在浏览器开了缓存的情况下,对同一链接的相同参数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广