Définition dynamique de l'attribut src d'iframe dans AngularJS

Lorsque vous travaillez avec des iframes dans AngularJS, il est souvent nécessaire de définir l'attribut src de manière dynamique en fonction d'un variable. Cependant, tenter de le faire avec une affectation standard peut entraîner le rendu d'un attribut src vide dans l'iframe.

Comprendre le problème et la solution

Le problème survient lorsque vous essayez pour définir l'attribut src avec une URL non fiable. AngularJS met en œuvre des mesures de sécurité pour empêcher les attaques potentielles XSS (cross-site scripting). Pour atténuer ce problème, le service $sce (Strict Contextual Escaping) doit être utilisé pour « faire confiance » à l'URL avant de l'attribuer.

La méthode trustAsResourceUrl() du service $sce peut être utilisée pour marquer explicitement un URL comme étant fiable, garantissant qu'elle peut être utilisée en toute sécurité dans un modèle AngularJS. service dans AppCtrl et modifiez la fonction setProject() comme suit :

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

Dans le modèle HTML, mettez à jour l'attribut src de l'iframe pour référencer la variable currentProjectUrl :

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

Explication

Notes supplémentaires

La méthode trustAsResourceUrl() ne doit être utilisée que lorsque l'URL est connue pour être sûre et fiable.

Si l'URL n'est pas entièrement qualifiée (par exemple, le schéma ou le nom d'hôte manque), AngularJS peut lancer un avertissement de sécurité.

Pour répondre aux problèmes de sécurité. , il est toujours conseillé de mettre en œuvre une validation et une désinfection appropriées côté serveur avant d'accepter les URL fournies par l'utilisateur.