前后端分离之后,如何保护你的API
(点击上方的蓝色文字,可快速关注我们)
前后端分离之后
前后端分离之后,在部署上通过一个反向代理就可以实现动静态分离,跨域问题的解决等。但是一旦引入鉴权,则又会产生新的问题。通常来说,鉴权是对于后台API/API背后的资源的保护,即 未经授权的用户不能访问受保护资源 。
要实现这个功能有很多种方式,在应用程序之外设置完善的安全拦截器是最常见的方式。不过有点不够优雅的是,一些不太纯粹的、非功能性的代码和业务代码混在同一个代码库中。
另一方面,各个业务系统都可能需要某种机制的鉴权,所以很多企业都会搭建SSO机制,即 Single Sign-On 。这样可以避免人们在多个系统创建不同账号,设置不同密码,不同的超时时间等等。如果SSO系统已经先于系统存在了很久,那么新开发的系统完全不需要自己再配置一套用户管理机制了(一般SSO只会完成 鉴权 中 鉴别 的部分, 授权 还是需要各个业务系统自行处理)。
本文中,我们使用基础设施(反向代理)的一些配置,来完成 保护未授权资源 的目的。在这个例子中,我们假设系统由这样几个服务器组成:
系统组成
这个实例中,我们的系统分为三部分
kanban.com:8000
(业务系统前端)api.kanban.com:9000
(业务系统后端API)sso.kanban.com:8100
(单点登录系统,登陆界面)
前端包含了HTML/JS/CSS等资源,是一个纯静态资源,所以本地磁盘即可。后端API则是一组需要被保护的API(比如查询工资详情,查询工作经历等)。最后,单点登录系统是一个简单的表单,用户填入用户名和密码后,如果登录成功,单点登录会将用户重定向到登录前的位置。
我们举一个具体场景的例子:
未登录用户访问
http://kanba.com:8000/index.html
系统会重定向用户到
http://sso.kanban.com:8100/sso?return=http://kanba.com:8000/index.html
用户看到登录页面,输入用户名、密码登录
用户被重定向回
http://kanba.com:8000/index.html
此外,
index.htm
l页面上的app.js
对api.kanban.com:9000
的访问也得到了授权
环境设置
简单起见,可以通过修改/etc/hosts文件来设置服务器环境:
nginx及auth_request
反向代理nginx有一个auth_request的模块。在一个虚拟host中,每个请求会先发往一个内部 location
,这个内部的 location
可以指向一个可以做鉴权的Endpoint。如果这个请求得到的结果是200,那么nginx会返回用户本来请求的内容,如果返回401,则将用户重定向到一个预定义的地址:
比如上面这个例子中, auth_request
的URL为 /api/auth
,它是一个内部的location,外部无法访问。在这个 locaiton
中,请求会被转发到 http://api.kanban.com:9000
,根据nginx的正则语法,请求将会被转发到 http://api.kanban.com:9000/api/auth
(我们随后可以看到这个Endpoint的定义)。
我们设置了请求的原始头信息,并禁用了request_body,如果cookie中包含了 w3=(\w+)
字样,则将这个w3的值抽取出来,并赋值给一个 X-KANBAN-TOKEN
的HTTP头。
权限Endpoint
对应的 /api/auth
的定义如下:
如果HTTP头上有 X-KANBAN-TOKEN
且值不为空,则返回200,否则返回401。
当这个请求得到401之后,用户被重定向到 http://sso.kanban.com:8100/sso
SSO组件(简化版)
这里用 sinatra
定义了一个简单的SSO服务器(去除了实际的校验部分)
/sso
对应的Login Form是:
当用户提交表单之后,我们只是简单的设置了 cookie
,并重定向用户到跳转前的URL。
前端页面
这个应用的前端应用非常简单,我们只需要将这些静态文件放到 /usr/local/var/www/kanban
目录下:
其中 index.html
中引用的 app.js
会请求一个受保护的资源:
从下图中的网络请求可以看到重定向的流程:
总结
本文我们通过配置反向代理,将多个Endpoint组织起来。这个过程可以在应用程序中通过代码实现,也可以在基础设施中通过配置实现,通常来讲,如果可以通过配置来实现的,就尽量将其与负责业务逻辑的代码隔离出来。这样可以保证各个组件的独立性,也可以使得优化和定位问题更加容易。
欢迎关注“互联网架构师”,我们分享最有价值的互联网技术干货文章,助力您成为有思想的全栈架构师,只聊架构,不聊其他!打造最有价值的架构师圈子和社区。
长按下方的二维码可以快速关注我们
如想加群讨论学习,请点击右下角的“加群学习”菜单入群。
前后端分离之后,如何保护你的API相关推荐
- 谈谈前后端分离实践中如何提升RESTful API开发效率
点击上方"朱小厮的博客",选择"设为星标" 后台回复"书",获取推荐书籍 来源:33h.co/edZR 团队内部RestAPI开发采用设计驱 ...
- Vue前后端分离项目与vue-baidu-map百度地图api整合使用步骤
1.首先 必须在index.html文件中引入 这段脚本,不然就算执行了下面的,地图也会不显示,这个是坑. $ npm install vue-baidu-map --save npm安装完后在vu ...
- 基于VUE只是作为模版引擎的前后端分离
首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了, ...
- 从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言
缘起 作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
- python flask高级编程之restful_('Python Flask高级编程之RESTFul API前后端分离精讲',),全套视频教程学习资料通过百度云网盘下载...
资源详情 r n t某课网好评度100%的Python Flask高级编程之RESTFul API前后端分离精讲 r n t t t第1章 随便聊聊 r n t t t聊聊Flask与Django,聊 ...
- springboot jwt token前后端分离_为什么要 前后端分离 ?
作 者:互扯程序 来 源:互扯程序 广而告之:由于此订阅号换了个皮肤,系统自动取消了读者的公众号置顶.导致用户接受文章不及时.您可以打开订阅号,选择置顶(星标)公众号,重磅干货,第一时间送达! 本文知 ...
- SpringBoot集成Shiro前后端分离使用redis做缓存
文章目录 一 .shiro介绍 1.基础介绍 2.基本功能点 3.基本流程图 二. 常用的权限管理表关系 2.1. 表组成 2.2. 表结构 三.实战案例 3.1. 案例介绍 3.2. 依赖 3.3. ...
- 前后端分离Java后端跨越问题解决
前后端分离的思想由来已久,不妨尝试一下,从上手开始,先把代码写出来再究细节. 代码下载:https://github.com/jimolonely/AuthServer 前言 以前服务端为什么能识别用 ...
- 前后端分离重复提交_阿里一面:如何保证API接口数据安全?
前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端 ...
- rsa前后端加密流程_不懂前后端分离?这篇就够了
一 传统的开发模式 前后端分离前我们的开发协作模式一般是这样的: 前端写好静态的HTML页面交付给后端开发.静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可. 后端使用模板引擎去套模板, ...
最新文章
- 第十八篇:Question Answering问答系统
- vue服务端渲染浏览器端缓存(keep-alive)
- js 的try catch应用
- python流程控制-Python | 流程控制
- android 起动APP时锁住(Lock apps)
- 打开vs2010,提示无效的许可证数据,需要重新安装
- jzoj1402-偷懒的小X【贪心】
- 判断访问页面的设备并打开对应的网站
- python123九宫格输入_使用python PIL库实现简单验证码的去噪方法步骤
- tidyverse —— readr包
- python:只想在opencv中显示红色通道?
- JAVA实现上传,下载,jxl操作Excel和邮件发送
- VUE + 微信分享
- 一只小蜜蜂(C语言)
- 关于MD服装大师制作后导入到SP中的设置相关问题
- 破解从 AppStore 下载的 IPA
- 【Matlab】结构在傅里叶展开下的周期荷载响应——文末附源码
- CentOS7 安装 Eclipse Che
- cocos2dx 更改帧频
- 华硕fl8000u是什么型号_华硕fl8000u怎么样 华硕笔记本fl8000u配置及报价