js STUDIO

$sanitize

概要

入力値のHTMLを解析することによって、実体参照にサニタイズします。 全ての安全な実体参照(ホワイトリストからの)は、適切なエスケープHTML文字列としてシリアライズから戻します。 これは、安全では無い入力は戻り値の文字列にすることは出来ませんが、 この解析は一般的なブラウザの解析よりも厳格で、ブラウザによって有効なHTMLであると識別される曖昧な入力を、 サニタイズしない可能性があることを意味します。(翻訳に自信なし)

使用方法 

$sanitize(html);
引数 説明
html

型：string

HTML入力値を指定します。

戻り値 説明
 

型：string

サニタイズされたHTMLが返ります。

デモ 

<!doctype html>
<html ng-app="ngSanitize">
  <head>
    <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
       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;
    t;/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"></div></td>
        </tr>
      </table>
      </div>
  </body>
</html>

function Ctrl($scope, $sce) {
  $scope.snippet =
    '<p style="color:blue">an html
' +
    '<em onmouseover="this.textContent='PWN3D!'">click here</em>
' +
    'snippet</p>';
  $scope.deliberatelyTrustDangerousSnippet = function() {
    return $sce.trustAsHtml($scope.snippet);
  };
}

it('should sanitize the html snippet by default', function() {
  expect(using('#bind-html-with-sanitize').element('div').html()).
    toBe('<p>an html
<em>click here</em>
snippet</p>');
});

it('should inline raw snippet if bound to a trusted value', function() {
  expect(using('#bind-html-with-trust').element("div").html()).
    toBe("<p style="color:blue">an html
" +
         "<em onmouseover="this.textContent='PWN3D!'">click here</em>
" +
         "snippet</p>");
});

it('should escape snippet without any filter', function() {
  expect(using('#bind-default').element('div').html()).
    toBe("&lt;p style="color:blue"&gt;an html
" +
         "&lt;em onmouseover="this.textContent='PWN3D!'"&gt;click here&lt;/em&gt;
" +
         "snippet&lt;/p&gt;");
});

it('should update', function() {
  input('snippet').enter('new <b onclick="alert(1)">text</b>');
  expect(using('#bind-html-with-sanitize').element('div').html()).toBe('new <b>text</b>');
  expect(using('#bind-html-with-trust').element('div').html()).toBe(
    'new <b onclick="alert(1)">text</b>');
  expect(using('#bind-default').element('div').html()).toBe(
    "new &lt;b onclick="alert(1)"&gt;text&lt;/b&gt;");
});

<!doctype html>
<html ng-app="ngSanitize">
  <head>
    <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script>function Ctrl($scope, $sce) {
  $scope.snippet =
    '<p style="color:blue">an html
' +
    '<em onmouseover="this.textContent='PWN3D!'">click here</em>
' +
    'snippet</p>';
  $scope.deliberatelyTrustDangerousSnippet = function() {
    return $sce.trustAsHtml($scope.snippet);
  };
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
       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;
    t;/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"></div></td>
        </tr>
      </table>
      </div>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。