Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Watch an object or array for changes
It works recursively, so it will even detect if you modify a deep property like obj.a.b[0].c = true
.
Uses the Proxy
API.
npm install on-change
import onChange from 'on-change';
const object = {
foo: false,
a: {
b: [
{
c: false
}
]
}
};
let index = 0;
const watchedObject = onChange(object, function (path, value, previousValue, applyData) {
console.log('Object changed:', ++index);
console.log('this:', this);
console.log('path:', path);
console.log('value:', value);
console.log('previousValue:', previousValue);
console.log('applyData:', applyData);
});
watchedObject.foo = true;
//=> 'Object changed: 1'
//=> 'this: {
// foo: true,
// a: {
// b: [
// {
// c: false
// }
// ]
// }
// }'
//=> 'path: "foo"'
//=> 'value: true'
//=> 'previousValue: false'
//=> 'applyData: undefined'
watchedObject.a.b[0].c = true;
//=> 'Object changed: 2'
//=> 'this: {
// foo: true,
// a: {
// b: [
// {
// c: true
// }
// ]
// }
// }'
//=> 'path: "a.b.0.c"'
//=> 'value: true'
//=> 'previousValue: false'
//=> 'applyData: undefined'
watchedObject.a.b.push(3);
//=> 'Object changed: 3'
//=> 'this: {
// foo: true,
// a: {
// b: [
// {
// c: true
// },
// 3
// ]
// }
// }'
//=> 'path: "a.b"'
//=> 'value: [{c: true}, 3]'
//=> 'previousValue: [{c: true}]'
//=> 'applyData: {
// name: "push",
// args: [3],
// result: 2,
// }'
// Access the original object
onChange.target(watchedObject).foo = false;
// Callback isn't called
// Unsubscribe
onChange.unsubscribe(watchedObject);
watchedObject.foo = 'bar';
// Callback isn't called
Returns a version of object
that is watched. It's the exact same object, just with some Proxy
traps.
Type: object
Object to watch for changes.
Type: Function
Function that gets called anytime the object changes.
The function receives four arguments:
c
in the above example would return a.b.0.c
.WeakSets
and WeakMaps
will return undefined
.The context (this) is set to the original object passed to onChange
(with Proxy).
Type: object
Options for altering the behavior of onChange.
Type: boolean
Default: false
Deep changes will not trigger the callback. Only changes to the immediate properties of the original object.
Type: Function
Default: Object.is
The function receives two arguments to be compared for equality. Should return true
if the two values are determined to be equal. Useful if you only need a more loose form of equality.
Type: boolean
Default: false
Setting properties as Symbol
won't trigger the callback.
Type: Array<string | symbol>
Default: undefined
Setting properties in this array won't trigger the callback.
Type: boolean
Default: false
Setting properties with an underscore as the first character won't trigger the callback.
Type: boolean
Default: false
The path will be provided as an array of keys instead of a delimited string. Recommended when working with Sets, Maps, or property keys that are Symbols.
Type: boolean
Default: false
Ignore changes to objects that become detached from the watched object.
Type: boolean|string[]
Default: false
Trigger callbacks for each change within specified method calls or all method calls.
Type: Function
The function receives the same arguments and context as the onChange callback. The function is called whenever a change is attempted. Returning true will allow the change to be made and the onChange callback to execute, returning anything else will prevent the change from being made and the onChange callback will not trigger.
Returns the original unwatched object.
Type: object
Object that is already being watched for changes.
Cancels all future callbacks on a watched object and returns the original unwatched object.
Type: object
Object that is already being watched for changes.
I had some code that was like:
const foo = {
a: 0,
b: 0
};
// …
foo.a = 3;
save(foo);
// …
foo.b = 7;
save(foo);
// …
foo.a = 10;
save(foo);
Now it can be simplified to:
const foo = onChange({
a: 0,
b: 0
}, () => save(foo));
// …
foo.a = 3;
// …
foo.b = 7;
// …
foo.a = 10;
Proxy
too)array[-1]
(Uses Proxy
too)Proxy
too)Proxy
too)FAQs
Watch an object or array for changes
We found that on-change demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.