欢迎访问我的博客,你的支持,是我最大的动力!

[使用ELKStack打造日志分析平台03]使用js在浏览器上对ip地址进行地理位置解析

ELK Stack 小马奔腾 9213℃ 评论
目录:
[显示]

紧接上一篇,在上一篇里,我使用grafana对web访问日志做实时分析和展现,通过访问PV、IP、访问地址、查询请求、访问站点、状态码、agent、执行时间等维度对站点访问情况进行多维度展示,并且可以通过过滤器实现对单一值过滤,多维度联动。可以说es用来做日志实时分析非常赞,可以让我们从不同侧面对数据时行在线查询,可以让我知道某个ip进行了哪些访问。

美中不足:虽然现在可以对访问情况做多维度分析了,但是,对于访问端,我们可以看到它的ip、它的agent等等,但是却不能知道这个ip是那个地方的,也就是说,不能展现ip属地信息。

解决思路:因为整个ELK系统在当初部署的时候,没有使用geoip(国外的IP数据库,并不好用),那么,可选的方案有这些:1、使用离线ip数据库,比如纯真的数据库;2、阿里的ip服务(http://ip.taobao.com/);3、百度的普通ip定位api(http://lbsyun.baidu.com/index.php?title=webapi/ip-api)。纯真只能在服务器端操作,要集成到grafana或者elk中显然不是很容易,阿里的每秒只能请求10次,太慢,而百度的非常不错,所以选择使用百度的api。javascrip可以动态修改web页面的元素,那么,只需要写一个脚本,先获取ip字符串,再请求百度的api,对ip进行解析,得到百度的返回值后,再更新到页面上就可以了。而浏览器加载自定义js脚本,可以使用Tampermonkey (http://tampermonkey.net/index.php)。OK,思路有了,做起来也就简单了。

申请百度地图开放平台开发者

地址为:http://lbsyun.baidu.com/index.php

成为地图开放平台开发者后,可以使用的功能非常多,这里我们只需要使用普通IP定位API。该接口使用方法为:

返回为json格式的结果,定义如下:

这里我只需要address字段,其它信息是不需要的。

脚本代码

处理部骤:

1#定义正则匹配的正则表达式re
2#获取页面需要处理的元素,通过分析,可以通过class名称(table-panel-cell-filterable)来得到
3#取出所有要处理的元素,通过for循环对内容进行正则匹配
4#通过正则匹配的结果获取到ip后,使用ajax对该ip进行查询,得到返回带地理位置的结果
5#将获得的地理位置和原来的内容进行组装,并替换原来的内容
6#通过setInterval每隔一定时间执行一次上面的操作

代码如下,其中@match行填写你需要使用该脚本的URL;调用百度api时使用的ak请用自己申请的进行替换。

安装Tampermonkey和处理脚本跨站问题

该脚本是运行于浏览器端的,要运行脚本,需要使用Tampermonkey,别外,在js代码中,调用百度api时,使用的域名:api.map.baidu.com与当前浏览页面:xxx.xxx.com显然不是相同的域名,javascrip在跨站调用时,浏览器出于安全原因,会阻止脚本的跨站调用,因此,需要临时允许跨站,所以还需要另外一个扩展:CORS(跨域资源共享)工具。

FireFox

1、Tampermonkey

当前版本是4.6.5709,可以在官网下载:http://tampermonkey.net/index.php Tampermonkey支持的浏览器包括:Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。

2、CORS Everywhere

当前版本为17.7.16.1852,下载地址为:https://addons.mozilla.org/zh-CN/firefox/addon/cors-everywhere/?src=search 或者 https://addons.mozilla.org/cs/firefox/addon/cors-everywhere/?src=userprofile

Chrome

1、Tampermonkey

同Firefox。当前版本是4.5可以在官网下载:http://tampermonkey.net/index.php Tampermonkey支持的浏览器包括:Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。

2、CORS

CORS谷歌商店有几款,亲测这一款可用,地址:https://chrome.google.com/webstore/detail/cors/dboaklophljenpcjkbbibpkbpbobnbld

效果

注意,需要先在Tampermonkey中导入脚本,并启用CORS:,效果如下:可以在原IP的基础上,添加地域信息。

 

转载请注明:轻风博客 » [使用ELKStack打造日志分析平台03]使用js在浏览器上对ip地址进行地理位置解析

喜欢 (0)or分享 (0)