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

Question

我有一个表单，我希望用户无法在其中输入 html 标签或脚本并在 angularjs 中提交表单。为此，我正在使用 $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。这将在服务器端防止发送任何无效数据。这也可以放在客户端进行验证。

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

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

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

Stop posting html tags in form using AngularJS

html

javascript

forms

jquery

angularjs