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

在AngularJS 中從變數設定iframe src 屬性

在AngularJS 中，嘗試從以下位置設定iframe 的src 屬性時可能會遇到問題一個變數。為了解決這個問題，這裡有一個逐步指南：

1。注入 $sce 服務

將 $sce（嚴格上下文轉義）服務注入控制器以處理清理。

<code class="js">function AppCtrl($scope, $sce) {
  // ...
}</code>

2.信任資源 URL

在控制器內使用 $sce.trustAsResourceUrl 以確保 URL 安全。

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

3.更新範本

在範本中，將 ng-src 屬性綁定到受信任的 URL 變數。

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

範例程式碼

<code class="js">function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

<code class="html"><ul ng-repeat="project in projects">
  <li ng-click="setProject(project.id)">{{project.name}}</li>
</ul>

<iframe ng-src="{{currentProjectUrl}}">
  Something wrong...
</iframe></code>

附加說明

• 附加說明

附加說明對信任的URL 使用$sce.trustSrc。 解決方案圍繞著防止跨站腳本 (XSS) ) 透過確保 URL 安全性來進行攻擊。

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