Clipboard APIについて
はじめに
12月1日から25日まで、毎日1記事ずつ公開していくアドベントカレンダー企画です。
この連載では、Web標準とDDDについて学びを深めていきます。
第９回は「Clipboard API」がテーマです。
Clipboard APIとは何か、実際どのように実装するのかを学んでいきます。
Clipboard APIとは
Clipboard API はクリップボードの切り取り、コピー、貼り付けをする機能を提供しています。
保護されたコンテキストで、セキュリティに関する考慮の条件が成立する時に利用可能です。
この仕様では、クリップボードから読み取るために、ユーザーが直近でこのページを操作したことが要求されます(User activation)。また、読み取り処理がブラウザやOSとのインタラクションの結果によって、発生したことも要求されます。
実際は、ブラウザはこれらの条件を満たさなくても読み取り処理を許可する一方で、他の要求 (権限や、処理のたびに確認するなど) をするなどがあります。
現在のブラウザの実装は仕様から乖離しており、その概要は先程のセキュリティに関する考慮に記載されています。Chromium系では読み取りが許可されておらず、read権限を要求します。
ユーザーが許可するなど、権限が許可された場合には読み取りに成功します。
下記はChromeでnavigator.clipboard.readText()を実行した時に権限を要求されたものです。
Clipboard APIの実装例
動作の流れ
- copyテキストの下部にあるinputに入力
- copyボタンを押下するとinputに入力した内容をclipboardにcopy
- paestボタンを押下するとclipboardにcopyした内容をpeastテキストの下部にあるinputに反映
clipboardにはコピーされているので
cmd + Vなどの貼付け操作でも可能
コード
<html>
<body>
<p>copy</p>
<input id="copyInput" type="text">
<button id="copyBtn">copy</button>
<br/>
<p>paste</p>
<input id="pasteInput" type="text">
<button id="pasteBtn">paste</button>
</body>
</html>
<script>
document.getElementById('copyBtn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(document.getElementById('copyInput').value);
} catch (err) {
console.error('Failed to copy text: ', err);
}
});
document.getElementById('pasteBtn').addEventListener('click', async () => {
try {
const text = await navigator.clipboard.readText();
document.getElementById('pasteInput').value = text;
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
}
});
</script>まとめ
今回はClipboard APIを紹介しました。
仕様を読み、clipboardにセキュリティの観点が必要なことを初めて知りました。
コピーした内容に不正にアクセスされる場合があることを考えると危険ですね。