Confluenceでiframeを使ったPDF表示ができない場合の対処法
2025.05.08こんにちは。たかやまです。
Confluenceではiframeを利用したコンテンツの埋め込みをサポートしています。
iframeでPDFを埋め込む機会があり、その際にPDFがうまく表示されない問題に遭遇しました。
ワークアラウンド的ですがConfluence上でiframeを経由してPDFを表示することができたので今回はそちらを紹介します。
さきにまとめ
- 以下の場合にiframeでページ表示されないケースがある
- ブラウザのセキュリティ設定によるブロック
- レスポンスヘッダーに
X-Frame-Optionsが設定されている場合
- 一方でPDFについては上記設定が問題ない場合でもiframeでそのまま埋め込む場合ブロックされる
- Google Drive Viewerを経由することで、ワークアラウンド的にPDFを表示することができる
iframeを利用した埋め込みについて
簡単にiframeは「インラインフレーム」の略で、Webページ内に別のWebページを埋め込むためのHTML要素です。iframeを使用すると、Confluenceのページ内に外部コンテンツ（PDFや他のWebサイトなど）をシームレスに表示することができます。
まず、以下の手順に従いConfluenceでiframeを利用していきます。
以下の要素選択項目からiframe要素を呼び出すことができます。
（または /iframe でiframe要素を表示することもできます。）
要素を呼び出すと以下のようなプロパティが表示されます。
URLが必須項目であり、こちらに埋め込みたい対象のURLを指定します。
（他の項目はページサイズなどに合わせて適宜調整してください）
PDFの埋め込みの確認としてデジタル庁で公開しているPDFを埋め込んでみたいと思います。
https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/5ecac8cc-50f1-4168-b989-2bcaabffe870/c0444537/20230609_policies_priority_outline_22.pdf
すると冒頭でご紹介した以下のエラーが表示されPDFが表示されないことが確認できます。
（エラーメッセージはブラウザによってことなります）
このページは Chrome によってブロックされています
原因調査
既知の問題として、以下の内容が記載されています。
一部の Web サイトについて、iFrame の一部として含めようとすると空白で表示される場合があります。この原因として以下のことが考えられます。
- ブラウザが iFrame 内で Web サイトをレンダリングしないように、Web サイト管理者が x-frame-options レスポンス ヘッダーを設定している。
- 使用しているブラウザが、セキュリティ対策として、Web サイトのロードをブロックしている。
https://support.atlassian.com/ja/confluence-cloud/docs/insert-the-iframe-macro/
ブラウザのセキュリティオプションによってブロックされている可能性もありますが、今回の環境ではブラウザセキュリティ側は設定していないブラウザから一時的にオフにして検証もしたため、この可能性はありませんでした。
次に X-Frame-Options レスポンスヘッダーを確認してみます。
ちなみにX-Frame-Optionsは簡単にいうと以下の通りです。
X-Frame-Optionsは、Webサイトが他のサイト内のiframe内に表示されることを制御するHTTPレスポンスヘッダーです。主に「クリックジャッキング」と呼ばれるセキュリティ攻撃から保護するために使用されます。
ヘッダーには以下の値が設定できます。
DENY：ページをフレーム内に表示することを完全に禁止SAMEORIGIN：同じオリジン（ドメイン）からのフレーム内表示のみ許可ALLOW-FROM uri：特定のURIからのフレーム内表示のみ許可（現在は非推奨）
ちなみに、今回埋め込もうとした資料はレスポンスヘッダーを確認すると特にX-Frame-Optionsが設定されていないことがわかります。
curl -I https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/5ecac8cc-50f1-4168-b989-2bcaabffe870/c0444537/20230609_policies_priority_outline_22.pdf
HTTP/2 200
server: CloudFront
content-type: application/pdf
content-length: 1917545
date: Thu, 08 May 2025 09:15:47 GMT
x-content-type-options: nosniff
last-modified: Mon, 27 May 2024 09:36:29 GMT
etag: "1d4269-6196c408475a8"
accept-ranges: bytes
cache-control: max-age=0,no-cache
expires: Fri, 08 May 2026 09:15:47 GMT
vary: Accept-Encoding
x-cache: Hit from cloudfront
via: 1.1 65be7de1eb706a63642aebbd553eb59c.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-P2
x-amz-cf-id: pwFEhl2_LOmHQGdCzp8mjIAyxc-EPwJXbVqUfyG3hG_s5_wgg2yiKA==
age: 2510
また、別の作業の一環で作成したWebサイト（PDF表示あり）をiframeで埋め込んでみたところ、ピンポイントでPDFの箇所のみ表示されないことが確認できました。
これらの情報からConfluenceの動作として、PDFの表示が制限されているように見えます。
Confluence側のセキュリティ設定で変更ができるかなと思い、Confluenceのセキュリティ設定を見てみましたが、以下のように大部分がグレーアウトにされていました。
コミュニティでもディスカッションされているようで、Confluence Cloudのセキュリティは現時点でユーザー側は変更ができないようです。
解決策
裏技チックですがGoogle Drive Viewerを経由することで、PDFを表示することができました。
Google Drive ViewerとはGoogle Drive が持つ PDF Viewer で、クエリパラメータに任意のURLを指定することで、そのURLをGoogle Drive Viewer経由で閲覧する方法があります。
使い方は簡単で、以下のようにGoogle Drive ViewerのURLにPDFのURLを指定するだけです。
https://drive.google.com/viewerng/viewer?embedded=true&url=<任意のURL>
こちらのURLにさきほどのデジタル庁のPDFのURLを指定し、Confluenceのiframeに埋め込むと以下のようにPDFが表示されます。
こちらのGoogle Drive Viewerに埋め込んだ場合のURLを確認してみると、以下のようなレスポンスヘッダーになっており、推測ですがcontent-typeがapplication/pdf -> text/htmlになっているため、HTMLとしてレンダリングされ表示が可能になっている気がします。
curl -I https://drive.google.com/viewerng/viewer\?embedded\=true\&url\=https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/5ecac8cc-50f1-4168-b989-2bcaabffe870/c0444537/20230609_policies_priority_outline_22.pdf
HTTP/2 200
content-type: text/html; charset=utf-8
cache-control: no-cache, no-store, max-age=0, must-revalidate
pragma: no-cache
expires: Mon, 01 Jan 1990 00:00:00 GMT
date: Thu, 08 May 2025 10:46:33 GMT
content-length: 9523
p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
cross-origin-opener-policy-report-only: same-origin; report-to="apps-viewer"
content-security-policy: script-src 'nonce-ihqD99qy0NyL5baYL2X4nQ' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval';object-src 'none';base-uri 'self';report-uri /cspreport
cross-origin-embedder-policy-report-only: require-corp; report-to="apps-viewer"
x-content-type-options: nosniff
x-xss-protection: 1; mode=block
server: GSE
set-cookie: NID=523=HyHC0D8jlrI1b_brbms_mhVJuVQ3B01jvZQyJFDcOqgTwUgouT8dXVddpu1v_XPYHCQw2sALqBs6xwUCz08VHTovRhLKTgdZp3ggbjG7MFy6wik5NpdOh6zc2NGq1yRk_ojCijKUCY7pYC9lJ5Minw7eU4nXGgP7NxeMVzuJSnSB0V2tWbDBtLN4qm6Hh8DD6g; expires=Fri, 07-Nov-2025 10:46:33 GMT; path=/; domain=.google.com; HttpOnly
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
ただ、こちらはAtlassian公式でサポートされている方法ではない、かつGoogle側の機能に依存しているため、Google側の仕様変更により利用できなくなる可能性があるため、あくまでワークアラウンドとしてご利用ください。
また、こちらの方法の場合、 X-Frame-Options が設定されている場合でもレスポンスヘッダーを上書きし表示することができるようになるため、ご自身でセキュリティ上のリスクを理解したうえでご利用ください。
最後に
今回はConfluenceでPDFが表示されない問題とその解決策について紹介しました。
Google Drive Viewerを活用することでワークアラウンド的なアプローチですがPDFを表示することができました。
皆さんのConfluence環境でも同様の問題が発生した際の参考になれば幸いです。
この記事が誰かのお役に立てれば幸いです。
以上、たかやま(@nyan_kotaroo)でした。
