Bagaimana untuk Menetapkan Atribut src iframe secara Dinamik dengan Selamat dalam AngularJS?

Menetapkan Atribut src iframe secara dinamik dalam AngularJS

Apabila bekerja dengan iframe dalam AngularJS, selalunya perlu menetapkan atribut src secara dinamik berdasarkan pembolehubah. Walau bagaimanapun, percubaan untuk berbuat demikian dengan tugasan standard mungkin menyebabkan atribut src kosong dipaparkan dalam iframe.

Memahami Isu dan Penyelesaian

Isu timbul apabila mencuba untuk menetapkan atribut src dengan URL yang tidak dipercayai. AngularJS melaksanakan langkah keselamatan untuk menghalang kemungkinan serangan XSS (skrip merentas tapak). Untuk mengurangkan perkara ini, perkhidmatan $sce (Strict Contextual Escaping) perlu digunakan untuk "mempercayai" URL sebelum memberikannya.

Kaedah trustAsResourceUrl() perkhidmatan $sce boleh digunakan untuk menandakan secara eksplisit URL sebagai dipercayai, memastikan ia boleh digunakan dengan selamat dalam templat AngularJS.

Pelaksanaan Kod

Dalam fail pengawal/app.js yang disediakan, masukkan $sce perkhidmatan ke dalam AppCtrl dan ubah suai fungsi setProject() seperti berikut:

<code class="javascript">$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}</code>

Dalam templat HTML, kemas kini atribut src iframe untuk merujuk pembolehubahProjectUrl semasa:

<code class="html"><iframe ng-src="{{currentProjectUrl}}"></iframe></code>

Penjelasan

Dengan memanggil trustAsResourceUrl(), URL ditandakan sebagai dipercayai dan boleh digunakan dengan selamat dalam templat AngularJS. Arahan ng-src kemudiannya akan menetapkan atribut src iframe dengan URL yang dipercayai.

Nota Tambahan

• Kaedah trustAsResourceUrl() hanya boleh digunakan apabila URL diketahui selamat dan dipercayai.
• Jika URL tidak layak sepenuhnya (cth., tiada skim atau nama hos), AngularJS mungkin memberikan amaran keselamatan.
• Untuk menangani kebimbangan keselamatan , sentiasa dinasihatkan untuk melaksanakan pengesahan dan sanitasi bahagian pelayan yang sesuai sebelum menerima URL yang dibekalkan pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Atribut src iframe secara Dinamik dengan Selamat dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!