Angular sanitize ошибка выброса при использовании тега скрипта для переменной

Пытаюсь реализовать angular sanitizer в моем приложении с помощью angular sanitizer, но он работает не так, как ожидалось.

angular.module('sanitizeExample', ['ngSanitize'])
      .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
      //$scope.snippet = "<script type='text/javascript'>alert(1)</script>";
      $scope.snippet = "alert(1)";
      $scope.deliberatelyTrustDangerousSnippet = function() {
         return $sce.trustAsHtml($scope.snippet);
      };
      $scope.escape = function(input) {
        return $sce.trustAsHtml(input);
      }
  }]);
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>

<div ng-app = "sanitizeExample">
    <div ng-controller = "ExampleController">
        Snippet: <textarea ng-model = "snippet" cols = "60" rows = "3"></textarea>
       <table>
         <tr>
           <td>Directive</td>
           <td>How</td>
           <td>Source</td>
           <td>Rendered</td>
         </tr>
         <tr id = "bind-html-with-sanitize">
           <td>ng-bind-html</td>
           <td>Automatically uses $sanitize</td>
           <td><pre>&lt;div ng-bind-html = "snippet"&gt;<br/>&lt;/div&gt;</pre></td>
           <td><div ng-bind-html = "snippet"></div></td>
         </tr>
         <tr id = "bind-html-with-trust">
           <td>ng-bind-html</td>
           <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
           <td>
           <pre>&lt;div ng-bind-html = "deliberatelyTrustDangerousSnippet()"&gt;
&lt;/div&gt;</pre>
           </td>
           <td><div ng-bind-html = "deliberatelyTrustDangerousSnippet()"></div></td>
         </tr>
         <tr id = "bind-default">
           <td>ng-bind</td>
           <td>Automatically escapes</td>
           <td><pre>&lt;div ng-bind = "snippet"&gt;<br/>&lt;/div&gt;</pre></td>               <td><div ng-bind = "snippet">ggg</div></td>
           </tr>
       </table>
       <p>{{ escape("<script type='text/javascript'>alert(1)</script>") }}</p>
       </div>
</div>

Выдает Uncaught SyntaxError: недопустимая или неожиданная ошибка токена при использовании скрипта

$scope.snippet = "<script type='text/javascript'>alert(1)</script>"

Прекрасно работает без скрипта

$scope.snippet = "alert(1)"

Он выдает предупреждение в браузере, но ожидает внутренний текст для тега p.

<p>{{ escape("<script type='text/javascript'>alert(1)</script>") }}</p>

также получение вывода в html

{{ escape("") }}

Как выполнить дезинфекцию переменной с тегом сценария, также вызвав функцию контроллера из шаблона html.

взгляните на stackoverflow.com/questions/12197880/…

Akber Iqbal 31.10.2018 13:25

Я ищу исправление очистки атаки xss.

Govinda raj 31.10.2018 13:27

Мое требование - отображать сценарий также как текст внутри шаблона html.

Govinda raj 31.10.2018 13:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
553
2

Ответы 2

это работает?

    angular.module("sanitizeExample", ['ngSanitize'])
        .controller("ExampleController", ['$scope', '$sce', function($scope, $sce){
        /* $scope.snippet = "alert(1)"; */
        $scope.snippet = "<script " + "type='text/javascript'"+" >alert(1) <" + "/script>";
        $scope.deliberatelyTrustDangerousSnippet = function(){
            return $sce.trustAsHtml($scope.snippet);
        };
        $scope.escape = function(input) {
            return $sce.trustAsHtml(input);
        }
    }]);
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div ng-app = "sanitizeExample">
        <div ng-controller = "ExampleController">
            Snippet: <textarea ng-model = "snippet" cols = "60" rows = "3"></textarea>
           <table>
             <tr>
               <td>Directive</td>
               <td>How</td>
               <td>Source</td>
               <td>Rendered</td>
             </tr>
             <tr id = "bind-html-with-sanitize">
               <td>ng-bind-html</td>
               <td>Automatically uses $sanitize</td>
               <td><pre>&lt;div ng-bind-html = "snippet"&gt;<br/>&lt;/div&gt;</pre></td>
               <td><div ng-bind-html = "snippet"></div></td>
             </tr>
             <tr id = "bind-html-with-trust">
               <td>ng-bind-html</td>
               <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
               <td>
               <pre>&lt;div ng-bind-html = "deliberatelyTrustDangerousSnippet()"&gt;
    &lt;/div&gt;</pre>
               </td>
               <td><div ng-bind-html = "deliberatelyTrustDangerousSnippet()"></div></td>
             </tr>
             <tr id = "bind-default">
               <td>ng-bind</td>
               <td>Automatically escapes</td>
               <td><pre>&lt;div ng-bind = "snippet"&gt;<br/>&lt;/div&gt;</pre></td>               <td><div ng-bind = "snippet">ggg</div></td>
               </tr>
           </table>
           <!-- 
        -->
               <p>{{ escape("<script type='text/javascript'>alert(1)</script>") }}</p>
           </div>
    </div>

Включая только модуль ngSanitize, достаточный для выполнения дезинфекции в представлении.

angular.module("sanitizeExample", ['ngSanitize'])

Это неправильный способ проверки очистки от представления. Он передается как переменная в angular, чтобы он выполнялся и выдает предупреждение.

{{ escape("<script type='text/javascript'>alert(1)</script>") }}

Когда мы тестируем из служб данных, sanitize работает должным образом.

Другие вопросы по теме