共用方式為


開始使用 ASP.NET 網頁表單

網頁表單模型以及如何建立頁面和使用控制項。

為什麼我頁面中的外部資源在 Web Live 預覽中被封鎖?

如果您的頁面中包含任何來自第三方網域的外部資源,您可能會注意到,Web Live Preview 中的設計工具已阻止這些資源載入,並顯示如下通知:

資源被封鎖吐司

你可能會好奇為什麼資源會被阻擋在設計師裡載入,還有為什麼吐司會顯示出來。 本文說明資源被封鎖的原因。

Web Live Preview (WLP)是建立在 BrowserLink 之上的 Visual Studio 擴充套件。 WLP 使用 BrowserLink 提供 Visual Studio 與設計師之間的雙向通訊通道。 這種雙向通訊使 WLP 能提供多項功能:

  • 將設計器中的內容和目前選擇的節點與編輯器中的對應內容和節點同步。
  • 將設計師創作的新內容推送到編輯器。
  • 執行動作面板指令。

如果你將任何第三方的腳本或資源嵌入到網頁中,這可能會引發潛在的安全漏洞,因為這樣可能使用 WLP 和 BrowserLink 來進行跨站腳本攻擊(XSS)。

如果第三方資源可以將惡意程式碼注入到網站中,該程式碼可能會利用注入到設計師中的瀏覽器連結腳本來回呼 Visual Studio。 注入的腳本可能允許程式碼在 Visual Studio 開啟的檔案中寫入任意內容,或開啟其他攻擊途徑。

目前,沒有好方法能阻止攻擊者透過 BrowserLink 腳本與 Visual Studio 通訊。

安全漏洞緩解

我們盡可能限制並減輕透過 BrowserLink 腳本回傳 Visual Studio 通訊時的安全漏洞。 然而,某些攻擊仍可透過 XSS 攻擊實現。

為降低此類 XSS 攻擊的可能性,WLP 預設會阻擋所有外部資源的載入。 如果有任何外部資源被阻擋,WLP 會在設計器右上角顯示以下吐司:

資源被封鎖通知

(在此範例中,我們使用以下 SVG,這是範例網頁應用程式中使用的外部資源: https://visualstudio.microsoft.com/wp-content/uploads/2021/10/Product-Icon.svg

如果打開 Microsoft Edge DevTools 視窗,你可能會注意到以下訊息,說明為何外部資源無法載入:

封鎖資源訊息 DevTools

在設計工具的通知中,如果你選擇「按這裡」連結,會跳出以下對話框,並自動將被封鎖資源的網域加入對話框的清單中:

允許網域

來自外部網域的資源儲存在對話框的清單中時,預設不會在 WLP 中被阻擋,且會正常載入。 點擊 確定後,設計器會重新載入頁面,並載入先前被封鎖且已加入對話框的網域資源。 確保只允許你驗證過的外部網域,且可信且安全。

點擊訊息框中的「Web Live Preview - 外部網域」連結會開啟相同的對話框,但不會將被封鎖資源的任何網域加入該對話框:

允許域名而不需新增

你也可以透過 Tools -> Options -> Web Live Preview -> Allowed external domains during design 設定進入對話。 對話框設定是依照已安裝的 Visual Studio 實例來設定的。

工具 選項 被封鎖的資源

警告

允許網域預設不被封鎖,可能會讓你暴露在上述 XSS 攻擊之下。 同樣地,我們強烈建議只允許你驗證可信且安全的外部網域。