تعيين سمة iframe src من المتغير في AngularJS

في AngularJS، قد تواجه مشكلات عند محاولة تعيين سمة src لإطار iframe من متغير. لمعالجة هذه المشكلة، إليك دليل خطوة بخطوة:

1. قم بإدخال خدمة $sce

أدخل خدمة $sce (الهروب السياقي الصارم) في وحدة التحكم الخاصة بك للتعامل مع عملية التعقيم.

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

2. ثق في عنوان URL للمورد

استخدم $sce.trustAsResourceUrl داخل وحدة التحكم للتأكد من أن عنوان URL آمن.

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

3. قم بتحديث القالب

في القالب، قم بربط سمة ng-src بمتغير عنوان URL الموثوق.

مثال على الكود

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

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

• {{project.name}}

{{project.name}}

استخدم $sce.trustSrc لعناوين URL غير الموثوق بها.

يدور الحل حول منع المواقع المشتركة هجمات البرمجة النصية (XSS) من خلال التأكد من أن عناوين URL آمنة.