Wie kann ich das src-Attribut des Iframes in AngularJS dynamisch und sicher festlegen?

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.

Problem und 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“ den $sce ein Dienst in die AppCtrl ein und ändern Sie die Funktion setProject() wie folgt:

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

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

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

Erklärung

Durch den Aufruf von trustAsResourceUrl() wird die URL als vertrauenswürdig markiert und kann sicher im AngularJS-Template 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 durchzuführen, bevor vom Benutzer bereitgestellte URLs akzeptiert werden.

Das obige ist der detaillierte Inhalt vonWie kann ich das src-Attribut des Iframes in AngularJS dynamisch und sicher festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!