Node.js设置CORS跨域请求中多域名白名单的方法


Posted in Javascript onMarch 28, 2017

CORS

说到CORS,相信前端儿都不陌生,这里我就不多说了,具体可以看看这篇文章。

CORS,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名。最常见的设置是:

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', 'true'); // 允许服务器端发送Cookie数据

然而,这样的设置是最简单粗暴,同时也是最不安全的。它表示该接口允许所有的域名对它进行跨域请求。然而,在一般实际业务中,都希望该接口只允许对某一个或几个网站开放跨域请求权限,而非全部。

那么,聪明的你肯定想着,多域名白名单还不简单吗,写个正则就好啦?再不行,直接配置 Access-Control-Allow-Origin 属性为用逗号分隔的多个域名不就好了吗?

就像下面这样:

res.header('Access-Control-Allow-Origin', '*.666.com'); 

// 或者如下
res.header('Access-Control-Allow-Origin', 'a.666.com,b.666.com,c.666.com');

很遗憾地告诉你,这样的写法是无效的。在Node.js中,res的响应头Header中的 Access-Control-Allow-Origin 属性不能匹配除 (*) 以外的正则表达式的,域名之间不能也用逗号分隔。也就是说, Access-Control-Allow-Origin 的属性值只允许设置为单个确定域名字符串或者 (*)。

既然我们希望允许的是多个域名,也不愿意使用不安全的 * 通配符,难道就真不能配置多域名白名单的CORS了吗?

多域名白名单的CORS确实是可以实现的。只是有一点曲线救国的味道。

多域名白名单的CORS实现原理

具体原理可以参考cors库的核心代码:

(function () {

 'use strict';

 var assign = require('object-assign');
 var vary = require('vary');

 var defaults = {
 origin: '*',
 methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
 preflightContinue: false,
 optionsSuccessStatus: 204
 };

 function isString(s) {
 return typeof s === 'string' || s instanceof String;
 }

 function isOriginAllowed(origin, allowedOrigin) {
 if (Array.isArray(allowedOrigin)) {
 for (var i = 0; i < allowedOrigin.length; ++i) {
 if (isOriginAllowed(origin, allowedOrigin[i])) {
  return true;
 }
 }
 return false;
 } else if (isString(allowedOrigin)) {
 return origin === allowedOrigin;
 } else if (allowedOrigin instanceof RegExp) {
 return allowedOrigin.test(origin);
 } else {
 return !!allowedOrigin;
 }
 }

 function configureOrigin(options, req) {
 var requestOrigin = req.headers.origin,
 headers = [],
 isAllowed;

 if (!options.origin || options.origin === '*') {
 // allow any origin
 headers.push([{
 key: 'Access-Control-Allow-Origin',
 value: '*'
 }]);
 } else if (isString(options.origin)) {
 // fixed origin
 headers.push([{
 key: 'Access-Control-Allow-Origin',
 value: options.origin
 }]);
 headers.push([{
 key: 'Vary',
 value: 'Origin'
 }]);
 } else {
 isAllowed = isOriginAllowed(requestOrigin, options.origin);
 // reflect origin
 headers.push([{
 key: 'Access-Control-Allow-Origin',
 value: isAllowed ? requestOrigin : false
 }]);
 headers.push([{
 key: 'Vary',
 value: 'Origin'
 }]);
 }

 return headers;
 }

 function configureMethods(options) {
 var methods = options.methods;
 if (methods.join) {
 methods = options.methods.join(','); // .methods is an array, so turn it into a string
 }
 return {
 key: 'Access-Control-Allow-Methods',
 value: methods
 };
 }

 function configureCredentials(options) {
 if (options.credentials === true) {
 return {
 key: 'Access-Control-Allow-Credentials',
 value: 'true'
 };
 }
 return null;
 }

 function configureAllowedHeaders(options, req) {
 var allowedHeaders = options.allowedHeaders || options.headers;
 var headers = [];

 if (!allowedHeaders) {
 allowedHeaders = req.headers['access-control-request-headers']; // .headers wasn't specified, so reflect the request headers
 headers.push([{
 key: 'Vary',
 value: 'Access-Control-Request-Headers'
 }]);
 } else if (allowedHeaders.join) {
 allowedHeaders = allowedHeaders.join(','); // .headers is an array, so turn it into a string
 }
 if (allowedHeaders && allowedHeaders.length) {
 headers.push([{
 key: 'Access-Control-Allow-Headers',
 value: allowedHeaders
 }]);
 }

 return headers;
 }

 function configureExposedHeaders(options) {
 var headers = options.exposedHeaders;
 if (!headers) {
 return null;
 } else if (headers.join) {
 headers = headers.join(','); // .headers is an array, so turn it into a string
 }
 if (headers && headers.length) {
 return {
 key: 'Access-Control-Expose-Headers',
 value: headers
 };
 }
 return null;
 }

 function configureMaxAge(options) {
 var maxAge = options.maxAge && options.maxAge.toString();
 if (maxAge && maxAge.length) {
 return {
 key: 'Access-Control-Max-Age',
 value: maxAge
 };
 }
 return null;
 }

 function applyHeaders(headers, res) {
 for (var i = 0, n = headers.length; i < n; i++) {
 var header = headers[i];
 if (header) {
 if (Array.isArray(header)) {
  applyHeaders(header, res);
 } else if (header.key === 'Vary' && header.value) {
  vary(res, header.value);
 } else if (header.value) {
  res.setHeader(header.key, header.value);
 }
 }
 }
 }

 function cors(options, req, res, next) {
 var headers = [],
 method = req.method && req.method.toUpperCase && req.method.toUpperCase();

 if (method === 'OPTIONS') {
 // preflight
 headers.push(configureOrigin(options, req));
 headers.push(configureCredentials(options, req));
 headers.push(configureMethods(options, req));
 headers.push(configureAllowedHeaders(options, req));
 headers.push(configureMaxAge(options, req));
 headers.push(configureExposedHeaders(options, req));
 applyHeaders(headers, res);

 if (options.preflightContinue ) {
 next();
 } else {
 res.statusCode = options.optionsSuccessStatus || defaults.optionsSuccessStatus;
 res.end();
 }
 } else {
 // actual response
 headers.push(configureOrigin(options, req));
 headers.push(configureCredentials(options, req));
 headers.push(configureExposedHeaders(options, req));
 applyHeaders(headers, res);
 next();
 }
 }

 function middlewareWrapper(o) {
 if (typeof o !== 'function') {
 o = assign({}, defaults, o);
 }

 // if options are static (either via defaults or custom options passed in), wrap in a function
 var optionsCallback = null;
 if (typeof o === 'function') {
 optionsCallback = o;
 } else {
 optionsCallback = function (req, cb) {
 cb(null, o);
 };
 }

 return function corsMiddleware(req, res, next) {
 optionsCallback(req, function (err, options) {
 if (err) {
  next(err);
 } else {
  var originCallback = null;
  if (options.origin && typeof options.origin === 'function') {
  originCallback = options.origin;
  } else if (options.origin) {
  originCallback = function (origin, cb) {
  cb(null, options.origin);
  };
  }

  if (originCallback) {
  originCallback(req.headers.origin, function (err2, origin) {
  if (err2 || !origin) {
  next(err2);
  } else {
  var corsOptions = Object.create(options);
  corsOptions.origin = origin;
  cors(corsOptions, req, res, next);
  }
  });
  } else {
  next();
  }
 }
 });
 };
 }

 // can pass either an options hash, an options delegate, or nothing
 module.exports = middlewareWrapper;

}());

