在 AngularJS 中動態設定 iframe 的 src 屬性

在 AngularJS 中使用 iframe 時，通常需要根據多變的。但是，嘗試使用標準分配來執行此操作可能會導致 iframe 中呈現空 src 屬性。

了解問題和解決方案

嘗試時會出現問題使用不受信任的 URL 設定 src 屬性。 AngularJS 實施安全措施來防止潛在的 XSS（跨站腳本）攻擊。為了緩解這種情況，需要在指派 URL 之前使用 $sce（嚴格上下文轉義）服務來「信任」該 URL。

$sce 服務的 trustAsResourceUrl() 方法可用於明確標記URL作為可信任的，確保它可以在AngularJS模板中安全使用。

程式碼實作

在提供的controllers/app.js檔案中，注入$sce服務進入AppCtrl並修改setProject()函數如下：

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}

在HTML 範本中，更新iframe 的src 屬性以引用currentProjectUrl 變數：

說明

透過呼叫trustAsResourceUrl()，URL 被標記為可信，可以在AngularJS 範本中安全地使用。然後 ng-src 指令將使用受信任的 URL 設定 iframe 的 src 屬性。

附加說明

• trustAsResourceUrl() 方法僅應在以下情況下使用該 URL 已知是安全且可信的。
• 如果 URL 不完全限定（例如，缺少方案或主機名稱），AngularJS 可能會拋出安全警告。
• 解決安全問題，始終建議在接受使用者提供的 URL 之前實施適當的伺服器端驗證和清理。