開發Microsoft Teams選項卡應用安全注意事項
- 2021 年 2 月 18 日
- 筆記
我們都知道，為了方便廣大的開發人員快速開發Microsoft Teams選項卡應用，微軟提供了一個JS SDK，你可以通過這裡 //docs.microsoft.com/en-us/javascript/api/overview/msteams-client?view=msteams-client-js-latest#:~:text=Microsoft%20Teams%20JavaScript%20client%20SDK%201%20Finding%20the,can%20use%20import%20syntax%20to%20import%20specific%20modules. 了解更多詳情。
在這個SDK中，我們經常會用Context對象去獲取當前的上下文資訊，例如用戶資訊啦，所在的團隊或頻道資訊等等。
//docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest
但是這裡其實有一個潛在的安全問題：如果這個網頁不是在Teams中運行，而是被別有用心的人員在外部套了一個iframe，並且模擬了一個類似的Context對象的話，有可能進行安全方面的攻擊。
那麼，如果設計一個更加安全的機制，不允許我們的網頁被其他系統隨意地用iframe嵌入，只允許在Teams中進行嵌入呢？
可以通過X-Frame-options這個伺服器選項來控制。請參考 //developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
但這個選項目前要麼設置允許所有域訪問，要麼設置所有域都不能訪問。
第三個選項現在是不推薦使用的，取而代之的是一個新的HTTP Header，叫做CSP， Content-Security-Policy
你需要將如下幾個域名加入進去
teams.microsoft.com
*.teams.microsoft.com
*.skype.com *.sharepoint.com
outlook.office.com
and the current host
如果你是用nodejs來開發，現在也有一個簡單的做法來實現這樣的需求
//www.npmjs.com/package/express-msteams-host
在具體的程式碼中，還可以很容易地檢測當前是不是在Teams中運行，如下範例程式碼
