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.
@clutter/wt
Advanced tools
wt
is a JavaScript library to track events in the browser.
It provides a single function wt
that can be used as follows:
import wt from '@clutter/wt';
button.addEventListener(
'click',
() => wt('event'),
);
When button
is clicked, this code will instantiate an <img>
tag with the src
attribute set to:
/track.gif?payload[][kind]=event&payload[][url]=CURRENT_URL&payload[][ts]=1517356691057&agent=Mozilla&rts=1517356691561
On the server, the endpoint track.gif
is expected to return a valid image (for instance, a transparent pixel)
and to parse all the provided parameters, keeping track of the events sent by wt
.
The concept of wt
is the same as Google Analytics: to use a transparent pixel to track events in the browser.
The main difference is that wt
is highly customizable and can send events to your own server, rather than to Google.
The easiest way to install wt
is through Yarn:
yarn add @clutter/wt
Before calling the wt
method, import from the library:
import wt from '@clutter/wt';
Events can be tracked with the function wt(*string* kind, *object* params)
.
For a single event, sent kind
to 'event'
and pass any parameters you want to track in params
.
For instance:
wt('event', { action: 'hover' })
will instantiate an <img>
tag with the src
attribute set to
/track.gif
?payload[][kind]=event
&payload[][url]=CURRENT_URL
&payload[][action]=hover
&payload[][ts]=1517356691057
&agent=Mozilla
&rts=1517356691561
Breaking the URL down, /track.gif
is followed by these query parameters:
payload[][kind]
: the kind of tracking; in this case: 'event'
payload[][url]
: the URL of the page where the event occurredpayload[][action]
: the only param to track in this case: 'hover'
payload[][ts]
: the timestamp when the event occurred (Unix-time milliseconds)agent
: the User Agent of the requestrts
: the timestamp when the event was sent (that is, when the src
attribute of the image was set)Multiple events can be tracked by calling wt
several times:
wt('event', { action: 'hover' })
// after 0.2 seconds
wt('event', { action: 'click' })
Under the hood, wt
is optimized to deal with multiple events.
Firstly, wt
instantiates a new image only the first time wt
is invoked.
Every other time, wt
changes the src
attribute without creating a new image.
Secondly, wt
bundles multiple consecutive events into one request, if they occur within 1.5 seconds.
The goal is to avoid hitting the server too many times.
If multiple events are sent in the same request, each request has its own payload.
For instance, the URL for the two events above looks like this:
/track.gif
?payload[][kind]=event
&payload[][url]=CURRENT_URL
&payload[][action]=hover
&payload[][ts]=1517356691057
?payload[][kind]=event
&payload[][url]=CURRENT_URL
&payload[][action]=click
&payload[][ts]=1517356691257
&agent=Mozilla
&rts=1517356691561
This format of array in query parameters is particularly optimized for Rails.
wt('pageview')
By default, wt
expects the image to be located at /track.gif
in the same host as the current page.
This can be changed by initializing wt
with a different trackerUrl
before tracking:
wt('initialize', {
trackerUrl: 'www.my-pixel-endpoint.com/track.gif',
});
By default, wt
generates a cookie as a pixel to keep track of a visitor.
This can be changed by initializing wt
with a different domain
and expires
prior to tracking:
wt('initial', {
cookies: {
domain: '.example.com',
expires: 365,
}
})
Any object can be passed when tracking an event, for instance:
wt('event', {
action: 'click',
user: {
id: 1,
email: 'user@example.com'
},
custom: false,
});
If part of the payload is the same for every event, it can be set once using set
. For instance calling:
wt('set', {
user: {
id: 1
},
});
ensures that the user ID is sent as part of the payload in any event.
Calling set
multiple times adds new values without clearing the old ones.
In this sense, set
behaves like React.Component().setState()
.
All the values already set can be cleared with:
wt('clear')
You may want to subscribe to lifecycle events for the tracker.
import wt, { SEND_COMPLETED } from '@clutter/wt'
wt('subscribe', SEND_COMPLETED, () => {
console.log('Analytics data sent');
});
The lifecycle events are:
SEND_STARTED: "send:started"
- the tracker has started sending data via the tracker pixelSEND_COMPLETED: "send:completed"
- the tracker has finished sending data via the tracker pixelQUEUE_COMPLETED: "queue:completed"
- the tracker has finished sending data via the tracker pixel and no additional events are queuedQUEUE_CONTINUED: "queue:continued"
- the tracker has finished sending data via the tracker pixel and some additional events are queuedCalling this method will return an unsubscribe
method. You can use it to stop listening to the event.
import wt, { SEND_COMPLETED } from '@clutter/wt'
const unsub = wt('subscribe', SEND_COMPLETED, () => {
console.log('Analytics data sent - you\'ll only see this once');
unsub();
});
You may be sending a cookie back from your server. If you want to wait for an event to complete before performing actions, use the afterFirstLoad
command.
import wt from '@clutter/wt'
wt('afterFirstLoad', () => {
console.log('You\'ve sent your page view request!');
});
wt('pageview');
// if you call it later
wt('afterFirstLoad', () => {
console.log('This is invoked immediately');
});
In order for wt
to fully work, a server must be running that provides a track.gif
endpoint.
This can be built in Rails, node.js or any other technology.
An example is provided inside the repo at examples/index.server.js
FAQs
`wt` is a JavaScript library to track events in the browser.
The npm package @clutter/wt receives a total of 412 weekly downloads. As such, @clutter/wt popularity was classified as not popular.
We found that @clutter/wt demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.