Comment définir dynamiquement l'attribut src de l'iframe en toute sécurité dans AngularJS ?

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 cela, 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 fiable, garantissant qu'elle peut être utilisée en toute sécurité dans un modèle AngularJS.

Implémentation du code

Dans le fichier contrôleurs/app.js fourni, injectez le $sce service dans AppCtrl et modifiez la fonction setProject() comme suit :

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

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

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

Explication

En appelant trustAsResourceUrl(), l'URL est marquée comme fiable et peut être utilisée en toute sécurité dans le modèle AngularJS. La directive ng-src définira ensuite l'attribut src de l'iframe avec l'URL de confiance.

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.

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!