要点:Canvasでのピクセル操作の前提。 本ページでは、現場での判断軸/実装/検証までをまとめます。
定義
画像のCORSは配信制御や改ざん/盗用対策に関わるテーマです。利便性とのバランスを取りつつ最小権限で運用します。
なぜ重要か
利便性のための例外は脆弱性になりがちです。期限/権限を絞り、監査可能にします。
実務での活用(判断基準付き)
- 署名URLに有効期限と対象制限。キー漏洩時の失効手順を用意。
- CORS/Referrerを最小権限で。Canvas汚染を防止。
- 外部APIにはレート制限/監査ログ。
実装例
// 署名付きURLの例(Node)
import { createHmac } from 'crypto';
function signUrl(path: string, secret: string, ttlSec = 300) {
const exp = Math.floor(Date.now()/1000) + ttlSec;
const sig = createHmac('sha256', secret).update(`${path}:${exp}`).digest('hex');
return `${path}?exp=${exp}&sig=${sig}`;
}
検証と失敗例
- 計測軸: 目的に直結する指標/ログを定義し、端末/回線別の分布で評価。
- 失敗例: 過度の最適化で品質劣化 / キャッシュキー爆発 / 設計と実装の乖離。
- 判断軸: ユーザー価値の改善と運用コスト縮小が両立している。
チェックリスト
- 署名URLの有効期限/対象パス/権限を最小化したか
- Origin/Referer/CORSの整合でCanvas汚染を回避したか
- 外部変換APIにはレート制限/監査ログを付与したか
- キー漏洩時の無効化手順をドキュメント化したか