JavaScript之JSONP跨域
前言
jsonp是一种跨域通信的手段
原理
原理:
事先定义一个用于获取跨域响应数据的回调函数,并通过没有同源策略限制的script标签发起一个请求(将回调函数的名称放到这个请求的query参数里),然后服务端返回这个回调函数的执行,并将需要响应的数据放到回调函数的参数里,前端的script标签请求到这个执行的回调函数后会立马执行,于是就拿到了执行的响应数据。
缺点:
jsONP只能发起GET请求
实现
第一步:设定一个script标签
<script src="http://jsonp.js?callback=cb"></script>
// 或
let script = document.createElement('script');
script.src = "http://jsonp.js?callback=cb";
body.append(script)
第二步:callback定义了一个函数名,而远程服务端通过调用指定的函数并传入参数来实现传递参数,将function(response)传递回客户端
router.get('/', function(req, res, next) {
(()=>{
const data = {
x: 10,
};
let params = req.query;
if(params.callback){
let callback = params.callback;
console.log(params.callback);
res.send(`${callback}(${JSON.stringify(data.x)})`);
} else {
res.send('err')
}
})();
});
第三步:客户端接收到返回的js脚本,开始解析和执行function(response)
简单的实例:
来看一个一个简单的jsonp实现,其实就是拼接url,然后将动态添加一个script元素到头部。
function jsonp(req){
var script = document.createElement('script');
var url = req.url + '?callback=' + req.callback.name;
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
前端js示例:
function hello(res){
alert('hello ' + res.data);
}
jsonp({
url : '',
callback : hello
});
服务器端代码:
var http = require('http');
var urllib = require('url');
var port = 8080;
var data = {'data':'world'};
http.createServer(function(req,res){
var params = urllib.parse(req.url,true);
if(params.query.callback){
console.log(params.query.callback);
//jsonp
var str = params.query.callback + '(' + JSON.stringify(data) + ')';
res.end(str);
} else {
res.end();
}
}).listen(port,function(){
console.log('jsonp server is on');
});
可靠的jsonp实例:
(function (global) {
var id = 0,
container = document.getElementsByTagName("head")[0];
function jsonp(options) {
if(!options || !options.url) return;
var scriptNode = document.createElement("script"),
data = options.data || {},
url = options.url,
callback = options.callback,
fnName = "jsonp" + id++;
// 添加回调函数
data["callback"] = fnName;
// 拼接url
var params = [];
for (var key in data) {
params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
}
url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
url += params.join("&");
scriptNode.src = url;
// 传递的是一个匿名的回调函数,要执行的话,暴露为一个全局方法
global[fnName] = function (ret) {
callback && callback(ret);
container.removeChild(scriptNode);
delete global[fnName];
}
// 出错处理
scriptNode.onerror = function () {
callback && callback({error:"error"});
container.removeChild(scriptNode);
global[fnName] && delete global[fnName];
}
scriptNode.type = "text/JavaScript";
container.appendChild(scriptNode)
}
global.jsonp = jsonp;
})(this);
使用示例:
jsonp({
url : "www.example.com",
data : {id : 1},
callback : function (ret) {
console.log(ret);
}
});
广州品牌设计公司https://www.houdianzi.com
JSONP安全性问题
CSRF攻击
前端构造一个恶意页面,请求JSONP接口,收集服务端的敏感信息。如果JSONP接口还涉及一些敏感操作或信息(比如登录、删除等操作),那就更不安全了。
解决方法:验证JSONP的调用来源(Referer),服务端判断Referer是否是白名单,或者部署随机Token来防御。
XSS漏洞
不严谨的 content-type导致的 XSS 漏洞,想象一下 JSONP 就是你请求 http://youdomain.com?callback... 然后返回 douniwan({ data }),那假如请求 http://youdomain.com?callback=<script>alert(1)</script> 不就返回 <script>alert(1)</script>({ data })了吗,如果没有严格定义好 Content-Type( Content-Type: application/json ),再加上没有过滤 callback 参数,直接当 html 解析了,就是一个赤裸裸的 XSS 了。
解决方法:严格定义 Content-Type: application/json,然后严格过滤 callback 后的参数并且限制长度(进行字符转义,例如<换成<,>换成>)等,这样返回的脚本内容会变成文本格式,脚本将不会执行。
服务器被黑,返回一串恶意执行的代码
可以将执行的代码转发到服务端进行校验JSONP内容校验,再返回校验结果。
原文地址:https://www.cnblogs.com/xiaonian8/p/14017563.html
- lock小记
- HTML布局的基本要点
- Building a Middle Tier Component using NHibernate and Spring.NET
- Linq 和DefaultView两种方法去掉DataTable 里的重复行
- MySQL事务autocommit自动提交
- wcf webHttpBinding Post 大数据量提交 ios c#客户端
- 你现在还在手动生成set,get方法吗?
- ios 接收 c# socket udp 组播
- 大数据基础系列之JAVA引用详解
- Java集合深度解析之ArrayList
- wpf listBox 多列大图片效果
- ASP.NET 主题(Themes)FAQ
- wpf 解决 编码解码器无法使用提供的流类型 The codec cannot use the type of stream provided
- Java 9 逆天的十大新特性
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- sklearn和keras的数据切分与交叉验证的实例详解
- django Model层常用验证器及自定义验证器详解
- PyQT5 实现快捷键复制表格数据的方法示例
- Python爬虫headers处理及网络超时问题解决方案
- python报错: 'list' object has no attribute 'shape'的解决
- Python应用实现双指数函数及拟合代码实例
- 浅谈django不使用restframework自定义接口与使用的区别
- 实例解析php的数据类型
- 实现PHP中session存储及删除变量
- php微信公众号开发之秒杀
- php fread函数使用方法总结
- Yii2框架控制器、路由、Url生成操作示例
- Laravel框架实现调用百度翻译API功能示例
- phpstudy2018升级MySQL5.5为5.7教程(图文)
- laravel实现简单用户权限的示例代码