如何在 AngularJS 中安全地動態設定 iframe 的 src 屬性？

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

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

了解問題和解決方案

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

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

程式碼實作

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

<code class="javascript">$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}</code>

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

<code class="html"><iframe ng-src="{{currentProjectUrl}}"></iframe></code>

附加說明

trustAsResourceUrl() 方法僅應在以下情況下使用該 URL 已知是安全且可信的。

如果 URL 不完全限定（例如，缺少方案或主機名稱），AngularJS 可能會拋出安全警告。

• 為了解決安全問題，始終建議在接受使用者提供的 URL 之前實施適當的伺服器端驗證和清理。

以上是如何在 AngularJS 中安全地動態設定 iframe 的 src 屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！