代码之家  ›  专栏  ›  技术社区  ›  Govinda raj

在变量上使用脚本标记时抛出角度清理错误

  •  0
  • Govinda raj  · 技术社区  · 6 年前

    尝试在我的应用程序上使用角消毒剂实现角消毒剂,但它没有按预期工作。

    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>

    抛出未捕获的语法错误:使用脚本时出现无效或意外的令牌错误

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

    没有剧本也行

    $scope.snippet = "alert(1)"
    

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

    同时在html中获取输出

    {{转义(“”)}

    如何通过从html模板调用controller函数来清除带有script标记的变量。

    2 回复  |  直到 5 年前
        1
  •  1
  •   Akber Iqbal    6 年前

    这样行吗?

        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>
        2
  •  0
  •   Govinda raj    6 年前

    仅包含ngSanitize模块,足以从视图中执行清理。

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

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

    当我们从数据服务测试时,sanitize按预期工作。