createImageData() with negative width and height aborts the process

オープン 初心者向け
  • 何か問題がありますか？
#2,633 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
76/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, node.js
領域
backend, web-dev

調査の方向性

まず、issueで名前が挙げられている Context2d::CreateImageData を読み、バッファを割り当てる前に幅と高さをどのように変換するかを追ってください。引用されているCanvas仕様と動作を比較し、提供されたスクリプトにある負のサイズの2つのケースを再現してください。完了条件は、どちらも例外を発生させたり異常終了したりせず、正の寸法を返すことです。それらのケースに絞ったテストを追加するか、実行してください。

索引モデルが issue の本文から書いたものです。

説明

Version of node-canvas

v3.2.3, v4.0.0-rc3 (master 6cc138b)

Version of node

v26.13.0

What operating system does the problem occur on?

Linux

Steps to reproduce

ctx.createImageData(sw, sh) should use the absolute values of sw and sh. In node-canvas a negative size is read as a huge unsigned number: one negative argument throws, and two negative arguments abort Node with a fatal out-of-memory error that cannot be caught.

const { createCanvas } = require('canvas');
const ctx = createCanvas(10, 10).getContext('2d');
try { const d = ctx.createImageData(-3, 2); console.log(d.width, d.height); } catch (e) { console.log('threw:', e.message); }
const d = ctx.createImageData(-3, -2);
console.log(d.width, d.height);

Run node repro.js; echo $?:

Actual:

threw: buffer exceeds 2147483647 bytes
FATAL ERROR: v8::ArrayBuffer::New Allocation failed - process out of memory
...
134

Expected (matches Chrome 153):

3 2
3 2
Additional information/comments

Per https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-createimagedata, createImageData(sw, sh) must initialize the ImageData object with the absolute magnitude of sw and sh. In Context2d::CreateImageData, the arguments are converted with Uint32Value(), turning -3 into 4294967293; with two negative values Bpp * width * height overflows int64_t, bypasses the nBytes > INT32_MAX check, and passes a negative nBytes to Napi::ArrayBuffer::New.

Credit: https://ucsbplse.github.io/

主要言語
JavaScript
スター
10.7k
フォーク
1.2k
30日以内にマージされた PR はありません

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

Automattic/node-canvas のほかの issue

Automattic/node-canvas の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。