[Sharepoint] Use webpart to embed other website pages

 Sharepoint   Webpart   Embedded webpage   iframe

▌Introduction

---

簡單介紹如何使用Sharepoint來內嵌其他網站的內容~

▌Environment

---

▋Sharepoint 2013

▌Implement

---

▋新增應用程式

▋選擇應用程式類型

您可以選擇如下圖預設的應用程式類型(只截圖部分)，因我們目標在於內嵌其他網站內容，這邊我選擇「文件庫」作為示範。

▋輸入名稱

▋Results

選擇右上角【工具icon】→【編輯頁面】

▋移除預設網頁組件

選擇預設Webpart右上方的【下箭頭】→【刪除】

▋移除預設網頁組件

再次選擇【工具icon】→【編輯頁面】

▋新增Webpart

加入【媒體及內容】→【網頁檢視器】

加入其他網站(網頁)的URL。

完成之後，可直接點選左上角的【停止編輯】關閉設計頁面。

▋外部網站無法被iframe內嵌

如果內嵌的網站有設定Http response header : X-Frame-Options

則Sharepoing Webpart則不會顯示外部網站內容，並會出現如下錯誤訊息…

Refused to display 'http://xxxxxxxx' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

解決方式：

▋移除此Http response header

▋設定可允許內嵌之URL

▋同源(Same origin)

請參考 MDN : X-Frame-Options

▋SSO (Single Sign On)

如果內嵌的網站也是Windows帳號認證，這時候請開啟內嵌網站的「Windows驗證」，即可達到SSO的目的。