Rachid Allam, a vulnerability researcher, recently teamed up with Yasser Allam, known by the pseudonym inzo_, and picked Next.js as a target for their security vulnerability research. And sure enough, they found a critical flaw in the frontend framework.
“It didn’t take long before we uncovered a great discovery in the middleware,” Rachid wrote. “The impact is considerable, with all versions affected, and no preconditions for exploitability — as we’ll demonstrate shortly.”
The vulnerability relates to the fact the middleware is used for authorization, which is common.
He walks through the vulnerability, as well as offering patches for recent Next.js releases and workarounds for older versions of Next.js.
Rachid does add that while it took a few days for the vulnerability to be addressed by the Vercel team, once they became aware of it, “a fix was committed, merged, and implemented in a new release within a few hours (including backports).”
New CSS Proposal Changes Separator Lines
Microsoft is introducing a new proposal for drawing separator lines with CSS.
The CSS gap decoration proposal was introduced in a recent blog post by its author, Kevin Babbitt, a principal software engineer, and Patrick Brosset, a senior program manager at Microsoft Edge. The post details the various existing workarounds.
“Using the border CSS property is a very common way to draw separators,” the pair wrote. “However, it also comes with limitations and, with today’s CSS layout techniques, such as CSS Grid and Flexbox, using borders can often be in the way of simpler code.”
The piece points out that developers can already use the column-rule CSS property (and corresponding column-rule-* longhand properties) to draw lines between columns in a multicolumn layout.
The CSS gap decorations proposal would:
- Extend the property to apply to other layout types, such as grid and Flexbox.
- Introduce the row-rule property to match with column-rule.
- Expand the syntax of these properties to allow for different gap decorations in different parts of a container.
The post provides examples of what the code would look like and how it could change grids.
Image from Microsoft’s Edge blog.
“The proposal also makes it possible to fine-tune gap decorations using additional properties,” they state. “The *-rule-break and *-rule-outset properties control where gap decorations start and end relative to items in the container, including spanning items.”
So developers could make “gap decorations extend as far as possible along the centerline of a given gap, or stop at intersections, and even fine-tune how much of an offset you want between the decoration and the intersection, and in a way that even works when there are spanning grid items.”
TanStack Form Launches
Somehow we neglected to mention this one earlier, but TanStack, a new web developer framework, continues to grow in interesting ways. Most recently, this month it released TanStack Form, a headless, performant and type-safe form state management for TanStack, JavaScript, React, Vue, Angular, Solid and Lit.
TanStack Form has a tiny footprint, zero dependencies, a framework agnostic core and granular type-safe APIs, according to the blog post announcing TanStack Forms. Plans include adding a Svelte 5 adapter, persistent APIs and Form Groups.
Node.js Officially Drops CorePack
The Node.js Technical Steering Committee voted to stop distributing Corepack, a tool that simplified managing Node.js package managers, with future versions of Node.js.
Corepack will remain available in Node.js 24 and earlier as an experimental feature.
“The discussion around Corepack’s removal has been ongoing for years,” Sarah Gooding, head of Socket’s content marketing, reported on the company blog. “In November 2023, a proposal was made to enable Corepack by default, sparking debate within the Node.js community.”
The concern was that Corepack could be used as a way to decouple npm from Node.js releases. By March, she adds, the steering committee said there were no plans to remove npm from the Node.js distribution.
The TSC delegated Corepack-related decisions to the Package Maintenance Working Group (PMWG), which outlined a roadmap for its removal.
“The removal of Corepack marks a shift towards a leaner Node.js distribution, reinforcing the idea that package managers should remain decoupled from the runtime itself,” Gooding wrote. “This move aligns with trends in other ecosystems, where runtimes focus on core functionality while package managers operate independently.”
For developers, she recommended preparing for its removal by ensuring their workflows don’t depend on it being pre-installed in future Node.js releases.
Google Shifting Android OS Development to Private
Android Authority is reporting that, after 16 years of open source development, Google will now develop the Android OS in private, although it also said it’s still committed to releasing source code.
The Android Open Source Project (ASOP) was released by Google under the the Apache 2.0 License. The project accepted contributions from third-party developers.
“However, Google conducts most AOSP development itself, as it ‘treats the Android project as a full-scale product development operation’ to ‘ensure the vitality of Android as a platform and as an open-source project,’” the Wednesday article noted. “Therefore, Google has the final say on what code can be merged into AOSP and when new version source code is released.”
As part of the decision to develop the code privately, Google will also no longer have two main branches. The story details the problems that this approach has created for Google and the project.
New Tools Reduce Re-Renders
React-Scan was created by Aiden Bai to show re-renders in React. He’s used it to show performance problems with major sites like Twitter and GitHub, according to Svelte full stack programmer and YouTuber Stanislav Khromov.
In Svelte, it’s a harder crime to commit due to the way Svelte functions, but it is still possible to create re-render problems, Khromov said in a video.
Then Khromov encountered Render-Scan, a project by NullVoxPopuli that will show developers in any framework when something in the DOM updates and what kind of update occurred. This inspired Khromov to create a similar offering for Svelte. Svelte Render Scan allows you to watch your components update in real time, which makes it “perfect for debugging reactivity and performance issues,” the site notes.
In the video, he explains how re-renders are bad for performance, as well as how the tool addresses this problem.
YOUTUBE.COM/THENEWSTACK
Tech moves fast, don’t miss an episode. Subscribe to our YouTube
channel to stream all our podcasts, interviews, demos, and more.
