クレジットカード非保持化の対応方法をプログラムで解説する

f:id:maroemon58:20180511224955p:plain

最近EC業界が忙しい理由の1つ、2018年6月に施行される「改正割賦販売法」・・・。

クレジットカードを取り扱う加盟店はどちらかの対応を義務付けられる。
・加盟店におけるカード情報の「非保持化」
・カード情報を保持する事業者の「PCIDSS準拠」
— まろえもん (@maroemon58) 2018年5月5日

目的は最近、加盟店におけるクレジットカード番号等の漏えい事件や不正使用被害が増加しており、安全・安心なクレジットカード利用環境を実現するため。
また、2020年の東京オリンピック・パラリンピックに向けインバウンド需要を取り込むことにも資するものらしい。
— まろえもん (@maroemon58) 2018年5月5日

「非保持化」とは加盟店のサーバにカード情報を「保持しない(非保持)」「処理しない(非処理)」「通過しない(非通過)」の3点を満たすことをいう。
— まろえもん (@maroemon58) 2018年5月5日

この非保持化がやっかいで、かなり広義な解釈・・・。非保持は想像通りDBやファイルにクレカ情報を残さないこと。
非処理・非通過とは簡単に言うとサーバにGETやPOSTパラメータにカード情報を含めてはいけないということ。
— まろえもん (@maroemon58) 2018年5月5日

「PCIDSS準拠」とはクレジットカードを保持するなら、指定されたセキュリティ要件を満たす必要がある。このテスト項目が400項目ほどあり全て通過しなきゃいけない。
どんなテストがあるか全部見たことはないが、運用上、どうしても保持が必要でなければ「非保持化」対応を行っている。
— まろえもん (@maroemon58) 2018年5月5日

この2点どちらも対応していない問題がある加盟店には「是正指導又は(必要な場合は)加盟店契約の解除を実施」
通知を無視してなきゃ既に対応してるだろうが、施行される6月になってようやくクレジットカードが使えなくなると知り、焦りだす店舗が出てくるかも。
— まろえもん (@maroemon58) 2018年5月5日

「保持しない(非保持)」「処理しない(非処理)」については言葉のとおりですが、通過しない(非通過)とは具体的にどう対策すれば良いのか説明します。

まずは対応前の入力フォームをコードにしてみます。
※画像はイメージです。コードは非保持化前後の違いがわかりやすいよう簡素化しています。 f:id:maroemon58:20180511213626p:plain

<html>
<head>
  <title>credit_card</title>
</head>
<body>
  <form method="post" action="?" autocomplete="off">
    <table>
      <tbody>
        <tr>
          <th>カード番号</th>
            <td>
             <input type="text" name="card_number" size="50">
             半角入力（例：1234567890123456）
           </td>
         </tr>
         <tr>
           <th>有効期限</th>
           <td>
             <select name="month">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
　　　　　　　　　　　　　　　：
             </select>/月
             <select name="year">
               <option value="">2018</option>
               <option value="">2019</option>
               <option value="">2020</option>
　　　　　　　　　　　　　　　 ：
             </select>年
           </td>
         </tr>
         <tr>
           <th>カード名義<br />（ローマ字）</th>
           <td>
             名<input type="text" name="first_name" size="20">
             姓<input type="text" name="last_name" size="20">
             半角入力（例：TARO YAMADA）
           </td>
         </tr>
       </tbody>
     </table>
        
     <input type="submit" value="注文を確定する">
  </form>
</body>
</html>

submitボタン（注文を確定する）をクリックすると、フォーム内のクレジットカード情報がサーバにPOSTされます。つまり、ECのWEBサーバにクレジットカード情報が通過してしまいます。

この対策として有効なのがトークン決済と呼ばれる方法です。

参考：トークン決済とは？高セキュリティのクレジットカード決済方法
購入者が入力したクレジットカード情報を、JavaScriptというプログラミング言語を用いて、カード情報を特定できないよう別の文字列に変換(暗号化)し、カード決済を行うことが可能です。

■トークン決済・データーの流れ
1.購入者は、加盟店(ネットショップ)に住所等の購入者情報を入力
2.JavaScriptを利用し、購入者のクレジットカード情報を加盟店のサイトを経由せずに、直接決済代行会社に送信
3.カード情報が特定できないように、別の文字列に置き換え(暗号化し)、「トークン」形式で購入者に返却
4.5.購入者情報と生成された「トークン」を決済代行会社に送信
6.加盟店から受信した「トークン」をもとに決済代行会社にて2で購入者より直接入力いただいたカード情報を復元し、カード会社に与信依頼を送信
7.カード会社より与信結果を購入者に返却、購入者はECサイトから注文完了を受取る

トークン決済の流れ
引用：トークン決済とは？高セキュリティのクレジットカード決済方法｜ネットECの基本｜通販・ECの決済代行サービス｜ヤマトフィナンシャル

重要なところは
JavaScriptを利用し、購入者のクレジットカード情報を加盟店のサイトを経由せずに、直接決済代行会社に送信という部分です。

先程のコードを非保持化対応してみましょう。

<html>
<head>
  <title>credit_card</title>
  <script type="text/javascript" src="https://hogehoge.com/credit_token.js"></script>
  <script type="text/javascript">
    function token() {
      var form = document.form1;

      var hogeToken = new HogeToken();
      
      // トークンを取得
      hogeToken.createToken(
        id,
        key,
        {
          // 入力値をセットする
          card_number:form.card_number.value,
          expire_year:form.card_year.value,
          expire_month: form.card_month.value,
          name:form.card_first_name.value + ' ' + form.card_last_name.value
        },execSubmit
      );
    }
    
    function execSubmit(response) {
      var form = document.form1;

      // 入力値をクリアする
      form.card_number.removeAttribute('name');
      form.card_month.removeAttribute('name');
      form.card_year.removeAttribute('name');
      form.card_first_name.removeAttribute('name');
      form.card_last_name.removeAttribute('name');

      // 取得したトークンをhiddenのinput要素にセット
      form.card_token.value = response.token;
      
      // submitする
      form.submit();
    }
  </script>
</head>
<body>
  <form name="form1" method="post" action="?" autocomplete="off">
    <input type="hidden" name="card_token" value="">
    <table>
      <tbody>
        <tr>
          <th>カード番号</th>
          <td>
            <input type="text" name="card_number" size="50">
            半角入力（例：1234567890123456）
          </td>
        </tr>
        <tr>
          <th>有効期限</th>
          <td>
            <select name="card_month">
              <option value="">--</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
　　　　　　　　　　　　　　　 ：
            </select>/月
            <select name="card_year">
              <option value="">--</option>
              <option value="">2018</option>
              <option value="">2019</option>
              <option value="">2020</option>
　　　　　　　　　　　　　　　 ：
            </select>年
          </td>
        </tr>
        <tr>
          <th>カード名義<br />（ローマ字）</th>
          <td>
            名<input type="text" name="card_first_name" size="20">
            姓<input type="text" name="card_last_name" size="20">
            半角入力（例：TARO YAMADA）
          </td>
        </tr>
      </tbody>
    </table>
    
    <input type="submit" onsubmit="token();" value="注文を確定する">
  </form>
</body>
</html>

これでクレジットカード情報がサーバを通過しないので、「保持しない(非保持)」「処理しない(非処理)」「通過しない(非通過)」の3点を満たすことできます。ではまた。

twitter.com

人生なんて暇つぶし

Webエンジニアの雑記ブログ。技術の話題はDApps開発、NEMアプリ開発がメイン。

クレジットカード非保持化の対応方法をプログラムで解説する