Festlegen des iframe-src-Attributs aus einer Variablen in AngularJS

In AngularJS können Probleme auftreten, wenn Sie versuchen, das src-Attribut eines iframes festzulegen eine Variable. Um dieses Problem zu beheben, finden Sie hier eine Schritt-für-Schritt-Anleitung:

1. Fügen Sie den $sce-Dienst ein.

Fügen Sie den $sce-Dienst (Strict Contextual Escaping) in Ihren Controller ein, um die Bereinigung durchzuführen.

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

2. Vertrauen Sie der Ressourcen-URL

Verwenden Sie $sce.trustAsResourceUrl innerhalb des Controllers, um sicherzustellen, dass die URL sicher ist.

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

3. Aktualisieren Sie die Vorlage

Binden Sie in der Vorlage das ng-src-Attribut an die vertrauenswürdige URL-Variable.

Beispiel Code

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

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

{{project.name}}

Zusätzliche Hinweise

• Verwenden Sie $sce.trustSrc für nicht vertrauenswürdige URLs.
• Die Lösung dreht sich um die Verhinderung von Cross-Site Scripting-Angriffe (XSS) durch Gewährleistung der Sicherheit von URLs.