Comment définir l'attribut iframe src à partir d'une variable en toute sécurité dans AngularJS ?-js tutoriel-php.cn

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

Patricia Arquette

Libérer： 2024-10-21 13:22:31

original

363 Les gens l'ont consulté

How to Set iframe src Attribute from a Variable Safely in 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>

Copier après la connexion

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>

Copier après la connexion

3. Mettez à jour le modèle

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

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!