angular:angularjs:servisy:ngsanitize

Содержание

Сервисы для работы небезопасными данными

Сервисы для работы небезопасными данными

По умолчанию AngularJS не поддерживает выполнение HTML разметки и JavaScript сценариев вводимых пользователем, но есть случаи когда это необходимо, для этого существует ряд сервисов:

$sanitize –удаляет небезопасные элементы.
$sce–позволяет отобразить небезопасные элементы.

Для работы с этими сервисами необходимо подключить в зависимости модуля ngSanitize который находится в отдельном js файле который можно скачать по адресу angular-sanitize.js

один из самых распространенных способов атаки на веб приложение это ввод ложных данных, например в поля формы можно ввест не требуемые данные а javascript сценарий который может быть выполнен и впоследствии вашему приложению будт нанесен вред angularjs содержит несколько сервисов позволяющих повысить безопасность своего приложения, чаще всего это будет необходимо в приложениях которые позволяют пользователю генерировать html разметку

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>    
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />    
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.htmlData = "<p>This is <b onmouseover=alert('Attack!')>dangerous</b> data</p>";
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="htmlData" /></p>
        <p>{{htmlData}}</p>
    </div>
</body>
</html>

ngSanitize

ng-bind-html выполняет привязку и проверяет выражение на содержание недопустимых символов, по умолчанию использует $sanitize сервис, необходимо подключение angular_sanitize.js который содержим модуль ngSanitize

запустившись мы увидим строку которая указана в свойстве htmlData но на самом деле angularJS уже обработал ее и отображаемая строка превратилась в <p>This is <b onmouseover=alert('Attack!')>dangerous</b> data</p> были заменены опасные символы на более безопасные

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <script src="angular_sanitize.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", ["ngSanitize"])
        //ngSanitize модуль angularjs который необходим для корректной работы с сервисом $sanitize
        .controller("studyCtrl", function ($scope) {
            $scope.htmlData = "<p>This is <b onmouseover=alert('Attack!')>dangerous</b> data</p>";
            //если навести курсор то обработчик события не сработает
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="htmlData" /></p>
        <p ng-bind-html="htmlData"></p>   
    </div>
</body>
</html>

$sanitize

Использование сервиса $sanitize
Обратите внимание что angularjs удалил обработчик на событие javascript onmouseover из строки.

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <script src="angular_sanitize.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", ["ngSanitize"])        
        .controller("studyCtrl", function ($scope, $sanitize) {
            $scope.dangerousData = "<p>This is <b onmouseover=alert('Attack!')>dangerous</b> data</p>";
            $scope.$watch("dangerousData", function (newValue) {
                $scope.htmlData = $sanitize(newValue);
            })
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="dangerousData" /></p>
        <p ng-bind="htmlData"></p>        
        <!--обратите внимание что angularjs удалил обработчик на событие javascript onmouseover из строки-->
    </div>
</body>
</html>

$sce

в некоторых случаях все же нужно оставить возможность выполнять клиенту javascript код, для этого в angularjs существует сервис $sce этот сервис содержит метод trustAsHtml который возвращает выражение обработанное сервисом $sce

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>SCE</title>
    <script src="../angular.min%20.js"></script>
    <script src="angular_sanitize.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", ["ngSanitize"])
        .controller("defaultCtrl", function ($scope, $sce) {
            $scope.htmlData
                = "<p>This is <b onmouseover=alert('Attack!')>dangerous</b> data</p>";
 
            $scope.$watch("htmlData", function (newValue) {
                $scope.trustedData = $sce.trustAsHtml(newValue);
            });
        });
    </script>
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="htmlData" /></p>
        <p ng-bind-html="trustedData"></p>
        <!--для того чтобы увидеть эффект наведите курсор на жирный текст-->
    </div>
</body>
</html>