AngularJS में वेरिएबल से iframe src विशेषता सेट करना

AngularJS में, किसी iframe की src विशेषता सेट करने का प्रयास करते समय आपको समस्याओं का सामना करना पड़ सकता है एक चर. इसे संबोधित करने के लिए, यहां चरण-दर-चरण मार्गदर्शिका दी गई है:

1. $sce सेवा को इंजेक्ट करें

सैनिटाइजेशन को संभालने के लिए अपने कंट्रोलर में $sce (स्ट्रिक्ट कॉन्टेक्स्टुअल एस्केपिंग) सेवा को इंजेक्ट करें।

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

2. संसाधन URL पर भरोसा करें

यूआरएल सुरक्षित है यह सुनिश्चित करने के लिए नियंत्रक के भीतर $sce.trustAsResourceUrl का उपयोग करें।

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

अतिरिक्त नोट्स

• अविश्वसनीय यूआरएल के लिए $sce.trustSrc का उपयोग करें।
• समाधान क्रॉस-साइट को रोकने के इर्द-गिर्द घूमता है यूआरएल सुरक्षित हैं यह सुनिश्चित करके स्क्रिप्टिंग (XSS) हमले।