✨
【Vercel・Next.js】Vercelでデプロイしたサイトをiframeで別ドメインに読み込む方法
はじめに
今回、Vercelでデプロイしたサイトをiframeで別ドメインのサイトに読み込むことを実装しました。
その際に、401エラーやx-frame-options: DENYでエラーが出てしまったので、その解消法を記事にします。
背景
- https://example.com で https:/example2.com の iframe を読み込みたい。
- next.config.jsで
Content-Security-Policyを設定している。 - デプロイは正常に行われサイトはリクエスト
200で問題なく表示されている。
エラー内容
- 読み込み側のサイトで読み込みむサイトに対して
401 Unauthorized。 -
X-Frame-Options: DENYで拒否されている。
解決方法
Vercelのプロジェクトページの設定画面で、Vercel Authenticationを無効化するとX-Frame-Options: DENYが取れて、Content-Security-Policyが正常に動作しました。
これでiframe読み込みが可能になります。
access-control-allow-origin: *のように設定されるので、絞る箇所は設定を見直す必要があります。
Vercel Authentication 有効化
curl -I https://example.com/
HTTP/2 401
cache-control: no-store, max-age=0
content-type: text/html; charset=utf-8
date: Fri, 08 Aug 2025 02:08:10 GMT
server: Vercel
set-cookie: _vercel_sso_nonce=xxxxxxxxxxxxx; Max-Age=3600; Path=/; Secure; HttpOnly; SameSite=Lax
strict-transport-security: max-age=63072000; includeSubDomains; preload
x-frame-options: DENY
x-robots-tag: noindex
x-vercel-id: hnd1::xxxxxxxxx
content-length: 13374
Vercel Authentication 無効化
curl -I https://example.com/
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 5643
cache-control: public, max-age=0, must-revalidate
content-disposition: inline
content-type: text/html; charset=utf-8
date: Fri, 08 Aug 2025 02:11:38 GMT
etag: "xxxxxxxxxxxxxxx"
last-modified: Fri, 08 Aug 2025 00:37:35 GMT
server: Vercel
strict-transport-security: max-age=63072000; includeSubDomains; preload
x-matched-path: /
x-robots-tag: noindex
x-vercel-cache: HIT
x-vercel-id: hnd1::xxxxxxxxxx
content-length: 5675
Discussion