Question

我有一个表单，我希望用户无法在angularjs中输入html标签或脚本并提交表单。为此，我使用$sanitize，但它无效。

这是我的表格

<html>

  <head>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-app="birthdayToDo" ng-controller="main">
    <h1>Hello Plunker!</h1>
    <form name="testForm" ng-submit="submitForm(testForm.$valid)" novalidate>
      <input type="text" name="name" ng-model="testText"/>
        <p ng-show="testForm.name.$dirty && testForm.name.$invalid && testForm.submitted" class="error">
          Invalid Input
        </p>
      <input type="submit"  value="Save"/>
    </form>
  </body>
</html>

一旦输入无效输入，就会显示错误消息。我使用这个概念

$scope.SanitizeDemo=function() {
   return $sce.trustAsHtml($scope.testText);
   };

My Plunker

Answer 1

我认为你这是错误的做法。在angularjs和后端中使用白名单正则表达式来验证输入。

为了安全起见，最佳做法是每个字段都有一个正则表达式，只允许某些有效输入。名称的简单名称为/^[a-z ,.'-]+$/i。这将在服务器端防止发送任何无效的数据。这也可以放在客户端也进行验证。

默认情况下，当使用{{}}来保护XSS时，Angularjs会对输出进行编码，因此<b>abs</b>将按原样显示，从安全的角度来看，这是您希望阻止第三方脚本执行的你的页面。

在某些情况下，您可能希望允许输出html并允许其安全使用，但在这种情况下，您可以将ng-bind-html与ng-sanitize一起使用，并且不需要使用$sce直。

停止使用AngularJS在表单中发布html标签

1 个答案: