تعيين سمة src لـ iframe ديناميكيًا في AngularJS

عند العمل مع إطارات iframe في AngularJS، غالبًا ما يكون من الضروري تعيين سمة src ديناميكيًا استنادًا إلى عامل. ومع ذلك، قد تؤدي محاولة القيام بذلك باستخدام التعيين القياسي إلى عرض سمة src فارغة في إطار iframe.

فهم المشكلة والحل

تظهر المشكلة عند المحاولة لتعيين سمة src بعنوان URL غير موثوق به. تطبق AngularJS إجراءات أمنية لمنع هجمات XSS (البرمجة النصية عبر المواقع) المحتملة. للتخفيف من ذلك، يجب استخدام خدمة $sce (الهروب السياقي الصارم) "للثقة" في عنوان URL قبل تعيينه.

يمكن استخدام طريقة TrustAsResourceUrl() لخدمة $sce لوضع علامة صريحة على عنوان URL موثوق به، مما يضمن أنه يمكن استخدامه بأمان في قالب AngularJS.

تنفيذ التعليمات البرمجية

في ملف وحدات التحكم/app.js المقدم، قم بإدخال $sce الخدمة في AppCtrl وتعديل وظيفة setProject() على النحو التالي:

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

في قالب HTML، قم بتحديث سمة src الخاصة بـ iframe للإشارة إلى متغير ProjectUrl الحالي:

شرح

من خلال استدعاء TrustAsResourceUrl()، يتم وضع علامة على عنوان URL على أنه موثوق به ويمكن استخدامه بشكل آمن في قالب AngularJS. سيقوم التوجيه ng-src بعد ذلك بتعيين سمة src الخاصة بـ iframe باستخدام عنوان URL الموثوق به.

ملاحظات إضافية

يجب استخدام الأسلوب TrustAsResourceUrl() فقط عندما من المعروف أن عنوان URL آمن وموثوق.

• إذا لم يكن عنوان URL مؤهلاً بشكل كامل (على سبيل المثال، فقدان المخطط أو اسم المضيف)، فقد تقوم AngularJS بإصدار تحذير أمني.
• لمعالجة المخاوف الأمنية ، يُنصح دائمًا بتنفيذ التحقق والتطهير المناسب من جانب الخادم قبل قبول عناوين URL التي يقدمها المستخدم.