【初心者向け】WebUSB APIの許可設定を徹底解説！「Feature-Policy: usb」でセキュリティアップ
Feature-Policy: usb は、HTTP ヘッダーで指定される特別な指令であり、Web ページが WebUSB API を利用できるかどうかを制御します。WebUSB API は、Web サイトが USB デバイスと直接やり取りすることを可能にする機能です。
構文
Feature-Policy: usb = <許可リスト>; <許可リスト> = [origin1 | origin2 | ...]
- 省略した場合: デフォルトでは、WebUSB API の利用は許可されません。
例
Feature-Policy: usb = https://example.com https://*.google.com
この例では、https://example.com と google.com ドメインのすべてのサブドメイン (例: docs.google.com, mail.google.com) が、WebUSB API を利用できます。
動作
- オリジンが許可リストに含まれていない場合、Web ページは WebUSB API を利用できず、エラーが発生します。
- オリジンが許可リストに含まれている場合、Web ページは WebUSB API を利用できます。
- ブラウザは、
Feature-Policy: usbヘッダーを解釈し、許可リストに含まれるオリジンかどうかを確認します。
Permissions-Policyヘッダーは、Web サイトがどの機能を利用できるかを制御するために使用されます。Feature-Policy: usbは、Permissions-Policyヘッダーの一部です。
利点
- プライバシーを保護できます。WebUSB API は、ユーザーのデバイスに関する情報を取得するために使用できます。
Feature-Policy: usbを使用して、Web ページがユーザーの同意なしに WebUSB API を利用できないようにすることで、ユーザーのプライバシーを保護できます。 - セキュリティを強化できます。WebUSB API は強力な機能であり、悪意のある Web サイトがユーザーのシステムを制御するために悪用される可能性があります。
Feature-Policy: usbを使用して、信頼できるオリジンのみが WebUSB API を利用できるようにすることで、このリスクを軽減できます。
- WebUSB API は、複雑な API であるため、開発には注意が必要です。
Feature-Policy: usbは比較的新しい機能であり、すべてのブラウザで完全にサポートされているわけではありません。
許可リストにオリジンを追加する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebUSB API デモ</title>
</head>
<body>
<script>
if (navigator.permissions && navigator.permissions.request) {
navigator.permissions.request({ usb: { origins: ['https://example.com'] } })
.then(permission => {
if (permission.state === 'granted') {
console.log('WebUSB API の利用が許可されました。');
// WebUSB API を利用するコードを記述
} else {
console.log('WebUSB API の利用が許可されませんでした。');
}
})
.catch(error => {
console.error('エラーが発生しました:', error);
});
} else {
console.error('WebUSB API はサポートされていません。');
}
</script>
</body>
</html>
Permissions-Policy ヘッダーに Feature-Policy: usb を追加する
Header always set Permissions-Policy "geolocation=(), midi=(), sync-xhr=(), camera=(), microphone=(), usb=()"
この例では、https://example.com オリジンのみが WebUSB API を利用できます。
// app.js (Node.js)
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Permissions-Policy', 'geolocation=(), midi=(), sync-xhr=(), camera=(), microphone=(), usb=https://example.com');
next();
});
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
- WebUSB API は、複雑な API であるため、開発には注意が必要です。
Feature-Policy: usbは比較的新しい機能であり、すべてのブラウザで完全にサポートされているわけではありません。- 上記のコードはあくまで例であり、実際の状況に合わせて調整する必要があります。
Content Security Policy (CSP) を使用する
CSP ヘッダーを使用して、許可されたオリジンからのみスクリプトの実行を許可することで、WebUSB API の利用を間接的に制御できます。ただし、CSP は WebUSB API 専用の制御機能ではないため、完全に代替するものではありません。
Content-Security-Policy: script-src 'self' https://example.com
この例では、https://example.com オリジンからのスクリプトのみが実行許可されます。
ブラウザ拡張機能を使用する
WebUSB API の利用を制御するブラウザ拡張機能がいくつか開発されています。これらの拡張機能は、ユーザーが個別に設定を行う必要があり、すべてのブラウザで利用できるわけではないという点に注意が必要です。
例：
サーバー側で対策する
WebUSB API を利用する機能を、特定のユーザーや条件に限定することで、不正利用を防止することができます。具体的には、以下のような方法が考えられます。
- 役割ベースのアクセス制御 (RBAC)：ユーザーの役割に応じて、WebUSB API の利用権限を付与する
- アクセス制御リスト (ACL)：許可されたユーザーまたはデバイスのみが WebUSB API にアクセスできるようにする
- ユーザー認証：認証済みのユーザーのみが WebUSB API を利用できるようにする
教育と啓蒙
WebUSB API のリスクについてユーザーに理解してもらい、適切な使用方法を指導することも重要です。