Установка атрибута src iframe из переменной в AngularJS

В AngularJS вы можете столкнуться с проблемами при попытке установить атрибут src iframe из переменная. Чтобы решить эту проблему, вот пошаговое руководство:

1. Внедрите службу $sce

Внедрите службу $sce (строгое контекстное экранирование) в ваш контроллер для обработки очистки.

function AppCtrl($scope, $sce) {
  // ...
}

2. Доверяйте URL-адресу ресурса

Используйте $sce.trustAsResourceUrl в контроллере, чтобы обеспечить безопасность URL-адреса.

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

3. Обновите шаблон

В шаблоне привяжите атрибут ng-src к переменной доверенного URL-адреса.

Пример кода

function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

{{project.name}}

Дополнительные примечания

• Используйте $sce.trustSrc для ненадежных URL-адресов.
• Решение заключается в предотвращении межсайтового взаимодействия Атаки с использованием сценариев (XSS) для обеспечения безопасности URL-адресов.