A2D JS框架 - Web API CSRF保护实现
2023-09-14 08:57:46 时间
这次自己实现了类似jQuery中ajax调用的方法,并且针对RESTFul进行了改造和集成,实现的A2D AJAX接口如下:
$.ajax.RESTFulGetCollection("/api/Users", function (data) { alert(data[5].FirstName); }); $.ajax.RESTFulGetOne("/api/Users/1", function (data) { alert(data.UserID); }); $.ajax.RESTFulDelete("/api/Users/1", function (data) { alert("deleted"); }); $.ajax.RESTFulPost("/api/Users", { UserID: 0, FirstName: "aa", LastName: "bbb"}, function (data) { alert("added"); }); $.ajax.RESTFulPut("/api/Users/1", { UserID: 0, FirstName: "aa", LastName: "bbb"}, function (data) { alert(data); });
我们再深入点,要是别人恶意访问Delete的url呢?比如CSRF攻击。普通webform或者普通MVC方式可以比较方便的阻止攻击, 方法参考这篇文章的A8章节
答案:使用http header来传递token。步骤如下(以A2D与ASP.NET WEBAPI配合为例):
@functions{ public string TokenHeaderValue() { string cookieToken, formToken; AntiForgery.GetTokens(null, out cookieToken, out formToken); return cookieToken + ":" + formToken; } } $.ajax.Config.CSRFToken="@TokenHeaderValue()"; //把生成的token赋给A2D的ajax $.ajax.RESTFulGetCollection("/api/Users", function (data) { alert(data[5].FirstName); }); $.ajax.RESTFulGetOne("/api/Users/1", function (data) { alert(data.UserID); }); $.ajax.RESTFulDelete("/api/Users/1", function (data) { alert("deleted"); }); $.ajax.RESTFulPost("/api/Users", { UserID: 0, FirstName: "aa", LastName: "bbb"}, function (data) { alert("added"); }); $.ajax.RESTFulPut("/api/Users/1", { UserID: 0, FirstName: "aa", LastName: "bbb"}, function (data) { alert(data); });
然后编写webapi的handler:
public class CSRFHandler : DelegatingHandler { protected override System.Threading.Tasks.Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) { if (request.Method == HttpMethod.Post || request.Method == HttpMethod.Put || request.Method == HttpMethod.Delete)//这里csrf只针对这3种请求才会验证 { ValidateRequestHeader(request); } return base.SendAsync(request, cancellationToken); } private void ValidateRequestHeader(HttpRequestMessage request) { string cookieToken = ""; string formToken = ""; IEnumerable<string> tokenHeaders; if (request.Headers.TryGetValues("A2D-CSRFToken", out tokenHeaders)) //这个header值要和A2D框架中的一致 { string[] tokens = tokenHeaders.First().Split(':'); if (tokens.Length == 2) { cookieToken = tokens[0].Trim(); formToken = tokens[1].Trim(); } } AntiForgery.Validate(cookieToken, formToken); } }
最后在WebApiConfig中注册这个handler
public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.MessageHandlers.Add(new CSRFHandler()); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } }
好了,都搞定了。
code download.
相关文章
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)模拟刮奖
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(Progress.js)圆形动画进度条
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
- JS框架_(JQuery.js)上传进度条
- Node.js配合jQuery UI autocomplete的应用
- baguetteBox.js响应式画廊插件(纯JS)
- JS的去抖、节流
- js逆向5-对抗调试干扰策略和实战
- [Node.js] Mock an API for Local Development in React with Mirage JS
- js-ECMAScript-6:自定义对象
- [Node.js] Mock an API for Local Development in React with Mirage JS
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- Vue.js:轻量高效的前端组件化方案
- js那些你可能忽略的小细节
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- 华为校招机试 - 发广播(Java & JS & Python)
- 原生js实现随机验证码HTMl-JS
- js中的多维数组转成一维数组
- 第63篇 QML 之 JS中的代码块、条件语句
- 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手
- node.js JS对象和JSON字符串之间的转换
- 前端可视化:Fabric.js HTML5 canvas 工具库
- JS:使用Mock.js生成随机数据,拦截 Ajax 请求
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- Node.js学习笔记(一)——Node.js概要、NPM与package.json
- JS 高级(四)ES5保护对象、Object.create()、替换this指向
- 【JS高级】js面向对象三大特性之继承_06
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 【JS高级】js之闭包对象_04
- JS工具方法 3 js客户端与php服务器通信加密之AES