Comment définir l'attribut iframe src à partir d'une variable en toute sécurité dans AngularJS ?

Définition de l'attribut iframe src à partir d'une variable dans AngularJS

Dans AngularJS, vous pouvez rencontrer des problèmes lorsque vous tentez de définir l'attribut src d'une iframe à partir de une variable. Pour résoudre ce problème, voici un guide étape par étape :

1. Injectez le service $sce

Injectez le service $sce (Strict Contextual Escaping) dans votre contrôleur pour gérer la désinfection.

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

2. Faites confiance à l'URL de la ressource

Utilisez $sce.trustAsResourceUrl dans le contrôleur pour vous assurer que l'URL est sûre.

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

3. Mettez à jour le modèle

Dans le modèle, liez l'attribut ng-src à la variable d'URL de confiance.

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

Exemple de code

<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>

Remarques supplémentaires

• Utilisez $sce.trustSrc pour les URL non fiables.
• La solution consiste à empêcher les scripts intersites (XSS ) attaques en garantissant la sécurité des URL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!