AngularJS menggunakan $sce untuk mengawal semakan keselamatan kod

AngularJS menggunakan $sce untuk mengawal semakan keselamatan kod_AngularJS

WBOY

Lepaskan： 2016-05-16 15:21:47

asal

1102 orang telah melayarinya

Memandangkan penyemak imbas mempunyai dasar pemuatan asal yang sama, mereka tidak boleh memuatkan fail dalam domain yang berbeza dan mereka juga tidak boleh mengaksesnya menggunakan protokol yang tidak memuaskan seperti fail.

Untuk mengelakkan lubang keselamatan dalam angularJs, beberapa ng-src atau ng-include akan diperiksa untuk keselamatan, jadi selalunya ditemui bahawa ng-src dalam iframe tidak boleh digunakan.

Apakah itu SCE

SCE, iaitu, pelarian kontekstual yang ketat, pemahaman saya adalah pengasingan konteks yang ketat...Terjemahan mungkin tidak tepat, tetapi melalui pemahaman literal, angularjs sepatutnya mengawal akses konteks dengan ketat.

Memandangkan SCE didayakan secara bersudut secara lalai, ini bermakna beberapa tingkah laku tidak selamat akan dilarang secara lalai, seperti menggunakan skrip atau pustaka pihak ketiga, memuatkan sekeping HTML, dsb.

Ini sememangnya selamat dan mengelakkan beberapa XSS merentas tapak, tetapi kadangkala kami ingin memuatkan sendiri fail tertentu, apakah yang perlu kami lakukan dalam kes ini?

Pada masa ini, anda boleh menggunakan perkhidmatan $sce untuk menukar beberapa alamat menjadi pautan yang selamat dan dibenarkan... Ringkasnya, ia seperti memberitahu penjaga pintu bahawa orang asing ini sebenarnya kawan baik saya dan sangat boleh dipercayai, jadi ada tidak perlu memintasnya!

Kaedah yang biasa digunakan ialah:

$sce.trustAs(jenis,nama);
$sce.trustAsHtml(nilai);
$sce.trustAsUrl(nilai);
$sce.trustAsResourceUrl(nilai);
$sce.trustAsJs(value);

Yang berikut adalah berdasarkan api pertama Contohnya, trsutAsUrl sebenarnya memanggil trsutAs($sce.URL,"xxxx");

Nilai pilihan jenis ialah:

$sce.HTML
$sce.CSS
$sce.URL //href dalam teg, src
dalam teg img $sce.RESOURCE_URL //ng-include,src atau ngSrc, seperti iframe atau Object
$sce.JS

Contoh dari laman web rasmi: ng-bind-html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
  <div ng-controller="AppController">
   <i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
  </div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope', '$sce',
     function($scope, $sce) {
      $scope.explicitlyTrustedHtml = $sce.trustAsHtml(
        '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
        'sanitization."">Hover over this text.</span>');
     }]);
  </script>
</body>
</html>

Salin selepas log masuk

Contoh dalam tindakan: pautan ng-src

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
  <iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc}}"></iframe>
</div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope','$sce',function($scope,$sce) {
      $scope.trustSrc = $sce.trustAs($sce.RESOURCE_URL,"http://fanyi.youdao.com/");
      // $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");//等同于这个方法
     }]);
  </script>
</body>
</html>

Salin selepas log masuk

Masih ada masa lagi, izinkan saya memperkenalkan kepada anda arahan ng-bind-html dan perkhidmatan $sce dalam sudut

Salah satu ciri angular js yang hebat ialah ciri hebat pengikatan data dua hala Dua perkara yang sering kami gunakan ialah ng-bind dan ng-model untuk borang. Tetapi dalam projek kami, kami akan menghadapi situasi sedemikian, data yang dikembalikan oleh latar belakang mengandungi pelbagai tag html. Seperti:

$scope.currentWork.description = “hello,
Kita hendak ke mana hari ini?”
Kami menggunakan arahan seperti ng-bind-html untuk mengikat, tetapi hasilnya tidak seperti yang kami mahukan. Ia seperti ini

hello,

Kita hendak ke mana hari ini?

Apa yang perlu dilakukan?

Untuk versi di bawah sudut 1.2, kami mesti menggunakan perkhidmatan $sce untuk menyelesaikan masalah kami. Apa yang dipanggil sce ialah singkatan daripada "Strict Contextual Escaping". Diterjemahkan ke dalam bahasa Cina ialah "mod konteks ketat" yang juga boleh difahami sebagai pengikatan selamat. Mari lihat cara menggunakannya.

kod pengawal:

$http.get('/api/work/get&#63;workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});

Salin selepas log masuk

Kod HTML:

<p> {{currentWork.description}}</p>

Salin selepas log masuk

Kandungan yang kami kembalikan mengandungi satu siri tag html. Hasilnya adalah seperti yang dinyatakan pada permulaan artikel kami. Pada ketika ini kita perlu memberitahunya untuk mengikat dengan selamat. Ia boleh dilakukan dengan menggunakan $sce.trustAsHtml(). Kaedah ini menukar nilai kepada nilai yang diterima oleh keistimewaan dan selamat untuk digunakan dengan "ng-bind-html". Jadi, kami mesti memperkenalkan perkhidmatan $sce dalam pengawal kami

controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get&#63;workId=' + $routeParams.workId)
.success(function (work) {
  $scope.currentWork = work;
  $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});

Salin selepas log masuk

kod html:

<p ng-bind-html="currentWork.description"></p>

Salin selepas log masuk

Hasilnya akan dipaparkan dengan sempurna pada halaman:

hello

Kita hendak ke mana hari ini?

Kami juga boleh menggunakannya dengan cara ini, merangkumnya ke dalam penapis dan memanggilnya pada templat pada bila-bila masa

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
  return $sce.trustAsHtml(text);
};
}]);

Salin selepas log masuk

kod html:

Pilih semua dan salinnya ke dalam nota

<p ng-bind-html="currentWork.description | to_trusted"></p>

Salin selepas log masuk