Nginx实现jsonp调用

最新推荐文章于 2024-04-23 12:05:03 发布

原创最新推荐文章于 2024-04-23 12:05:03 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #nginx #callback #git #测试 #lua

Nginx 同时被 2 个专栏收录

15 篇文章

订阅专栏

小经验

12 篇文章

订阅专栏

本文将详细介绍如何利用Nginx及其第三方模块 ngx_devel_kit、set-misc-nginx-module 和 echo 实现JSONP跨域调用的功能。包括配置详解、测试验证以及防范XSS攻击的方法。

通过jsonp实现js跨域时，需要通过url参数指定回调函数名，比如：

> curl localhost/jsonptest?callback=cb123
> cb123({'name': 'kobe'});

下面就介绍如何在nginx中实现这一功能。

我们知道nginx中有着很多优秀的模块，这里也不例外，需要依赖几个第三方模块，包括：ngx_devel，set misc和echo。下载可以通过git，很方便：

git clone git://github.com/simpl/ngx_devel_kit.git
git clone git://github.com/agentzh/set-misc-nginx-module.git
git clone git://github.com/agentzh/echo-nginx-module.git

要重新编译nginx：

./configure --prefix=/home/server/NGINX_PREFIX 	\
	--add-module=/home/app/shmmap/ngx_module/ngx_devel_kit/ 	\
	--add-module=/home/app/shmmap/ngx_module/set-misc-nginx-module/ 	\
	--add-module=/home/app/shmmap/ngx_module/echo-nginx-module/

成功编译完nginx后，下面看看实现jsonp的具体配置：

location /jsonptest {
	default_type 'application/x-javascript';
	# 默认的回调函数名，如果不提供callback
	# 使用了set misc模块的set_if_empty指令。
	# 如果arg_callback为空，则赋值为第二个参数
	set_if_empty $arg_callback '_ntes_quote_callback';

	# 防止xss攻击
			
	# 符合js标识符规则，则输出
	if ($arg_callback ~* (^[^0-9][0-9a-z._]+$)) {
		echo_before_body -n "$arg_callback(";
		echo -n "{name: 'kobe'}";
		echo_after_body -n ");";
	}
			
	# 不符合js标识符规则，返回403
	if ($arg_callback !~* (^[^0-9][0-9a-z._]+$)) {
		return 403;
	}

}

下面测试一下：

> curl localhost:8088/jsonptest?callback=abc123
> abc123({name: 'kobe'});

下面测试xss攻击：

> curl 'localhost:8088/jsonptest?callback=alert(123);abc123'

<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
<hr><center>nginx/1.0.5</center>
</body>
</html>

通过上面的配置就实现了简单的jsonp调用，nginx社区提供了丰富的、优秀的模块，可以在此基础上构建丰富的应用，比如可以使用ngx_lua很简单的就实现上述功能。