Dynamisches Festlegen des src-Attributs von iframes in AngularJS

Bei der Arbeit mit iframes in AngularJS ist es oft notwendig, das src-Attribut dynamisch basierend auf a festzulegen Variable. Der Versuch, dies mit der Standardzuweisung zu tun, kann jedoch dazu führen, dass im Iframe ein leeres src-Attribut gerendert wird.

Das Problem und die Lösung verstehen

Das Problem tritt beim Versuch auf um das src-Attribut mit einer nicht vertrauenswürdigen URL festzulegen. AngularJS implementiert Sicherheitsmaßnahmen, um potenzielle XSS-Angriffe (Cross-Site-Scripting) zu verhindern. Um dies zu mildern, muss der Dienst $sce (Strict Contextual Escaping) eingesetzt werden, um der URL zu „vertrauen“, bevor sie zugewiesen wird.

Die Methode „trustAsResourceUrl()“ des Dienstes $sce kann verwendet werden, um eine explizit zu markieren URL als vertrauenswürdig, um sicherzustellen, dass sie sicher in einer AngularJS-Vorlage verwendet werden kann.

Code-Implementierung

Fügen Sie in der bereitgestellten Datei „controllers/app.js“ die Datei „$sce“ ein Dienst in die AppCtrl und ändern Sie die Funktion setProject() wie folgt:

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

Aktualisieren Sie in der HTML-Vorlage das src-Attribut des iframes, um auf die Variable currentProjectUrl zu verweisen:

Erläuterung

Durch den Aufruf von trustAsResourceUrl() wird die URL als vertrauenswürdig markiert und kann sicher in der AngularJS-Vorlage verwendet werden. Die ng-src-Direktive setzt dann das src-Attribut des Iframes mit der vertrauenswürdigen URL.

Zusätzliche Hinweise

• Die Methode „trustAsResourceUrl()“ sollte nur verwendet werden, wenn Die URL gilt als sicher und vertrauenswürdig.
• Wenn die URL nicht vollständig qualifiziert ist (z. B. wenn das Schema oder der Hostname fehlt), gibt AngularJS möglicherweise eine Sicherheitswarnung aus.
• Um Sicherheitsbedenken auszuräumen , ist es immer ratsam, eine entsprechende serverseitige Validierung und Bereinigung zu implementieren, bevor vom Benutzer bereitgestellte URLs akzeptiert werden.