【解決方法】next.jsで外部ドメインの画像を呼び出した際に発生したCSPエラー回避の対応

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
next.jsで外部ドメインの画像を呼び出した際に発生したCSPエラーを回避するための対応をメモしました。
経緯
next.jsのバージョンを10にあげたのと合わせて関連ライブラリのアップデートをこなった際に
外部ドメインからの画像呼び出しがCSPエラーとなり画像が表示されなくなってしまったことがきっかけになります。
環境
- next 9.1.1 → 10.2.3
- node 14.15.3
- express 4.17.1
- helmet 3.21.1 → 4.6.0
発生したエラー
CSPに違反しているため、画像 '' のロードを拒否しましたというエラーが発生しています。
CSP(セキュリティポリシーディレクティブ)エラー
vbnetRefused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:".
画像呼び出しもとのHTMLタグ
imgタグで外部ドメインを指定して呼び出しを行なっています。
ini<img src="http://subdomain.t-cr.jp/smpale.jpg" />
CSPヘッダーへ追記して解決
CSPヘッダーへ指定ドメインの設定を追記することで解決できました。
next.jsの構成
next.jsの構成としてSSR(サーバーサイドレンダリング)をexpressで行ってます。
またexpressのセキュリティー設定としてhelmetを入れているためhelmetの設定で対応しました。
helmetの設定
helmetの設定を追記
今回は'self'
とドメイン
を追加しました。
server/index.jsimport helmet from "helmet";
import express from "express";
import next from "next";
const nextServer = next();
nextServer.prepare().then(() => {
const app = express();
app.use(
helmet.contentSecurityPolicy({
useDefaults: true,
directives: {
"img-src": ["'self'", "static.t-cr.jp"]
}
})
);
})
helmetの設定
ここでimg-src
へ追記しています。
css helmet.contentSecurityPolicy({
useDefaults: true,
directives: {
"img-src": ["'self'", "static.t-cr.jp"]
}
})
必要に応じてhttps:
やdata:
などをあけてあげてください。
個別でCSPヘッダーを指定
helmetではなく個別でCSPヘッダーを指定する場合はexpress-csp-header
で設定できます。
express-csp-headerの設定
app.useでexpressCspHeader
の設定を渡してあげます。
server/index.jsimport { expressCspHeader, SELF } from 'express-csp-header';
import express from "express";
import next from "next";
const nextServer = next();
nextServer.prepare().then(() => {
const app = express();
app.use(expressCspHeader({
directives: {
'img-src': [SELF, 'subdomain.t-cr.jp']
}
}));
})
- article
Convex × React/Next.js 最速連携:useQuery/useMutation の実践パターン
- article
Next.js の Middleware 活用法:リクエスト制御・認証・リダイレクトの実践例
- article
【解決策】Next.js での CORS エラーの原因と対処方法まとめ
- article
Next.js で環境変数を安全に管理するベストプラクティス
- article
shadcn/ui × Next.js:モダンな UI を爆速構築する方法
- article
Next.js の Image コンポーネント徹底攻略:最適化・レスポンシブ・外部 CDN 対応
- article
WebSocket 技術の全体設計図:フレーム構造・サブプロトコル・拡張の要点を一気に理解
- article
Homebrew 技術ロードマップ 2025:ボトル・タップ・サービスの進化を俯瞰
- article
WebRTC 技術設計:SFU vs MCU vs P2P の選定基準と費用対効果
- article
Vitest カバレッジ技術の全貌:閾値設定・除外ルール・レポート可視化
- article
gpt-oss 技術ロードマップ 2025:機能進化と対応エコシステムの見取り図
- article
【徹底理解】GPT-5 のマルチモーダル活用最前線:テキスト・画像・音声・動画の融合ポイント
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来