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'un 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.

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

2. Faites confiance à l'URL de la ressource

Utilisez $sce.trustAsResourceUrl dans le contrôleur pour vous assurer que l'URL est sécurisée.

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

3. Mettez à jour le modèle

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

Exemple de 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}}

Notes supplémentaires

• Utilisez $sce.trustSrc pour les URL non fiables.
• La solution s'articule autour de la prévention des erreurs intersites. Attaques de script (XSS) en garantissant la sécurité des URL.