JavaScript | Web API：クリップボード・共有－読み取り権限

JavaScript

2026.04.12

クリップボードの「読み取り権限」は“ユーザーのプライバシーを守るための最重要ポイント”
Clipboard API の読み取りは「特別扱い」されている
1. navigator.clipboard.readText() は“いつでも自由に”呼べない
基本の読み取り処理：readText を正しく使う
読み取り権限の状態を確認するという考え方（概念だけ理解すればOK）
読み取り権限が拒否されるケースを理解する
テキストエリアに貼り付ける実用的な例
1. 「クリップボード → テキストエリア」の王道パターン
読み取り権限は“敵”ではなく“ユーザーを守る盾”
初心者として「読み取り権限」で本当に掴んでほしいこと

クリップボードの「読み取り権限」は“ユーザーのプライバシーを守るための最重要ポイント”

クリップボードには、ユーザーがコピーした パスワード・住所・クレカ番号・仕事の文章 など、
とてもセンシティブな情報が入っている可能性があります。

もし JavaScript が、ユーザーの許可なしに 勝手にクリップボードを読み取れたら、
悪意あるサイトがコピーした内容を盗み放題になってしまいます。

だからブラウザは、クリップボードの「読み取り」を
非常に厳しく制限しています。

その制限の中心にあるのが 読み取り権限（clipboard-read） です。

Clipboard API の読み取りは「特別扱い」されている

navigator.clipboard.readText() は“いつでも自由に”呼べない

クリップボードの読み取りは、
ブラウザから見ると ユーザーのプライバシーに直結する操作 です。

そのため、次のような条件が揃っていないと動きません。

HTTPS（安全なコンテキスト）であること
ユーザー操作（クリックなど）に紐づいていること
ブラウザが読み取りを許可していること
場合によってはユーザーが権限を許可していること

つまり、JavaScript が勝手に

navigator.clipboard.readText();

navigator.clipboard.readText();

JavaScript

と呼んでも、
ブラウザは「ダメです」と拒否します。

読み取り権限は、
“ユーザーの知らないところでクリップボードを盗み見ないための安全装置”
だと理解してください。

基本の読み取り処理：readText を正しく使う

最小の「貼り付け」ボタンの例

HTML:

<button id="pasteBtn">貼り付け</button>
<div id="result"></div>

JavaScript:

const pasteBtn = document.querySelector("#pasteBtn");
const resultEl = document.querySelector("#result");

pasteBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    resultEl.textContent = "クリップボードの内容: " + text;
  } catch (err) {
    resultEl.textContent = "読み取りに失敗しました: " + err;
  }
});

const pasteBtn = document.querySelector("#pasteBtn");
const resultEl = document.querySelector("#result");

pasteBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    resultEl.textContent = "クリップボードの内容: " + text;
  } catch (err) {
    resultEl.textContent = "読み取りに失敗しました: " + err;
  }
});

JavaScript

ここで重要なのは次の 3 点です。

1. readText は非同期で、await が必須

クリップボードへのアクセスは OS レベルの処理なので、
JavaScript は結果が返るまで待つ必要があります。

2. try…catch が必須

読み取り権限がない、拒否された、HTTPS でないなど、
失敗するケースが非常に多いからです。

3. ユーザー操作に紐づける

クリックやキー操作の中で呼ばないと、
ブラウザが「勝手に読もうとしている」と判断して拒否します。

読み取り権限の状態を確認するという考え方（概念だけ理解すればOK）

ブラウザによっては、
navigator.permissions を使って
読み取り権限の状態を確認できる場合があります。

概念としてはこうです。

const status = await navigator.permissions.query({
  name: "clipboard-read"
});

console.log(status.state); // "granted" / "prompt" / "denied"

const status = await navigator.permissions.query({
  name: "clipboard-read"
});

console.log(status.state); // "granted" / "prompt" / "denied"

JavaScript

ただし、これはブラウザ差が大きく、
初心者のうちは「そういう仕組みもある」程度で十分です。

実際には、

readText を呼ぶ
失敗したら catch で対応する

というシンプルなパターンで問題ありません。

読み取り権限が拒否されるケースを理解する

HTTPS でない場合

http://example.com のようなサイトでは、
読み取りはほぼ確実に拒否されます。

ローカル開発の http://localhost は例外で許可されます。

ユーザー操作がない場合

ページ読み込み直後に readText を呼ぶと、
ブラウザは「勝手に読もうとしている」と判断して拒否します。

ブラウザの設定で禁止されている場合

企業ネットワークやセキュリティソフトが
クリップボード読み取りをブロックすることもあります。

ユーザーが権限を拒否した場合

ブラウザが「このサイトにクリップボードの読み取りを許可しますか？」
と聞いてくる場合があり、拒否されると readText は失敗します。

テキストエリアに貼り付ける実用的な例

「クリップボード → テキストエリア」の王道パターン

HTML:

<textarea id="memo" rows="4" cols="40"></textarea>
<button id="pasteBtn">クリップボードから貼り付け</button>
<div id="status"></div>

JavaScript:

const memo = document.querySelector("#memo");
const pasteBtn = document.querySelector("#pasteBtn");
const status = document.querySelector("#status");

pasteBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    memo.value = text;
    status.textContent = "貼り付けました";
  } catch (err) {
    status.textContent = "読み取りに失敗しました: " + err;
  }
});

const memo = document.querySelector("#memo");
const pasteBtn = document.querySelector("#pasteBtn");
const status = document.querySelector("#status");

pasteBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    memo.value = text;
    status.textContent = "貼り付けました";
  } catch (err) {
    status.textContent = "読み取りに失敗しました: " + err;
  }
});