网站素材站,深圳营销型企业网站,深圳品牌网站设计公司价格,设计师常备设计网站大全1、JSONP概念
JSONP(JSON with Padding)是JSON的一种“使用模式”#xff0c;可用于解决主流浏览器的跨域数据访问的问题。由于同源策略#xff0c;协议IP端口有任意不同都会导致请求跨域#xff0c;而HTML的script元素是一个例外。利用script元素的这个开放策略#xff0…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 langen
head
meta charsetUTF-8
titleJSONP 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?callbackmyCallback; // 将新创建的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 包含了用户的idnameemail等信息。 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?callbackhandleResponse;
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?callbackhandleResponsetoken${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劫持的风险。但是安全是一个综合性的工作前端和后端都需要共同努力来确保系统的安全性。
