この記事の要点

<object> は外部リソース（PDF / SVG / 動画 / Flash / 外部 HTML）を埋め込む汎用要素 基本: <object data="file.pdf" type="application/pdf">。中身はフォールバック 昔は <param> で Flash パラメータを渡す用途が主流だったが、Flash 廃止で出番激減 現代の選択肢: PDF → <embed> / <iframe>、画像 → <picture>、動画 → <video> セキュリティ: Same-Origin Policy と CSP frame-ancestors / object-src

<object> 要素とは

<object> は HTML で「外部リソース」を埋め込むための汎用要素です。PDF / SVG / 画像 / 動画 / 別 HTML / Flash（歴史的）など、多様なメディアを 1 つのタグで扱えるように設計されました。現代では用途別に専用要素（<video> / <audio> / <picture> / <iframe>）が出揃ったため出番は減っていますが、PDF / SVG 埋め込みでは今も使われます。

基本構文

<object data="document.pdf" type="application/pdf" width="600" height="400">
    <!-- フォールバック（object が表示できないとき） -->
    <p>PDF を表示できません。
       <a href="document.pdf">こちらからダウンロード</a>してください。</p>
</object>

属性	意味
data	埋め込むリソースの URL（必須に近い）
type	MIME タイプ。指定すると読み込み前判定に使われる
width / height	表示サイズ。CSS でも可
name	フォーム送信時の名前（ほぼ使わない）
form	所属フォーム ID
usemap	画像マップ参照

主な用途別の書き方

PDF 埋め込み

<object data="report.pdf#page=2&zoom=100"
        type="application/pdf" width="100%" height="600">
    <p>PDF が表示できません。
       <a href="report.pdf">ダウンロード</a></p>
</object>

<!-- ブラウザ依存。Chrome / Edge / Firefox は内蔵ビューアで表示、
     Safari は表示するがコントロールが少ない -->

SVG 埋め込み（外部ファイル）

動画埋め込み（歴史的）

外部 HTML 埋め込み

Flash（歴史的・現在は動作しない）

<!-- 2020 年末で Adobe Flash Player サポート終了 -->
<object data="game.swf" type="application/x-shockwave-flash" width="800" height="600">
    <param name="movie" value="game.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <p>Flash 廃止。動作しません</p>
</object>

<param> 要素

<object> 内でプラグインに渡すパラメータを指定。Flash 時代の遺物で、現代の用途ではほぼ不要です:

<object data="movie.swf" type="application/x-shockwave-flash">
    <param name="movie" value="movie.swf">      <!-- 旧 IE 用 -->
    <param name="allowFullScreen" value="true">
    <param name="wmode" value="transparent">
    <param name="FlashVars" value="autostart=true&volume=80">
</object>

<object> / <embed> / <iframe> / <picture> の違い

要素	得意	フォールバック	現代度
<object>	汎用、PDF / SVG	子要素として書ける	★★
<embed>	PDF / プラグイン	無し	★★（PDF で広く使う）
<iframe>	HTML 埋め込み、YouTube	無し（src 内へ）	★★★ 標準
<img>	静的画像	alt のみ	★★★ 標準
<picture>	解像度別画像、WebP/AVIF	<img> に fallback	★★★ 標準
<video> / <audio>	動画 / 音声	子要素	★★★ 標準

レスポンシブ対応

/* aspect-ratio で縦横比固定 */
object.pdf-viewer {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 1px solid #ccc;
}

/* 古典的パディングハック */
.embed-wrapper {
    position: relative;
    padding-top: 56.25%;        /* 16:9 */
}
.embed-wrapper > object,
.embed-wrapper > iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

セキュリティ上の注意

Same-Origin Policy

埋め込み元と data の URL が同一オリジンでないと、JavaScript からの操作（contentDocument 等）はブロックされます。

CSP (Content Security Policy)

# 何を object/embed/applet で読み込ませるかを制限
Content-Security-Policy: object-src 'self' https://cdn.example.com;

# iframe で埋め込まれることを制限
Content-Security-Policy: frame-ancestors 'self';

X-Frame-Options（古い、frame-ancestors 推奨）

X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY

SVG ファイルの XSS

SVG はJavaScript を含めることができるため、ユーザ投稿 SVG をそのまま object で読み込むと XSS の温床になります。サニタイズが必須:

• サーバ側で SVG Sanitizer（PHP: enshrined/svg-sanitize）を通す
• ユーザ投稿はラスタライズ（PNG 化）して保存
• <img> で読み込むと JS は実行されない（こちらが安全）

JavaScript からの操作

// オブジェクトの中身 (同一オリジンのみ)
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
    const doc = obj.contentDocument;
    // doc.querySelector('h1').textContent
});

// 表示切替
obj.data = 'other.pdf';

// width 変更
obj.style.width = '800px';

アクセシビリティ

• フォールバックテキストを必ず提供（読み上げソフト対策）
• PDF 埋め込みのときは「ダウンロード」リンクを必ず別途置く
• 装飾用 SVG は aria-hidden="true" を付与
• 意味のある SVG には role="img" + aria-label

FAQ

Q: PDF 埋め込みなら object と embed どちらが良い？
A: 実用ではembed の方が広く使われることが多いです。Chrome / Edge の挙動が安定。古い IE 互換が必要なら object。両方を組み合わせる手法もあります。

Q: モバイルで PDF が表示されない
A: iOS Safari は <object> 内 PDF を新規タブで開く挙動。「ダウンロード」リンク + サムネ画像を提示するのが UX 的に確実です。

Q: SVG は object と img どちらが良い？
A: JS を動かしたいなら object（インタラクティブな図表）、単なるロゴ・アイコンなら img（軽量で安全）、CSS で色を変えたいならインライン <svg> 展開。

Q: 外部サイトの HTML を埋め込みたい
A: <iframe> を使ってください。<object> でも可能ですが、現代のセキュリティ機能（sandbox / CSP）は iframe に最適化されています。

Q: Flash の代替は？
A: 用途別に Canvas / WebGL / Web Animations / CSS Animations / Lottie / WebAssembly 等。古い Flash コンテンツの再生には Ruffle（オープンソース Flash エミュレータ）。