Cybozu Frontend Monthly #68

タイトル画像

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。
2016年3月15日から行われています。

ZennのPublicationにてウィークリーのまとめを投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2026年04月28日

イベントページ

https://cybozu.connpass.com/event/390340/

メンバー

@mugi_uno @mugi_uno
@nus3_ @nus3_
@sajikix @sajikix

コンテンツ

👀 Notable Articles

Post Mortem: axios npm supply chain compromise

2026 年 3 月 31 日に、週 1 億回以上ダウンロードされるメジャーなデータフェッチ用ライブラリである axios において、 メンテナーアカウントが乗っ取られ、悪意あるコードが混入されたバージョンが公開される、という事案が発生しました。

この件について、公式から Post Mortem が公開されました。
https://github.com/axios/axios/issues/10636

この中で、メンテナーアカウントが乗っ取られた流れについても説明されていました。 https://securitylabs.datadoghq.com/articles/axios-npm-supply-chain-compromise/#how-the-maintainer-got-compromised

以下、引用です。

  1. The attacker reached out impersonating the founder of a company, using the real founder’s likeness and branding.
    訳: 攻撃者は、本物の創業者の顔写真とブランディングを使用して、会社の創業者を装って連絡を取りました。
  2. They invited the maintainer to a Slack workspace designed to pass as the company’s internal communications. The workspace had channels sharing LinkedIn posts that linked to the real company’s account, fake profiles for the company’s team, and profiles of other open source maintainers.
    訳: 攻撃者は、会社の内部通信を模倣する Slack ワークスペースを招待しました。ワークスペースには、本物の会社のアカウントにリンクする LinkedIn 投稿、会社のチームの偽のプロフィール、その他のオープンソースメンテナーのプロフィールが含まれるチャンネルがありました。
  3. They scheduled a Microsoft Teams meeting with what appeared to be a group of people.
    訳: 攻撃者は、見た目がグループの人たちとの Microsoft Teams ミーティングを予約しました。
  4. During the call, the maintainer was told a component on their system was out of date and was prompted to install an update. The update was the RAT.
    訳: 電話で、メンテナーにシステムのコンポーネントが古くなっていると伝え、更新をインストールするように促しました。更新は RAT (トロイの木馬) でした。

（アカウント自体は 2FA が有効であったものの、復旧コードが利用されたことが予想されるそうです。）

ソーシャルエンジニアリングによる非常に手が込んだ攻撃であり、人間自体を狙われた、という点が注目されました。

昨年末から npm パッケージによるサプライチェーン攻撃が頻発していることもあり、 利用側としては引き続き対策に取り組んでいく必要がありそうです。

min-release-age は、従来は pnpm や yarn にしか無かった概念ですが、現在では npm 標準で利用可能となっていたり、 pnpm では次期バージョン(v11)では minimumReleaseAge の設定自体がデフォルトになる見込みであったり、 パッケージマネージャ側を更新することでもセキュリティ向上に繋がる可能性もあるため、注意を払っておいたほうが良さそうです。

Vitest のドキュメントに Learn セクションが追加

Vitest のドキュメントに Learn セクションが追加されました。 Learn セクションには次の内容が含まれています。

Learn の各セクションを読んで見ての感想

Under the hood of MDN’s new frontend

MDN が React ベースのアーキテクチャから Lit/Web Components・Declarative Shadow DOM・Rspack を活用した新構成に移行した技術的な詳細を解説した記事が公開されました。

以前の実装は Create React App 起点の React SPA だったが、以下のような課題があったそうです。

またそもそも React SPA 実装でも多くの静的コンテンツはdangerouslySetInnerHTMLで埋め込まれており、単なるラッパーのようになってしまっていました。にも変わらず React SPA のバンドルサイズやレンダリング負荷などは無視できるものではなくユースケースに対してあっていない実装になってしまっていたようです。

むしろ MDN のようなコンテンツは静的なページの中にインタラクティブな要素が点在する構成のため、Web Components を活用した新しいアーキテクチャに移行することになったそうです。

ライブラリとしては Lit を導入し、Lit の html テンプレートリテラルをベースに独自の Server Component のような仕組みを構築しているようです。動的な要素に関しては「ページ読み込み時に DOM を走査して mdn-* 要素を見つけたら対応する element.js を動的 import する」という仕組みで実現しています。

CSS に関しても OuterLayout で実際にレンダリングされたコンポーネント分の CSS だけを <link> で差し込む仕組みを Rspack の compilationStats を利用する形で実装しているようです。

近年では静的なコンテンツなどでは Astro などを採用する例が多い中で、MDN のような大規模サイトで Web Components を活用した例は珍しく、参考になる点が多い記事でした。

🗓 Monthly Articles

📖 Framework, Library

⚡️ Services

🖥 Browsers

💬 Languages

🤖 Runtimes

📝 Specifications

🦆 Others