Svelte is a radical approach to building user interfaces, transforming components into highly efficient vanilla JavaScript during build time. Versions 0.2.0 and 0.2.1, released on the same day in November 2016, showcase the rapid early development of this innovative framework. While both share the core philosophy of a "magical disappearing UI framework" and a similar set of development dependencies, a key difference lies in their release dates, reflecting a quick iteration.
For developers, Svelte at this stage offered a compelling alternative to traditional virtual DOM approaches. The absence of a runtime framework leads to smaller bundle sizes and improved performance. Exploring these early versions allows developers to understand the genesis of Svelte's core principles, such as component-based architecture and compile-time transformations. Notable dependencies like Rollup (for bundling), magic-string (for source map manipulation), and estree-walker (for traversing the Abstract Syntax Tree) indicate the framework's focus on efficient code generation. The inclusion of testing tools like Mocha, jsdom, and codecov highlights an emphasis on quality assurance. Although these versions are historical artifacts, they provide valuable insights into the evolution of a groundbreaking UI framework and demonstrate the commitment to performance, and a unique approach to web development that Svelte continues to champion today.
All the vulnerabilities related to the version 0.2.1 of the package
Svelte vulnerable to XSS when using objects during server-side rendering
The package svelte before 3.49.0 is vulnerable to Cross-site Scripting (XSS) due to improper input sanitization and to improper escape of attributes when using objects during SSR (Server-Side Rendering). Exploiting this vulnerability is possible via objects with a custom toString() function.
Svelte has a potential mXSS vulnerability due to improper HTML escaping
A potential XSS vulnerability exists in Svelte for versions prior to 4.2.19.
Svelte improperly escapes HTML on server-side rendering. It converts strings according to the following rules:
" -> "& -> &< -> <& -> &The assumption is that attributes will always stay as such, but in some situation the final DOM tree rendered on browsers is different from what Svelte expects on server-side rendering. This may be leveraged to perform XSS attacks. More specifically, this can occur when injecting malicious content into an attribute within a <noscript> tag.
A vulnerable page (+page.svelte):
<script>
import { page } from "$app/stores"
// user input
let href = $page.url.searchParams.get("href") ?? "https://example.com";
</script>
<noscript>
<a href={href}>test</a>
</noscript>
If a user accesses the following URL,
http://localhost:4173/?href=</noscript><script>alert(123)</script>
then, alert(123) will be executed.
XSS, when using an attribute within a noscript tag