Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@ued2345/octopus-util
Advanced tools
├── build
│ ├── build.js // 执行打包 npm run build
│ └── webpack.conf.js // webpack配置文件
├── dist
│ ├── octopus-util.min.js // 打包后的文件,也是被其它项目引入的文件
├── src
│ ├── device
│ │ │── getBrowser.ts // 获取操作系统类型
│ │ └── gettInApp.ts // 判断是否在APP内
│ ├── cookie
│ │ │── getCookie.ts // 获取cookie
│ │ │── setCookie.ts // 设置cookie
│ │ └── delCookie.ts // 删除cookie
│ ├── jsbrige
│ │ │── init // 二级目录
│ │ │ │── bridge.ts // 定义类型
│ │ │ └── brigeInit.ts // 创建bridge对象
│ │ └── jsBrige.ts // export jsbridge方法
│ ├── monitor
│ │ │── catchPerformance.ts // 性能监控上报
│ │ └── catchError.ts // 错误收集上报
│ ├── vue-plugin
│ │ │── directives // vue全局指令
│ │ │ └── bang // 埋点指令
│ │ └── vuePlugin.ts // export vuePlugin
│ └── index.ts // webpack打包入口文件
├── .babelrc // babel配置文件
├── tsconfig.config.js // ts配置文件
├── README.md // 项目说明文档
第一步:npm run build
第二步:npm发包
octopus = {
// 获取操作系统类型
getBrowser: () => {
android: boolean,
gecko: boolean,
iPad: boolean,
iPad: boolean,
iPhone: boolean,
ios: boolean,
mobile: boolean,
presto: boolean,
qq: boolean,
trident: boolean,
webApp: boolean,
webKit: boolean,
weixin: boolean,
},
// 通过userAgent 判断是否在APP内
getInApp: (uName) => {return boolean},
// JsBridge 与原生通信
JsBridge: {
// js调用webview事件
callHandle: ({method, params}, callback) => {},
// webView调用JS事件
registerHandle: (method, callback) => {},
},
// cookie 操作
setCookie: (name, value, days) => {},
getCookie: (name) => {},
delCookie: (name) => {},
VuePlugin, // vue工具(内含insert方法)
CatchError, // 错误收集
CatchPerformance // 性能监控
}
npm install --save-dev @ued2345/octopus-util
<script src="octopus-util.min.js"></script>
<script>
var browser = window.OcUtil.getBrowser()
</script>
import OcUtil from '@ued2345/octopus-util'
const browser = OcUtil.getBrowser()
// 或单独引用方法
import {getBrowser} from '@ued2345/octopus-util'
- window.onerror
- 资源加载失败捕获
- Vue组件错误捕获
- Promise中没有catch捕获错误会被捕获
import Vue from 'vue'
import { CatchError} from "@ued2345/octopus-util";
CatchError.getInstance(Vue, {
reportFun: function(data) { // 错误上报
console.log('error:', data)
},
})
/**
* 上报数据格式(data)
* data = {
* type: string; // 错误类型:ERROR_RUNTIME, ERROR_LOAD__TYPE(SCRIPT, LINK,IMG, AUDIO, VIDEO), ERROR_VUE, ERROR_REJECT
* level: number; // error : 1 warning: 2 info: 3
* message: string; // 错误详情
* url: string; // 错误文件url或当前url
* col?: number;
* row?: number;
* }
**/
// 调用方法
CatchError.getInstance(Vue, opts)
/**
* Vue: null 不会捕获vue 错误信息
* opts: {
* isReportNow: boolean; //是否立即上报(是:delay时间后立即执行多次上报,否:每隔delay时间上报一次)
* delay: number; // 延迟多长时间上报(默认3000)
* random: number; // 抽样上报 (0-1)1全量(默认全量)
* repeatNum: number; // 重复上报次数(默认3次),
* reportUnhandledRejection: boolean; // 是否捕获promise.reject错误
* reportFun: CallBack; // 上报错误函数
* }
**/
- Navigation Timing API
- Resource Timing API
- NetWork Information API
- Paint Timing API
import {CatchPerformance} from "@ued2345/octopus-util";
CatchPerformance.getInstance({
reportFun: (data) => { // 性能上报方法
console.log('sssss:', data)
}
})
// CatchPerformance.getInstatnce(opts)
interface opts {
paintTiming?: boolean; // 渲染时间点信息
navigationTiming?: boolean; // 客户端收集性能数据
resourceTiming?: boolean; // 资源信息
networkInformation?: boolean; // 网络信息
dataConsumption?: boolean; // 是否统计资源大小
random?: number; // 抽样上报(0-1)1全量
reportFun?: (data) => void; // 上报函数
}
// reportFun: (data: Data) => void
type EventType =
| "navigationTiming"
| "networkInformation"
| "resourceTiming"
| "paintTiming"
type Data = {name: EventType, data: any[]}[]
interface PerfumeNavigationTiming {
redirectTime?: number; // 重定向时间
dnsCatchTime?: number; // dns缓存时间
dnsTime?: number; // dns查询耗时
ttfbTime?: number; // 读取第一个字节的时间
unloadTime?: number; // 卸载页面耗时
tcpTime?: number; // tcp链接耗时
reqTime?: number; // request请求耗时
domTreeTime?: number, // 创建dom树
domAnalyzeTime?: number; // 解析dom树耗时
blankTime?: number; // 白屏时间
domReadyTime?: number; // domReadyTime耗时
loadTime?: number; // onload耗时
}
const getNavigationTiming = () => {
const t = (typeof this.w.PerformanceNavigationTiming === 'function') ? performance.getEntriesByType('navigation')[0] as any : this.wp.timing ;
if (!t) {
return {};
}
// We cache the navigation time for future times
return {
// 重定向时间:
redirectTime: t.redirectEnd - t.redirectStart,
// DNS缓存时间
dnsCatchTime: t.domainLookupStart - t.fetchStart,
// DNS解析时间
dnsTime: t.domainLookupEnd - t.domainLookupStart,
// ttfb 读取第一个字节的时间
ttfbTime: t.responseStart - t.domainLookupStart,
// 卸载页面耗时
unloadTime: t.unloadEventEnd - t.unloadEventStart,
// tcp链接耗时
tcpTime: t.connectEnd - t.connectStart,
// request请求耗时,页面下载耗时
reqTime: t.responseEnd - t.requestStart,
// dom渲染完成时间
domTreeTime: t.domInteractive - t.responseEnd,
//解析dom树耗时
domAnalyzeTime: t.domComplete - t.domInteractive,
// 白屏时间
blankTime: t.domInteractive - t.fetchStart,
// domReadyTime
domReadyTime: t.domContentLoadedEventEnd - t.fetchStart,
// onload耗时、首屏时间
loadTime: t.loadEventEnd - t.fetchStart
};
}
return {
name: 'navigationTiming',
data: <PerfumeNavigationTiming>Object
}
type PerformanceEntryInitiatorType =
| 'beacon' // 源于 sendBeacon 方法
| 'link'
| 'fetch' // 来源于 fetch 方法
| 'img'
| 'other'
| 'script'
| 'xmlhttprequest';
return {
name: 'resourceTiming',
data: {
resourceTiming: <PerformanceEntryInitiatorType>[],
dataConsumption: this.config.dataConsumption ? <PerformanceEntryInitiatorType>Object : null
},
}
type EffectiveConnectionType = '2g' | '3g' | '4g' | 'slow-2g';
interface PerfumeNetworkInformation {
downlink?: number; // 下行速度/带宽 Mb/s为单位的有效带宽
effectiveType?: EffectiveConnectionType; // 有效网络连接类型
onchange?: () => void; // 监听网络变化
rtt?: number; // 估算的往返时间
saveData?: boolean; // 打开/请求数据保护模式
}
return {
name: 'networkInformation',
data: <PerfumeNetworkInformation>Object
}
let startTime: number
return {
name: 'paintTiming',
data: [{
name: 'first-paint',
value: startTime,
}, {
name: 'first-contentful-paint',
value: startTime
}]
}
优化大部分在项目中业务代码中混入埋点代码的情况
可以改善以下三种情况下埋点代码的书写方式:
- 曝光: exposure(当该元素95%以上展示在可视区的时候触发)。
- 挂载: mounted(当该元素的dom生成的时候触发)。
- 点击: click(当该元素被点击的时候触发)。
// main.js 或单页应用入口js
import {VuePlugin} from '@ued2345/octopus-util'
// 模拟上报函数
// 1。若cbDataType为默认的情况下,参数同vue自定义指令
const bang = (el, binding) => {console.log(`触发上报,类型:${binding.arg},值: ${binding.value}`)}
// 2、若cbDataType为'array'的情况下, 参数为 [{el, binding, vnode, oldVnode}]
// const bang = (dataArr) => {
// dataArr.forEach(item => {
// console.log(`触发上报,类型:${item.binding.arg},值: ${item.binding.value}`)
// })
// }
Vue.use(VuePlugin, {
bang: {
// 自定义配置
cb: bang
}
})
// test.vue
<div v-bang:exposure="`我曝光啦`"></div> //曝光后输出: "触发上报,类型:exposure,值: 我曝光啦"
<div v-bang:click="`我被点啦`"></div> //点击后输出: "触发上报,类型:click,值: 我被点啦"
<div v-bang:mounted="`我出生了啦`"></div> //dom生成后输出: "触发上报,类型:mounted,值: 我出生了啦"
低版本兼容 因为低版本机型不支持intersectionObserver需要安装相应polyfill,具体步骤如下:
import 'intersection-observer'
支持配置
参数 | 说明 | 类型 | 是否必须 | 默认 |
---|---|---|---|---|
cb | 触发上报后的回调函数:当cbData为default时默认返回数据类型为:(el: HTMLElement, binding: DirectiveBinding, vnode: vnode, oldVnode: vnode) => void 详见官网。当cbDataType为'array'时会返回[{el, binding, vnode, oldVnode}] | 是 | 无 | |
clickThrottleInterval | 点击事件上报节流的间隙时间 | number | 否 | 2000 |
exposureMulti | 元素未销毁时是否可以多次发送曝光统计事件 | boolean | 否 | false |
imgErrExposure | 图片加载出错的时候是否算曝光成功(曝光事件绑定在img元素上时) | boolean | 否 | false |
cbDataType | 回调函数收到的参数类型 | 'default'/'array' | 否 | 'default' |
exposureUseCache | 是否对曝光事件使用缓存, cacheLen:缓存的消息条数, cacheTime: 缓存的时间(ms) | {cacheLen: number, cacheTime: number} | 否 | false |
exposureRatio | 元素在可视区中展示超过多少比例时触发曝光 | number | 否 | 0.95 |
<div v-if="show" v-bang:mounted="`显示1`" key="显示1">显示1</div>
<div v-else v-bang:mounted="`显示2`" key="显示2">显示2</div>
FAQs
ued2345 utils
The npm package @ued2345/octopus-util receives a total of 0 weekly downloads. As such, @ued2345/octopus-util popularity was classified as not popular.
We found that @ued2345/octopus-util demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.