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.
useSSE
is abbreviation for use server-side effect. It is a custom React hook to perform asynchronous effects both on client and serve side.
npm i use-sse
Use useSSE
to fetch data in component:
import React from "react";
import { useSSE } from "use-sse";
const MyComponent = () => {
const [data, error] = useSSE(() => {
return fetch("https://myapi.example.com").then((res) => res.json());
}, []);
return <div>{data.title}</div>;
};
All effects will be resolved on server side during rendering.
This is a part of server side render phase. Se an example for the whole code.
const { ServerDataContext, resolveData } = createServerContext();
// We need to render app twice.
// First - render App to reqister all effects
renderToString(
<ServerDataContext>
<App />
</ServerDataContext>
);
// Wait for all effects to finish
const data = await resolveData();
// Inject into html initial data
res.write(data.toHtml());
// Render App for the second time
// This time data form effects will be avaliable in components
const htmlStream = renderToNodeStream(
<ServerDataContext>
<App />
</ServerDataContext>
);
On client side of application use BroswerDataContext
:
// This will create context will all data fetched during server side rendering
const BroswerDataContext = createBroswerContext();
hydrate(
<BroswerDataContext>
<App />
</BroswerDataContext>,
document.getElementById("app")
);
const [data, error] = useSSE(effect, dependencies);
param | type | required | description | example |
---|---|---|---|---|
effect | () => Promise<any> | true | effect function returning promise which resolves to data | () => fetch('example.com').then(res=>res.json()) |
dependencies | any[] | false | list of dependencies like in useEffect | [] |
Returns an array with two elements [data, error]
.
data
- resolved response from effecterror
- an error if effect rejected or if timeout happend.Creates server side context.
const { ServerDataContext, resolveData } = createServerContext();
ServerDataContext
- React context provider component.
<ServerDataContext>
<App />
</ServerDataContext>
resolveData
- function to resolve all effects.
const data = await resolveData(timeout);
param | type | required | default value | description |
---|---|---|---|---|
timeout | number | false | undefined | max number of ms to wait for effects to resolve |
data
is an object containing value of context.
Calling data.toHtml(variableName)
will return a html script tak with stringified data:
param | type | required | default value | description |
---|---|---|---|---|
variableName | string | false | _initialDataContext | name of global variable |
data.toHtml();
// "<script>window._initialDataContext = { context data };</script>"
Both should be used in server side render function.
Creates client side context.
createBroswerContext(variableName);
param | type | required | default value | description |
---|---|---|---|---|
variableName | string | false | _initialDataContext | name of global variable |
BroswerDataContext
- React context provider for client side application
<BroswerDataContext>
<App />
</BroswerDataContext>
See example directory for React with SSR and useSSE.
The same example is avaliable on CodeSandbox.
FAQs
useSSE - use server-side effect
The npm package use-sse receives a total of 3,927 weekly downloads. As such, use-sse popularity was classified as popular.
We found that use-sse demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.