AngularJS में iframe की src विशेषता को गतिशील रूप से सेट करना

AngularJS में iframes के साथ काम करते समय, अक्सर src विशेषता को गतिशील रूप से एक के आधार पर सेट करना आवश्यक होता है चर। हालाँकि, मानक असाइनमेंट के साथ ऐसा करने का प्रयास करने के परिणामस्वरूप iframe में एक खाली src विशेषता प्रस्तुत की जा सकती है।

समस्या और समाधान को समझना

प्रयास करते समय समस्या उत्पन्न होती है गैर-विश्वसनीय URL के साथ src विशेषता सेट करने के लिए। AngularJS संभावित XSS (क्रॉस-साइट स्क्रिप्टिंग) हमलों को रोकने के लिए सुरक्षा उपायों को लागू करता है। इसे कम करने के लिए, यूआरएल को असाइन करने से पहले "विश्वास" करने के लिए $sce (स्ट्रिक्ट कॉन्टेक्स्टुअल एस्केपिंग) सेवा को नियोजित करने की आवश्यकता है।

$sce सेवा की TrustAsResourceUrl() पद्धति का उपयोग स्पष्ट रूप से चिह्नित करने के लिए किया जा सकता है। विश्वसनीय के रूप में URL, यह सुनिश्चित करते हुए कि इसे AngularJS टेम्पलेट में सुरक्षित रूप से उपयोग किया जा सकता है। AppCtrl में सेवा और setProject() फ़ंक्शन को निम्नानुसार संशोधित करें:

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

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

स्पष्टीकरण