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

https://securityheaders.com

注意点

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 のドキュメントにも記載があります。

https://learn.microsoft.com/ja-jp/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad?WT.mc_id=M365-MVP-5002941

ログイン ページで Cross-Origin-Opener-Policy 応答ヘッダーに same-origin 値または same-origin-allow-popups 値を使用しないことをお勧めします。これは、親ウィンドウへの接続が中断され、認証 API 呼び出しが CancelledByUser エラーで途中で返されるためです。

オリジンの検証のための JSON ファイルが読み込まれる

Teams JavaScript クライアント ライブラリ (TeamsJS) の app.initialize() では validDomains.json というファイルを自動的に読み込みます。このファイルは CDN で公開されており、URL は以下の通りです。

https://github.com/OfficeDev/microsoft-teams-library-js/blob/edef8cca0426d71e16ef53478ebca06efff58242/packages/teams-js/src/internal/constants.ts#L138-L140

したがって 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