【jQuery】RDAPで遊んでみた

RDAPざっくり

便利になった点

実際に作ってみた

ソース

<script type="text/javascript">
$(document).ready(function(){

  /* 取得結果を表示する小窓を閉じるための処理 */
  $(document).on('click', function(e){
    if ( e.which === 1 ) {
      if ( $('.rdap_results_box').is(':visible') ) {
        if (
           !$(e.target).hasClass('rdap_results_box')
        && !$(e.target).hasClass('rdap_results')
        && !$(e.target).hasClass('rdap_results_parts')
        &&  $(e.target).parents().index($('.rdap_results_box')) < 0
        ) {
          $('.rdap_results').hide();
        }
      }
    }
  });

  /* クリックしたIPアドレスを検索する */
  $('.search_rdap').click(function(e){
    e.preventDefault();
    var addr = $(this).text();
    var elem_id = $(this).attr('id');
    get_rdap_info(addr, elem_id);
  });

});

/* AjaxでRDAPにて情報を取得する */
function get_rdap_info(addr, elem_id){
  var target_id = '#' + elem_id + '_results';
  var base_url = 'https://rdap.apnic.net/ip/';
  var target = $(target_id);
  try {
    $.get(base_url + addr, function(data, status) {
      if ( data && target.length > 0 ) {
        target.html = '<p>情報を検索中です...</p>';
        target.show();
        set_rdap_values(data, target_id);
      }
    });
  }
  catch(error) {
    console.log(error);
  }
}

/* 取得した情報を整形して表示する */
function set_rdap_values(data, target_id){
  var target = $(target_id);
  if ( target.length > 0 ) {
    var table   = $('<table>').addClass('rdap_results rdap_results_parts');
    var head    = $('<tr>').append(
      $('<th>').addClass('rdap_results_parts').append('項目')
    ).append(
      $('<th>').addClass('rdap_results_parts').append('値')
    );
    table.append(head);
    
    var attributes = ['country', 'type', 'name'];
    $.each(attributes, function(idx, attr) {
      table.append(
        $('<tr>').append(
          $('<td>').addClass('attr_title rdap_results_parts').append(attr)
        ).append(
          $('<td>').addClass('attr_value rdap_results_parts').append(data[attr])
        )
      );
    });

    if ( data['startAddress'] != '' || data['endAddress'] != '') {
      var range = (data['startAddress'] == '' ? 'unknown' : data['startAddress']) + ' - ' + (data['endAddress'] == '' ? 'unknown' : data['endAddress']);
    }
    else {
      var range = 'unknown';
    }
    table.append(
      $('<tr>').append(
        $('<td>').addClass('attr_title rdap_results_parts').append('range')
      ).append(
        $('<td>').addClass('attr_value rdap_results_parts').append(range)
      )
    );
    target.append(table);
  }
}
</script>

<div>
<p><a id="in_article" href="" class="search_rdap">xxx.xxx.xxx.xxx</a></p>
<div id="in_article_results" class="rdap_results_box" style="display:none;"></div>
</div>

実際の画面はこんな感じ。

※ 動きません。
xxx.xxx.xxx.xxx
<!-- 問い合わせ結果の表示イメージ -->
項目
値
country
JP
type
ALLOCATED PORTABLE
name
REGISTERED DOMAIN NAME
range
xxx.xxx.0.0 - xxx.xxx.255.255

簡単な説明

すでに気付いている問題点

$.ajaxを使う

$.getではなく、$.ajaxを使う。
たぶんこれだとエラーハンドリングもできるんじゃないかな。
試してないけど、onCompleteとかonSuccessとかがあったはず。

APIリクエスト時のパラメータを精査する

リクエストする前に正規表現かなんかでチェックすりゃいいのでは。

/^\d+\.\d+\.\d+\.\d+$/

こんな感じでやればたぶんチェックできる。
ただ、この場合ipv6も弾いてしまうので注意。
（※ RDAP APIはipv6にも対応してます。）

実益

（異常にアクセス数の多いIPアドレスの検知や、
存在しないファイルを探りに来ているリクエスト など）

まとめ