Wie kann ich das iframe-src-Attribut einer Variablen in AngularJS sicher festlegen?

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. Injizieren Sie den $sce-Dienst

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

<code class="js">function AppCtrl($scope, $sce) {
  // ...
}</code>

2. Vertrauen Sie der Ressourcen-URL

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

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

3. Aktualisieren Sie die Vorlage

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

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

Beispielcode

<code class="js">function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

<code class="html"><ul ng-repeat="project in projects">
  <li ng-click="setProject(project.id)">{{project.name}}</li>
</ul>

<iframe ng-src="{{currentProjectUrl}}">
  Something wrong...
</iframe></code>

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 (XSS). )-Angriffe, indem sichergestellt wird, dass URLs sicher sind.

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