web前端安全性——JSONP劫持

장숙혜

已于 2024-02-22 20:36:47 修改

阅读量1.3k

点赞数 28

分类专栏：前端安全性文章标签：前端

于 2024-02-22 20:35:08 首次发布

本文链接：https://blog.csdn.net/qq_53911056/article/details/136242308

版权

前端安全性专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、JSONP概念

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，协议+IP+端口有任意不同都会导致请求跨域，而HTML的script元素是一个例外。利用script元素的这个开放策略，网页可以得到从其他来源动态产生的JSON 资料。
代码如下仅供参考
假设有一个远程服务器 https://example.com/api/data，它返回以下 JSONP 格式的响应：

myCallback({"name": "John", "age": 30});

在前端，你可以创建一个 script标签，并将其 src 属性设置为该 URL，同时定义一个名为 myCallback 的函数来处理返回的 JSON 数据：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>JSONP Example</title>  
<script>  
  // 定义回调函数  
  function myCallback(data) {  
    console.log(data); // 输出：{name: "John", age: 30}  
  }  
</script>  
</head>  
<body>  
<script>  
  // 创建一个新的script标签  
  var script = document.createElement('script');  
  // 设置script标签的src属性为远程API的URL  
  script.src = 'https://example.com/api/data?callback=myCallback';  
  // 将新创建的script标签添加到DOM中  
  document.body.appendChild(script);  
</script>  
</body>  
</html>

举例：你可以在自己的界面建立搜索功能，但是搜索的数据等内容可以通过script标签的src属性为其他浏览器的URL ，那么你所搜索的数据就是来自于浏览器，也就是访问到这个函数参数中的 JSON 数据…

2、JSONP劫持概念

通过JSONP技术可以实现数据的跨域访问，必然会产生安全问题。如果网站B对网站A的JSONP请求没有进行安全检查直接返回数据，则网站B便存在JSONP漏洞，网站A利用JSONP漏洞能够获取用户在网站B上的数据。

3、流程

（1）用户在网站B注册并登录，网站B 包含了用户的id，name，email等信息。
（2）用户通过浏览器向网站A发出URL请求。
（3）网站A向用户返回响应页面，响应页面中注册了JavaScript的回调函数和向网站B请求的script标签。
（4）用户收到响应，解析JS代码，将回调函数作为参数向网站B发出请求
（5）网站B接收到请求后，解析请求的URL，以JSON 格式生成请求需要的数据，将封装的包含用户信息的JSON数据作为回调函数的参数返回给浏览器。
（6）网站B数据返回后，浏览器则自动执行Callback函数对步骤4返回的JSON格式数据进行处理，通过alert弹窗展示了用户在网站B的注册信息。另外也可将JSON数据回传到网站A的服务器，这样网站A利用网站B的JSONP漏洞便获取到了用户在网站B注册的信息。

4、JSPNP劫持的危害

（1）攻击者利用存在漏洞的网站，将链接通过邮件等形式推送给受害者，如果受害者点击了链接，则攻击者便可以获取受害者的个人敏感的信息。所以JSONP劫持漏洞会泄露信息。
（2）可能导致用户权限被盗用:攻击者通过JSON劫持构造盗取管理员或高权限用户的脚本，一旦被访问，权限立即被盗用。
（3）可以通过劫持对网页进行挂马;在JSON劫持点构造引向漏洞后门木马，但访问直接利用漏洞批量挂马。
（4）可对劫持页进行网站钓鱼;利用JSON劫持直接导向伪装网站地址
（5）可做提权攻击。

5、JSONP劫持的防护

（1）限制referer
前端可以通过设置document.referrer属性来限制Referer。虽然这并不能阻止攻击者伪造Referer，但可以增加一层防护。
代码如下仅供参考

// 设置或修改当前文档的Referer  
document.referrer = 'https://trusted-domain.com';  
// 发起JSONP请求  
const script = document.createElement('script');  
script.src = 'https://example.com/api/data?callback=handleResponse';  
document.body.appendChild(script);  
function handleResponse(data) {  
  // 处理返回的数据  
  console.log(data);  
}

注意：由于Referer可以被伪造，所以仅仅依赖Referer来防止JSONP劫持是不够的。它应该与其他安全措施结合使用。

（2）使用token
在前端，你可以通过添加一个自定义的token参数来增强JSONP请求的安全性。这个token可以是服务器生成的一个随机字符串，并存储在客户端的某个安全位置（如localStorage）。在服务器端验证该token。只有持有有效token的请求才会被处理。这样可以防止未经授权的第三方发起JSONP请求。
代码如下仅供参考

// 从安全存储中获取token  
const token = localStorage.getItem('secureToken');  
// 发起带token的JSONP请求  
const script = document.createElement('script');  
script.src = `https://example.com/api/data?callback=handleResponse&token=${token}`;  
document.body.appendChild(script);  
function handleResponse(data) {  
  // 验证token  
  if (data.token === token) {  
    // 处理返回的数据  
    console.log(data);  
  } else {  
    // token验证失败，可能是劫持攻击  
    console.error('Invalid token, potential JSONP hijacking!');  
  }  
}

在服务器端，你还需要验证这个token是否有效。只有当token有效时，才返回数据。这种方法可以增加攻击者伪造有效请求的难度。

（3）不使用JSONP进行跨域(最直接的方法)
现代浏览器支持CORS（跨源资源共享）机制，它提供了更安全、更灵活的跨域解决方案。通过使用CORS，可以在不暴露数据给不安全脚本的情况下实现跨域通信。
代码如下仅供参考
javascript

// 使用CORS替代JSONP  
fetch('https://example.com/api/data', {  
  method: 'GET',  
  mode: 'cors', // 表明这是一个跨域请求  
  headers: {  
    'Content-Type': 'application/json'  
  }  
})  
.then(response => response.json())  
.then(data => {  
  // 处理返回的数据  
  console.log(data);  
})  
.catch(error => {  
  console.error('Error:', error);  
});

使用CORS时，服务器需要正确配置响应头部以允许跨域请求
http

Access-Control-Allow-Origin: https://your-frontend-domain.com  
Access-Control-Allow-Methods: GET, POST, PUT, DELETE  
Access-Control-Allow-Headers: Content-Type

通过上面措施，前端可以显著减少JSONP劫持的风险。但是安全是一个综合性的工作，前端和后端都需要共同努力来确保系统的安全性。

장숙혜

关注

28
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端安全性——JSONP劫持

JSONP劫持的防护（1）限制referer前端可以通过设置document.referrer属性来限制Referer。虽然这并不能阻止攻击者伪造Referer，但可以增加一层防护。（2）使用token在前端，你可以通过添加一个自定义的token参数来增强JSONP请求的安全性。
复制链接

扫一扫