---
title: "Bearerトークンとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "AI生成サイトやHTML共有の文脈で知っておきたいBearerトークンの仕組みを解説。HTTPヘッダーでの使い方、フロントエンドに含めてはいけない理由、漏えい時のリスクまで理解できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-bearer-token-html-share"
markdown: "https://giga-site.com/articles/what-is-bearer-token-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Bearerトークンとは？HTML共有・AI生成サイトでの意味をやさしく解説

APIを呼び出すリクエストのAuthorizationヘッダーに「Bearer」という文字が付いたトークンを見たことがある方は多いでしょう。BearerトークンはOAuth 2.0で定義されたアクセストークンの渡し方の一種で、フロントエンドHTMLからAPIを叩く実装や、AI生成コードのセキュリティを理解するうえで必要な概念です。

> Source HTML: https://giga-site.com/articles/what-is-bearer-token-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

Bearerトークンとは、HTTPリクエストの「Authorization: Bearer <token>」ヘッダーで送信されるアクセストークンです。RFC 6750で定義された仕様で、このトークンを持っている（Bearer＝持参人）だけでリソースへのアクセス権が得られます。ユーザー名・パスワードなしでAPIを認証できるため、サービス間連携で広く使われています。

「持っているだけでアクセスできる」という特性上、Bearerトークンが盗まれると攻撃者がそのトークンを使って正規ユーザーと同じ操作を実行できます。有効期限（通常1時間〜24時間）が設定されているケースが多いですが、期限が長いほどリスクも高まります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

AIがフロントエンドHTMLにAPI呼び出しのサンプルコードを生成した際、JavaScriptのfetch()にBearerトークンをハードコードするコードが出力されることがあります。このHTMLをそのまま共有すると、ブラウザのDevToolsでソースを見た人が即座にトークンを取得できる状態になります。

ギガサイト便のようなHTMLプレビューサービスでは、閲覧者が認証されているかどうかの確認にBearerトークンが使われます。このトークンはHTTPのCookieまたはLocalStorageに保存され、サービスのAPIリクエストに自動付与されます。通常、エンドユーザーが直接触れることはなく、ブラウザが自動管理します。

## よくある誤解

「Bearerトークン＝APIキー」という混同が多いです。APIキーはサービスへの認証に使う固定の秘密文字列ですが、Bearerトークンは多くの場合OAuthの認証フローで一時的に発行されるアクセストークンです。有効期限が短く、リフレッシュトークンで更新する設計が一般的です。

「BearerトークンはHTTPSなら安全に送れる」は半分正解です。HTTPSで通信内容は暗号化されますが、トークンがHTMLや`localStorage`に平文で保管されていれば、XSS攻撃でブラウザからトークンを盗まれるリスクがあります。Bearerトークンの保管場所と送信経路の両方を安全に保つ必要があります。

## 安全に使うための注意点

AIが生成したJavaScriptコードにAuthorizationヘッダーとBearerトークンが含まれている場合、そのトークン文字列がプレースホルダーか実際の値かを必ず確認してください。「Bearer YOUR_TOKEN_HERE」はサンプルですが、「Bearer eyJhbGci...」のように実際のJWT形式のトークンが入っている場合は即時削除が必要です。

フロントエンドHTMLでBearerトークンを使ったAPI呼び出しを実装する場合は、トークンをlocalStorageではなくHttpOnly Cookieまたはメモリにのみ保持する設計を採用してください。HttpOnly属性が付いたCookieはJavaScriptからアクセスできないため、XSS経由でのトークン窃取リスクを大幅に下げられます。

## よくある質問

### AI生成コードのBearerトークンが本物かどうか、どうやって見分けますか？

プレースホルダーは通常「YOUR_TOKEN」「ACCESS_TOKEN」「<token>」のような形式です。「eyJ」で始まる文字列はBase64エンコードされたJWTで本物の可能性が高く、即時無効化が必要です。jwt.ioでデコードして発行元と有効期限を確認してください。

### Bearerトークンが漏えいした場合、どうすれば被害を最小化できますか？

トークンを発行したサービスの管理画面でそのトークンを即時無効化（revoke）してください。OAuthのリフレッシュトークンも同時に無効化する必要があります。その後、アクセスログを確認して不正利用の形跡を調査し、新しいトークンを発行してください。

### フロントエンドHTMLでBearerトークンを安全に使う方法はありますか？

バックエンド（Cloudflare Workers・Next.js API Routes等）をプロキシとして挟み、Bearerトークンはサーバー側だけが保持する構成が最も安全です。フロントエンドはCookieセッションでバックエンドに認証し、バックエンドが外部APIへBearerトークンを付けてリクエストします。

## 関連記事

- [公開トークンとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-public-token-html-share/index.md)
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Bearerトークンとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "AI生成サイトやHTML共有の文脈で知っておきたいBearerトークンの仕組みを解説。HTTPヘッダーでの使い方、フロントエンドに含めてはいけない理由、漏えい時のリスクまで理解できます。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-bearer-token-html-share",
  "url": "https://giga-site.com/articles/what-is-bearer-token-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "AI生成コードのBearerトークンが本物かどうか、どうやって見分けますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "プレースホルダーは通常「YOUR_TOKEN」「ACCESS_TOKEN」「<token>」のような形式です。「eyJ」で始まる文字列はBase64エンコードされたJWTで本物の可能性が高く、即時無効化が必要です。jwt.ioでデコードして発行元と有効期限を確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "Bearerトークンが漏えいした場合、どうすれば被害を最小化できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "トークンを発行したサービスの管理画面でそのトークンを即時無効化（revoke）してください。OAuthのリフレッシュトークンも同時に無効化する必要があります。その後、アクセスログを確認して不正利用の形跡を調査し、新しいトークンを発行してください。"
      }
    },
    {
      "@type": "Question",
      "name": "フロントエンドHTMLでBearerトークンを安全に使う方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "バックエンド（Cloudflare Workers・Next.js API Routes等）をプロキシとして挟み、Bearerトークンはサーバー側だけが保持する構成が最も安全です。フロントエンドはCookieセッションでバックエンドに認証し、バックエンドが外部APIへBearerトークンを付けてリクエストします。"
      }
    }
  ]
}
```