JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響
ウェブブラウザのバージョン間の違いを無効化するJavaScriptライブラリ「Polyfill.io」が、2024年2月のプロジェクトオーナー変更後、マルウェアが混入されてサプライチェーン攻撃に利用され、10万以上のサイトに影響が出ています。 Polyfill supply chain attack hits 100K+ sites https://sansec.io/research/polyfill-supply-chain-attack 「Polyfill.io(polyfill.js)」はアンドリュー・ベッツ氏が開発したJavaScriptライブラリです。ウェブブラウザのバージョン間で機能の違いがあると開発時に苦労しますが、Polyfill.ioを利用すれば、新しいバージョンにしかない機能を古いバージョンで利用できるようになるため、バージョンの違いを気にすることなく開発を進めること
Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 | Codebook｜Security News
BleepingComputer – June 25, 2024 Polyfill.ioを使ったサプライチェーン攻撃で、10万件以上のサイトが影響を受けていることが判明した。サイバーセキュリティ企業のSansecが25日に発した警告によれば、今年初めに中国企業「Funnull」がPolyfill.ioのドメインとGitHubアカウントを購入後、ユーザーを有害なサイトへリダイレクトするようスクリプトが変更されたという。Sansecはこのインシデントを、典型的なサプライチェーン攻撃事例であると評している。 このスクリプト変更の結果、cdn.polyfill.io内のコードを使用しているあらゆるサイトを通じて、モバイルデバイスにマルウェアが注入されているという。このうち、あるマルウェアに関しては、偽のGoogleアナリティクスドメインを使用してユーザーを詐欺サイトへリダイレクトすることがわかって
polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
TL;DR 2024/06/26 実害が出ているようです、polyfill.ioを利用している場合は直ちに利用を止めましょう。 GIGAZINE: JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Codebook: Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 polyfill.ioから配信されるスクリプトが汚染される環境下にあり、危険な可能性があります。利用している方がいらっしゃいましたら外しておくことをおすすめします。または安全なバージョンのものがCloudflareとFastlyから利用できるので、ドメインをpolyfill-fastly.netやpolyfill-fastly.ioに変更して利用しましょう。 背景 自社で使用しているマーケティングプラットフォームサービスで作成したWebページをGo
polyfill.io now available on cdnjs: reduce your supply chain risk | The Cloudflare Blog
polyfill.io now available on cdnjs: reduce your supply chain risk02/29/2024 Polyfill.io is a popular JavaScript library that nullifies differences across old browser versions. These differences often take up substantial development time. It does this by adding support for modern functions (via polyfilling), ultimately letting developers work against a uniform environment simplifying development. T
New options for Polyfill.io users
Polyfill is a popular tool for enhancing browser capabilities. Many users access it by linking to the polyfill.io service, which has recently changed ownership to a new party. In order to ensure that everyone can maintain reliable and trusted access to Polyfill features, we have identified a few alternatives: First, Fastly is offering polyfill-fastly.net and polyfill-fastly.io as a free, drop-in r
Configuration Files (New) - ESLint - Pluggable JavaScript Linter
This config system is feature complete but not enabled by default. To opt-in, place an eslint.config.js file in the root of your project or set the ESLINT_USE_FLAT_CONFIG environment variable to true. To opt-out, even in the presence of an eslint.config.js file, set the environment variable to false. If you are using the API, you can use the configuration system described on this page by using the
JavaScript オプション引数のデフォルト値を指定したい - Qiita
function func1({a = 100, b = 200} = {}) { console.log(`${a}, ${b}`) } func1() // => 100, 200 func1({a: 20}) // => 20, 200 Refs デフォルト引数 - JavaScript | MDN 既定値のある分割代入の引数 既定値の代入を、分割代入表記で行うことができます。 これを行う一般的な方法は、空のオブジェクト/配列をオブジェクト/配列に分割代入することです。例えば、 [x = 1, y = 2] = [] とします。 このようにすることで、空の配列/オブジェクトを関数に渡しても、あらかじめ設定した値を保持することができます。 分割代入 - JavaScript | MDN
【JavaScript】動画以外の要素でもピクチャーインピクチャーできるらしい！ - Qiita
はじめに みなさんは、ピクチャーインピクチャーをご存じですか？ 動画やビデオ通話系のサービスやアプリではよくみますが、他の用途ではあまりみませんよね！ それもそのはずで、今までのピクチャーインピクチャーは、<video> 要素でのみ使うことができました。 ですが、Chrome 111 以降では、documentPictureInPictureを使うことで、<video> 要素以外の任意の要素をピクチャーインピクチャーさせることができるようになります。 今までできなかった <audio> や <img>のような要素をピクチャーインピクチャーさせることができるようになるので、CDジャケットを表示させながら音楽を再生させたりでき、webサイト上でできることが広がります。 そのためこの記事では、そんな documentPictureInPictureを使ったピクチャーインピクチャーについて紹介しま
rollup.jsでpreserveModulesを有効にしつつファイル名や拡張子を変える - Qiita
この記事の概要 rollup.jsを使っていて、アウトプット先を複数ファイルに分ける際にファイル名や拡張子を変更するのに手こずったので記事にしました。 背景 今回の悩みにぶつかった経緯は以下の流れです。 preserveModulesをtrueにしたい CJSとESMを両方含むパッケージを作りたい→拡張子をcjsとmjsの2つ用意したい {具体的なモジュール名}.jsになっているファイル名をindex.jsに統一したい ただし、最終的にこの内容は無くなった やること rollup.config.jsのoutput.entryFileNamesを追加する デフォルトのentryFileNamesは[name].jsが定義されているので、オーバーライドする export default { input: 'src/main.js', output: { dir: 'dist', entryFi
Rails: Webpackをesbuildに移行してJSのビルドを縮小・高速化（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: How I migrated a Rails app from Webpack to esbuild and got smaller and faster JS builds | Arkency Blog 原文公開日: 2022/08/29 原著者: Jakub Kosiński サイト: Arkency 原文の章立ての一部を訳文で変更しています。 先週、私はJavaScriptコードが30万行を超えるかなり大規模なプロジェクトで、Webpack 4をesbuildに移行する作業を担当しました。私たちのRailsプロジェクトではJavaScriptスタックをメインアプリケーションに統合するのにWebpackerを使っていました。ここ数か月はもっぱら長時間のビルドと格闘し続け、さらにWebpackerが推奨ライブラリでなくなったこ
therubyracer と libv8 と libv8-node - Qiita
これはなに Rails で開発されているプロダクトで libv8 が使われており違いや浅く歴史について調べたので簡単にまとめました TL;DR therubyracer と libv8 と libv8-node すべて JavaScript Engine V8 を実行バイナリである 最初は therubyracer が開発されていたが、 実行環境の差分追従などが困難になり libv8 の開発を開始、その後再び困難になったことから libv8-node の開発が行われている therubyracer, libv8, libv8-node の何れかの利用が求められたら、現在は libv8-node を使うことが望ましい therubyracer について therubyracer は JavaScript Engine V8 実行を行う binary を提供している Gem です 2018 年
ゆめみからの挑戦状第3弾のreduceを用いる解法 - Qiita
皆さんこんにちは。先日、大喜利大会 ゆめみからの挑戦状 としてJavaScriptのクイズが出題され、とても盛り上がっていました。リンク先の記事では、自分の解答も面白解答として紹介していただきました。模範解答は flatMap を用いるものですが、筆者の解答では配列操作の定番のひとつとして reduce メソッドを使ってみました。 そこでの解法がやや難解なコードとなっていたので、解説記事を用意しました。 問題と解答 出題されたクイズの内容は以下の通りです（上述の記事から引用）。 const array1 = [1, 2, 3, 4, 5, 6] const array2 = array1./* ここに解答を書いてください */ console.log(array2) // -> [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6] const arra
React 18のSuspenseを使ってReact Hook Formの非同期な初期値の扱いを簡単にする - Qiita
はじめに 普段はスタートアップで建設業界向けのSaaSの開発をしているtaroと申します。 今回はReact18で登場したSuspenseを触っていたら、React Hook Formでフォームの初期値に非同期な値を設定するのが簡単になりそうだなーって思ったので、試してみました。 React Hook Formを使ったことがない方でもきっとわかるような内容になっていると思うので、ぜひぜひ読んでみてくださいー！ この記事はこちらのイベントに参加しています。 前提を揃えるためにReact Hook Formを少し復習 本題に入る前に、React Hook Formについて少し復習して前提を揃えていこうと思います。 （「復習はいらないよー！」って方は、React Hook FormでSuspenseを使うまで飛んでください！） またSuspenseについては、公式ドキュメントや別の記事等をご参考
SvelteではじめるWeb Components開発 - Qiita
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
チェックボックスが押されたらどこが何番目のチェックボックスなのかを特定し、マークダウンを更新する - Qiita
Qiita Teamでは、タスク管理なども行いやすいように、記事中のチェックボックスを押すとマークダウンも変更されるようになっています。 今回、元々この処理の一部がjQueryで書かれていたのをReactで書き直したので、整理も兼ねて記事に起こしています。 構成としてはすごく簡易的に書くと下記の図のような感じになっています（コンフリクトなどによるエラー処理などは説明の簡潔化のため省略）。 ブラウザ側でどうマークダウンを変換するのか？という部分まで担当してもらい、サーバーは更新するのみという構成です。 具体的な実装を見ていきましょう。 ページを描画する まずはページを描画しましょう。インポートは省略しています。 interface Props { item: { rawBody: string body: string updatedAt: string // コンフリクト検知用 id: s
CoffeeScript 辞めました - クラウドワークス エンジニアブログ
CoffeeScript 辞めました はじめに こんにちは、CrowdWorks のジャンヌチームのエンジニア bugfire です。 CrowdWorks は歴史のあるサービスで CoffeeScript が利用されている箇所が大量にあります。 具体的には411ファイルありました。1 いまとなっては CoffeeScript を利用したコードを新たに書くことも少なくなり、改善するときに TypeScript で書き直されることも多くなってきました。しかし、個別に変換すると時間が掛かってしまうため、まとめて機械的に変換することにしました！ 3行まとめ CoffeeScript より TypeScript の方に記述を移していきたい。 利用している Sprockets の CoffeeScript 変換コードを借用して全ファイルを変換しました。 確認は変換前後の出力 JavaScript コ
"没IE時代" のCSSプロパティが凄い - Qiita
今まで「IE非対応」が壁となり業務での使用を躊躇していたCSSプロパティがいくつもありました。 しかし、ネットや各メディアでも話題になった通り、2022年6月16日、ついにIEのサポートが終了しました（一部OSを除く）。 そこで、IE終了により解き放たれた画期的なCSSプロパティを、個人的メモも兼ねて記載していきたいと思います。 全く新しいレイアウトの形「grid-template」 「grid-template」を初めて知った時は驚きました。 このプロパティを使用すると、以下コードのように視覚的にレイアウトをコントロールすることが可能となります。 See the Pen Untitled by monji (@monji88) on CodePen. これ、かなりやばくないでしょうか？見てわかるようにレイアウトはもちろん、各要素の高さ、幅、marginすらもgrid-templateプロ
既存のJestで書かれたテストを爆速実行するツール、uvu-jest を作りました - Qiita
import { suite } from 'uvu'; import { is } from 'uvu/assert'; const test = suite('desc1'); test('test1', () => is(1, 1)); test.run(); Jestのような魔法はなく、しっかりimportして明示的にrunします。これにより、単体のファイルをNode.jsで実行することもできるし、uvuのCLIコマンドを利用して実行することもできます。 また、アサートにはJestのexpect(...).toBe(...)ではなく、独自のパッケージuvu/assertのisなどを利用します。 (isなどのアサートがthrowするエラーをキャッチしてエラーレポートするため、uvu/assert以外を利用することも可能です。) 両者を以下のコマンドで実行してみると Jest: tim
【React】ライブラリーを使わないでパララックスを使って、リッチなサイトを作る - Qiita
概要 みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 このようなアニメーションを実装するのは大変です。 そのため、多くのライブラリーが公開され、簡単に実装できるようになっています。 ただ今回は、そんなライブラリーを使わずにパララックスのアニメーションを作成し、 リッチに見えるサイトを作成しました。 ↓作ったサイトはこちらです。ご覧ください。 ※ Qiita Engeer Festa 2022にご参加もお願いします。 パララックス（parallax）についてとは？ まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイトにおいては、パララックスはス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Puppeteerでヘッドレス Chromeのフルページスクリーンショットを撮る - Qiita
