Teams アプリを安全にするために HTTP セキュリティ ヘッダーを設定する
はじめに
先日もちょっと大きめの情報漏洩の事故がありましたが、HTTP セキュリティ ヘッダーを指定すれば防げた可能性が指摘されています。実際どうだったかはわかりませんが、やっておいて損はないので、カスタムで作成している Teams アプリにも HTTP セキュリティ ヘッダーを設定してみます。
設定する項目については https://securityheaders.com が参考になります。
- Missing Headers
- Strict-Transport-Security
- Content-Security-Policy
- X-Frame-Options
- X-Content-Type-Options
- Referrer-Policy
- Permissions-Policy
- Upcoming Headers
- Cross-Origin-Embedder-Policy
- Cross-Origin-Opener-Policy
- Cross-Origin-Resource-Policy
注意点
Teams アプリならではの注意点について説明します。
Teams アプリは iframe を使って表示される
タブを表示する Teams アプリでは、コンテンツは iframe を使って表示されます。そのため、X-Frame-Options に SAMEORIGIN は使用できません。代わりに Content-Security-Policy の frame-ancestors に親サイトのドメインを追加する必要があります。
Teams アプリの認証はポップアップで呼び出される
Teams アプリでは追加のアクセス許可を取得する際、同意のダイアログを表示できます。このとき Cross-Origin-Opener-Policy に same-origin や same-origin-allow-popups を指定すると動作しなくなります。これは Microsoft のドキュメントにも記載されています。
ログイン ページで Cross-Origin-Opener-Policy 応答ヘッダーに same-origin 値または same-origin-allow-popups 値を使用しないことをお勧めします。これは、親ウィンドウへの接続が中断され、認証 API 呼び出しが CancelledByUser エラーで途中で返されるためです。
オリジンの検証のための JSON ファイルが読み込まれる
Teams JavaScript クライアント ライブラリ (TeamsJS) の app.initialize() では validDomains.json というファイルを自動的に読み込みます。このファイルは CDN で公開されており、URL は以下の通りです。
そのため、Content-Security-Policy の connect-src にこのドメインを追加する必要があります。
おわりに
まとめると、最低限以下のような設定になります。これ以外にもアプリの挙動によっては設定が変わるため、あくまで参考としてください。
Content-Security-Policy: connect-src 'self' res.cdn.office.net; frame-ancestors 'self' teams.microsoft.com
Permissions-Policy: camera=(), fullscreen=(), geolocation=(), microphone=()
Referrer-Policy: same-origin
Strict-Transport-Security: max-age=2592000
X-Content-Type-Options: nosniff
Discussion