
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
lqip-loader
Advanced tools
npm install --save-dev lqip-loader
Generating Base64 & dominant colours palette for a jpeg image imported in your JS bundle:
PS: The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled.
webpack.config.js:
{
/**
* OPTION A:
* default file-loader fallback
**/
test: /\.jpe?g$/,
loaders: [
{
loader: 'lqip-loader',
options: {
path: '/media', // your image going to be in media folder in the output dir
name: '[name].[ext]', // you can use [hash].[ext] too if you wish,
base64: true, // default: true, gives the base64 encoded image
palette: true // default: false, gives the dominant colours palette
}
}
]
/**
* OPTION B:
* Chained with your own url-loader or file-loader
**/
test: /\.(png|jpe?g)$/,
loaders: [
{
loader: 'lqip-loader',
options: {
base64: true,
palette: false
}
},
{
loader: 'url-loader',
options: {
limit: 8000
}
}
]
}
your-app-module.js:
import banner from './images/banner.jpg';
console.log(banner.preSrc);
// outputs: "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY....
// the object will have palette property, array will be sorted from most dominant colour to the least
console.log(banner.palette) // [ '#628792', '#bed4d5', '#5d4340', '#ba454d', '#c5dce4', '#551f24' ]
console.log(banner.src) // that's the original image URL to load later!
To save memory and improve GPU performance, browsers (including Chrome started from 61.0.3163.38) will now render a slightly more crisp or pixelated Base64 encoded images.
Older Chrome to the left, Chrome v61 to the right.
If you want the blur to be smooth really bad, here's a fix!
img {
filter: blur(25px);
}
More history about the issue can be found here and here.
alternatively, you can fill the container with a really cheap colour or gradient from the amazing palette we provide.
Related projects to this would be lqip module for Node as well as lqip-cli.
Thanks to Colin van Eenige for his reviewing and early testing.
MIT - Zouhir Chahoud
FAQs
Low Quality Image Placeholders (LQIP) loader for webpack
The npm package lqip-loader receives a total of 1,700 weekly downloads. As such, lqip-loader popularity was classified as popular.
We found that lqip-loader demonstrated a not healthy version release cadence and project activity because the last version was released 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
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.