实现原理是这样的:

既然 Access-Control-Allow-Origin 属性已经明确不能设置多个域名,那么我们只得放弃这条路了。

最流行也是最有效的方法就是,在服务器端判断请求的Header中Origin属性值(req.header.origin)是否在我们的域名白名单列表内。如果在白名单列表内,那么我们就把 Access-Control-Allow-Origin 设置成当前的Origin值,这样就满足了Access-Control-Allow-Origin 的单一域名要求,也能确保当前请求通过访问;如果不在白名单列表内,则返回错误信息。

这样,我们就把跨域请求的验证,从浏览器端转移到服务端来了。对Origin字符串的验证就变成了相当于常规字符串的验证,我们不仅可以使用数组列表验证,还可以使用正则匹配。

具体代码如下:

// 判断origin是否在域名白名单列表中
function isOriginAllowed(origin, allowedOrigin) {
 if (_.isArray(allowedOrigin)) {
 for(let i = 0; i < allowedOrigin.length; i++) {
  if(isOriginAllowed(origin, allowedOrigin[i])) {
  return true;
  }
 }
 return false;
 } else if (_.isString(allowedOrigin)) {
 return origin === allowedOrigin;
 } else if (allowedOrigin instanceof RegExp) {
 return allowedOrigin.test(origin);
 } else {
 return !!allowedOrigin;
 }
}


const ALLOW_ORIGIN = [ // 域名白名单
 '*.233.666.com',
 'hello.world.com',
 'hello..*.com'
];

app.post('a/b', function (req, res, next) {
 let reqOrigin = req.headers.origin; // request响应头的origin属性

 // 判断请求是否在域名白名单内
 if(isOriginAllowed(reqOrigin, ALLOW_ORIGIN)) {
 // 设置CORS为请求的Origin值
 res.header("Access-Control-Allow-Origin", reqOrigin);
 res.header('Access-Control-Allow-Credentials', 'true');

 // 你的业务代码逻辑代码 ...
 // ...
 } else {
 res.send({ code: -2, msg: '非法请求' });
 }
});

Oh yeah,简直完美~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
vue登录路由验证的实现
Dec 13 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Javascript查看大图功能代码实现
May 07 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
TypeScript入门-基本数据类型
Mar 28 #Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 #Javascript
Vue.js 60分钟快速入门教程
Mar 28 #Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 #Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 #Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 #Javascript
js实现多行文本框统计剩余字数功能
Mar 28 #Javascript
You might like
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
js实现全选和全不选功能
2020/07/28 Javascript
Python实现处理管道的方法
2015/06/04 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
python定时截屏实现
2020/11/02 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
售后专员岗位职责
2013/12/08 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
保护环境建议书400字
2014/05/13 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2014年客房部工作总结
2014/11/22 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电