Bagaimana untuk Menetapkan Atribut iframe src daripada Pembolehubah dengan Selamat dalam AngularJS?

Menetapkan Atribut iframe src daripada Pembolehubah dalam AngularJS

Dalam AngularJS, anda mungkin menghadapi masalah apabila cuba menetapkan atribut src bagi iframe daripada pembolehubah. Untuk menangani perkara ini, berikut ialah panduan langkah demi langkah:

1. Suntikan Perkhidmatan $sce

Suntikan perkhidmatan $sce (Strict Contextual Escaping) ke dalam pengawal anda untuk mengendalikan sanitasi.

<code class="js">function AppCtrl($scope, $sce) {
  // ...
}</code>

2. Percaya URL Sumber

Gunakan $sce.trustAsResourceUrl dalam pengawal untuk memastikan URL selamat.

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

3. Kemas kini Templat

Dalam templat, ikat atribut ng-src pada pembolehubah URL yang dipercayai.

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

Kod Contoh

<code class="js">function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

<code class="html"><ul ng-repeat="project in projects">
  <li ng-click="setProject(project.id)">{{project.name}}</li>
</ul>

<iframe ng-src="{{currentProjectUrl}}">
  Something wrong...
</iframe></code>

Nota Tambahan

• Gunakan $sce.trustSrc untuk URL yang tidak dipercayai.
• Penyelesaian berkisar tentang mencegah Penskripan Merentas Tapak (XSS ) serangan dengan memastikan URL selamat.

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