Динамическая установка атрибута src iframe в AngularJS

При работе с iframe в AngularJS часто необходимо динамически устанавливать атрибут src на основе переменная. Однако попытка сделать это с помощью стандартного присваивания может привести к отображению пустого атрибута src в iframe.

Понимание проблемы и решения

Проблема возникает при попытке чтобы установить атрибут src с ненадежным URL-адресом. AngularJS реализует меры безопасности для предотвращения потенциальных атак XSS (межсайтовый скриптинг). Чтобы смягчить это, необходимо использовать службу $sce (строгое контекстное экранирование) для «доверия» URL-адресу перед его назначением.

Метод TrustAsResourceUrl() службы $sce можно использовать для явной маркировки URL-адреса. URL-адрес является доверенным, что гарантирует его безопасное использование в шаблоне AngularJS.

Реализация кода

В предоставленный файл контроллеров/app.js добавьте $sce service в AppCtrl и измените функцию setProject() следующим образом:

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

В шаблоне HTML обновите атрибут src iframe, чтобы он ссылался на переменную currentProjectUrl:

Объяснение

При вызове TrustAsResourceUrl() URL-адрес помечается как доверенный и его можно безопасно использовать в шаблоне AngularJS. Директива ng-src затем установит атрибут src iframe с доверенным URL-адресом.

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

• Метод TrustAsResourceUrl() следует использовать только в том случае, если URL-адрес известен как безопасный и надежный.
• Если URL-адрес не полностью определен (например, отсутствует схема или имя хоста), AngularJS может выдать предупреждение безопасности.
• Для решения проблем безопасности , всегда рекомендуется реализовать соответствующую проверку и очистку на стороне сервера, прежде чем принимать URL-адреса, предоставленные пользователем.