davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>When “Everything” Becomes Too Much: The npm Package Chaos of 2024 (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://socket.dev/blog/when-everything-becomes-too-much">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>When “Everything” Becomes Too Much: The npm Package Chaos of 2024</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://socket.dev/blog/when-everything-becomes-too-much" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-09
    </p>
  </nav>
  <hr>
  <p>Happy 2024, folks! Just when we thought we'd seen it all, an npm user named PatrickJS, aka <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/user/gdi2290">gdi2290</a>, threw us a curveball. He (<a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://uncenter.dev/posts/npm-install-everything/">along with a group of contributors</a>) kicked off the year with a bang, launching a troll campaign that uploaded an npm package aptly named <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/everything"><code>everything</code></a>. This package, true to its name, depends on every other public npm package, creating millions of transitive dependencies.</p>
<h3>The Chaos Unleashed</h3>
<p>The <code>everything</code> package and its 3,000+ sub-packages have caused a <a class="chakra-link css-pmuo56" href="https://socket.dev/glossary/denial-of-service-dos">Denial of Service (DOS)</a> for anyone who installs it. We're talking about storage space running out and system resource exhaustion.</p>
<p>But that's not all. The creator took their prank to the next level by setting up http://everything.npm.lol, showcasing the chaos they unleashed. They even included a meme from Skyrim, adding some humor (or mockery, depending on your perspective) to the situation.</p>
<h4><code>everything</code>'s <code>package.json</code> file</h4>
<pre class="css-1nw4yob"><code class="chakra-code css-y2ougk" lang="json">{
  "name": "everything",
  "version": "3.0.0",
  "description": "npm install everything",
  "main": "index.js",
  "contributors": [
    "PatrickJS &lt;github@patrickjs.com&gt;",
    "uncenter &lt;hi@uncenter.dev&gt;",
    "ChatGPT &lt;chatgpt@openai.com&gt;",
    "trash &lt;trash@trash.dev&gt;",
    "Hacksore &lt;sean@boult.me&gt;"
  ],
  "scripts": {},
  "keywords": [
    "everything",
    "allthethings",
    "everymodule"
  ],
  "license": "MIT",
  "homepage": "https://github.com/everything-registry/everything",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/everything-registry/everything.git"
  },
  "dependencies": {
    "@everything-registry/chunk-0": "0.1.0",
    "@everything-registry/chunk-1": "0.1.0",
    "@everything-registry/chunk-2": "0.1.0",
    "@everything-registry/chunk-3": "0.1.0",
    "@everything-registry/chunk-4": "0.1.0"
  }
}</code></pre>
<h3>Echoes of the Past</h3>
<p>This isn't the first time we've seen such a stunt. Last year, the <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/no-one-left-behind/overview/2018.2.10"><code>no-one-left-behind</code></a> package by <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/user/zalastax">Zalastax</a> attempted something similar. It was removed, but then reemerged under a different scope with over 33,000 sub-packages. It's like playing whack-a-mole with npm packages!</p>
<p>It’s also reminiscent of a package called “hoarders” that used to directly depend on every module on npm (approximately 20,000 in 2012). It was published by software engineer Josh Holbrook, created to be “node.js's most complete utility grab bag.”</p>
<p>In an effort to maintain a secure and reliable ecosystem for JavaScript developers, <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://github.com/jfhbrook/hoarders#history">hoarders was effectively “cancelled”</a> by Isaac Schlueter (creator of the npm package manager) after a year, due to the strain it caused on the registry's database.</p>
<h3>Unintended Consequences</h3>
<p>The "everything" package, with its 5 sub-packages and thousands of dependencies, has essentially locked down the ability for authors to unpublish their packages. This situation is due to npm's policy shift following the infamous <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://qz.com/646467/how-one-programmer-broke-the-internet-by-deleting-a-tiny-piece-of-code">"left-pad" incident in 2016</a>, where a popular package <a class="chakra-link css-pmuo56" href="https://socket.dev/npm/package/left-pad"><code>left-pad</code></a> was removed, grinding development to a halt across much of the developer world. In response, npm tightened its <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://docs.npmjs.com/policies/unpublish">rules around unpublishing</a>, specifically preventing the unpublishing of any package that is used by another package.</p>
<p>Ironically, this policy trapped PatrickJS in his own web. Upon realizing the impact of his prank, he attempted to remove the <code>everything</code> package but was unable to do so. He reached out to the npm support team for help, but the damage was done.</p>
<p>PatrickJS wrote this apology on GitHub in a <a target="_blank" rel="noopener noreferrer" class="chakra-link css-pmuo56" href="https://github.com/everything-registry/everything/issues/17">since-removed GitHub issue</a>:</p>
<blockquote>Hi all! First, just want to apologize about any difficulties this package has caused. We are working to resolve the issues and we have contacted NPM regarding support with this matter (see below). We appreciate your patience.<br><br>The major issue here is that when a package depends on another package at a specific version, that version cannot be unpublished. We've since realized there is an issue with "star" versions - a.k.a depending on any/all versions of another package ( "package-xyz": "*" ) - any version of that package is now unable to unpublish. As I previously mentioned, we've reached out to npm and are hoping they can either A) allow folks to unpublish when the packages that depend on them use a "star" version, B) not permit star versions in published packages going forward, or as a last resort, C) remove our npm organization entirely (and remove all of the packages that are blocking unpublishing). As far as we can tell, there is simply nothing we can do on our own - we can't unpublish the packages ourselves (because other packages depend on them) and publishing a new version over them doesn't change anything.</blockquote>
<p>However, we now see that while <code>everything</code> remains on the registry, the <code>@everything-registry</code> scoped packages have been made private, potentially offering a resolution.</p>
<h3>The Ripple Effect</h3>
<p>This whole saga is more than just a digital prank. It highlights the <a class="chakra-link css-pmuo56" href="https://socket.dev/blog/inside-node-modules">ongoing challenges</a> in package management within the npm ecosystem. For developers, it's a reminder of the cascading effects of dependencies and the importance of mindful package creation, maintenance, and consumption.</p>
<p><img alt=" " loading="lazy" src="https://cdn.sanity.io/images/cgdhsj6q/production/14461d25dd2f7a1cf456a840fe3bc1e98670e3e0-2162x1902.png?w=1600&amp;fit=max&amp;auto=format">
<p>As we navigate the open source world, incidents like the <code>everything</code> package remind us of the delicate balance between freedom and responsibility in open-source software.</p></p>
<p>Install <a class="chakra-link css-pmuo56" href="https://socket.dev/github-app">Socket for GitHub</a> to stay secure this year, and let's see what the rest of 2024 has in store for us!</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>