![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@sanity/state-router
Advanced tools
Readme
Based on a routing schema:
Define the routes for your application and how they should map to application state
import {route} from '@sanity/state-router'
const router = route('/', [
route('/products/:productId'),
route('/users/:userId'),
route('/:page'),
])
router.encode({})
// => '/'
router.decode('/')
// => {}
router.encode({productId: 54})
// => '/products/54'
router.decode('/products/54')
// => {productId: 54}
router.encode({userId: 22})
// => '/users/22'
router.decode('/users/54')
// => {userId: 54}
router.encode({page: 'about'})
// => '/about'
router.decode('/about')
// => {page: about}
route(path : string, ?options : Options, ?children : ) : Router
route.scope(name : string, path : string, ?options : Options, ?children : ) : Router
Router
:
encode(state : object) : string
decode(path : string) : object
isRoot(path : string) : boolean
getBasePath() : string
,isNotFound(pathname: string): boolean
getRedirectBase(pathname : string) : ?string
RouteChildren
:
Router | [Router] | ((state) => Router | [Router])
Options
:
{
path?: string,
children?: RouteChildren,
transform?: {[key: string] : Transform<*>},
scope?: string
}
children
can be either another router returned from another route()-call
, an array of routers or a function that gets passed the matched parameters, and conditionally returns child routesConsider the following routes:
const router = route('/', [
route('/about'),
route('/contact')
])
What route should be resolved from an empty state? Since both /about
and /contact
above resolves to an empty state object, there's no way to encode an empty state unambiguously back to either of them. The solution to this would be to introduce the page name as a parameter instead:
const router = route('/', route('/:page'))
Now, /about
would resolve to the state {page: 'about'}
which unambiguously can map back to /page
, and an empty state can map to /
. To figure out if you are on the index page, you can check for state.page == null
, (and set the state.page to null to navigate back to the index)
Query parameters doesn't work too well with router scopes as they operate in a global namespace. A possible workaround is to "fake" query params in a path segment using transforms:
function decodeParams(pathsegment) {
return pathsegment.split(';')
.reduce((params, pair) => {
const [key, value] = pair.split('=')
params[key] = value
return params
}, {})
}
function encodeParams(params) {
return Object.keys(params)
.map(key => `${key}=${params[key]}`)
.join(';')
}
const router = route('/some/:section/:settings', {
transform: {
settings: {
toState: decodeParams,
toPath: encodeParams
}
}
}, route('/other/:page'))
This call...
router.decode('/some/bar/width=full;view=details')
...will return the following state
{
section: 'bar',
settings: {
width: 'full',
view: 'details',
}
}
Conversely calling
router.encode({
section: 'bar',
settings: {
width: 'full',
view: 'details',
}
})
will return
/some/bar/width=full;view=details
A scope is a separate router state space, allowing different parts of an application to be completely agnostic about the overall routing schema is like. Let's illustrate:
import {route} from './src'
function findAppByName(name) {
return name === 'pokemon' && {
name: 'pokemon',
router: route('/:section', route('/:pokemonName'))
}
}
const router = route('/', [
route('/users/:username'),
route('/apps/:appName', params => {
const app = findAppByName(params.appName)
return app && route.scope(app.name, '/', app.router)
})
])
Decoding the following path...
router.decode('/apps/pokemon/stats/bulbasaur')
...will give us the state:
{
appName: 'pokemon',
pokemon: {
section: 'stats',
pokemonName: 'bulbasaur'
}
}
To check whether a path name matches, you can use the isNotFound method on the returned router instance:
const router = route('/pages/:page')
router.isNotFound('/some/invalid/path')
// => true
Using a base path is as simple as adding a toplevel route with no params:
const router = route('/some/basepath', [
route('/:foo'),
route('/:bar')
])
Any empty router state will resolve to /some/basepath
. To check if you should redirect to the base path on app init, you can use the router.isRoot(path)
and router.getBasePath()
method:
if (router.isRoot(location.pathname)) {
const basePath = router.getBasePath()
if (basePath !== location.pathname) {
history.replaceState(null, null, basePath)
}
}
For convenience, this check is combined in the method router.getRedirectBase()
, that if a redirect is needed, will return the base path, otherwise null
const redirectTo = router.getRedirectBase(location.pathname)
if (redirectTo) {
history.replaceState(null, null, redirectTo)
}
MIT-licensed
FAQs
Unknown package
The npm package @sanity/state-router receives a total of 8,599 weekly downloads. As such, @sanity/state-router popularity was classified as popular.
We found that @sanity/state-router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 35 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 unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.