JavaScript を使用して PDF のデジタル署名を検証する方法

この記事では、PDFTron の WebViewer SDK という 1つのコンポーネントと数行のコードだけで、Webアプリケーション上で JavaScript を使用してデジタル署名と証明書を検証する方法を紹介します。

プロセスの最後には、検証された署名とドキュメントが WebViewer に表示されます。

WebViewer は、あらゆる Web アプリケーションで結果を抽出、検証、表示します。

より詳細な情報については、認証局に関するドキュメントをご覧ください。また、デジタル署名の検証サンプルもご覧ください。

さらに、デジタル署名 API を使用して PDF にデジタル署名、証明、検証を行うための完全なコードサンプルもございます。JavaScript で PDF にデジタル署名をするためのドキュメントをご覧ください。

ステップ1: WebViewer のインストール
ステップ2: 信頼済み証明書リストを WebViewer に書き出す
次のステップ

ステップ1: WebViewer のインストール

ユーザーが数ステップの手順でデジタル署名、検証、ドキュメントの閲覧ができる環境を構築したいが、何から始めればいいのか分かりませんか？PDFTron の WebViewer を使えば、デジタル署名の検証結果を簡単に追加して、ユーザーに見せることができます。

注意: このコンポーネントは JavaScript と WebAssembly を使用しているため、署名はクライアントアプリケーション内で直接検証されます。検証中にデータがクライアントから離れることはなく、クライアントアプリケーションの外部に機密情報が送信されることはありません。

まず、WebViewer のインストールから始めましょう。WebViewer は React、Vue、Angular などのフレームワークを全面的にサポートしています。トライアルキーは不要で、今すぐ新機能のデモを行うことも可能です。Get Started ページをご覧ください。

WebViewer をインストールするにはさまざまな方法がありますが、この例では NPM を使用します。

デジタル署名の検証に WebViewer を使用するには、NPM 経由でバージョン 8.0 以上をダウンロードし、インストールしてください。(以下の例はすべてバージョン 8.0+ のものとなります)。

WebViewer は静的リソースを提供する必要があるため (バンドル不可)、静的ファイルを手動で dist ディレクトリにコピーする追加の手順があります。

前提条件

まず、Node (NPMを含む) をインストールします。

WebViewer は Node、NPM、node_modules ディレクトリを必要としません。これらのツールは、サンプルを実行するためにのみ必要です。

1. NPM経由でインストール

注意: 以下の説明は JavaScript の場合です。

プロジェクトで以下のコマンドを実行します。

 npm i @pdftron/webviewer

これにより、メインの JS エントリポイントがインストールされ、WebViewer の実行に必要な静的アセットがダウンロードされます。

2. 静的アセットのコピー

次に、WebViewer の動作に必要な静的アセットを HTTP/HTTPS で提供されるパブリックな場所 (通常は dist フォルダまたは build フォルダ) にコピーしてください。静的ファイルの場所は以下となります。

 node_modules/@pdftron/webviewer/public

package.json に静的ファイルを移動させるスクリプトを追加することができます。

こちらは、ビルドが完了した後、すべての必要なファイルを dist/public フォルダにコピーします。

 { 
  "scripts": { 
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer", 
    "build": "mybuildscript && npm run move-static" 
  } 
}

3. 使用方法

WebViewer をコードで使用する場合、path パラメータを使用して、静的ファイルをコピーした場所を指定する必要があります。

例えば、静的ファイルを dist/public/webviewer にコピーした場合、以下のようなコードになります。

import WebViewer from '@pdftron/webviewer' 
 
WebViewer( 
  {  
    path: '/public/webviewer', 
  }, 
  document.getElementById('viewer'), 
).then(instance => {  
  const { UI, Core } = instance;  
  const { documentViewer, annotationManager, Tools, Annotations } = Core;  
 

  documentViewer.addEventListener('documentLoaded', () => {  
    // call methods relating to the loaded document 
  });  
  instance.UI.loadDocument('https://fileserver/documents/test.pdf');  
})

次のステップに関する情報は、Integrating WebViewer via NPM をご覧ください。

デジタル署名のプロパティと関数は、API ドキュメントに記載されています。

ステップ2: 信頼済み証明書リストを WebViewer に書き出す

WebViewer をインストールした後の次のステップは信頼リストを設定することです。このリストは、どのデジタル署名と証明書が安全で、信頼できる認証局によってすでに検証されているかを WebViewer に伝えます。Adobe と同様のデジタル署名の検証結果を望んでいるユーザーが多いため、Adobe Approved Trust List と EUTL を WebViewer にエクスポートします。これにより、ユーザーは Adobe Reader が使用するのと同じ公開証明書を使用して、結果を検証することができます。これにより、ユーザーは自分の環境を離れることなく、自分のウェブアプリケーションで署名されたドキュメントを開くことができます。

以下の手順で、WebViewer にリストをエクスポートします。

1. 1. Adobe Reader を起動します。
  2. 左上の編集メニューボタンをクリックします。
  3. 環境設定をクリックします。
  4. 左側の「署名」カテゴリーに進みます。
  5. 「ID と信頼済み証明書」セクションにある「詳細…」ボタンをクリックします。
  6. 左側の「信頼済み証明書」リストを表示します。
  7. リスト上のすべての証明書をハイライトします (最初をクリックし、Shift を押したまま最後をクリックします）。
  8. 書き出しをクリックします。
    - デフォルトのラジオボタンのオプションのままにしておきます。
    - エクスポートされたデータをファイルに保存します。
    - Acrobat FDF Data Exchange を選択します。
  9. .fdf ファイルを保存します。
  10. .fdf ファイルを UI.VerificationOptions.loadTrustList API 経由でインポートします(例: 上記のコード例を拡張)。
```
import WebViewer from '@pdftron/webviewer' 
 
WebViewer( 
  {  
    path: '/public/webviewer', 
  }, 
  document.getElementById('viewer'), 
).then(async instance => {  
  const { UI, Core } = instance; 
  const { documentViewer, annotationManager, Tools, Annotations } = Core; 
 
  documentViewer.addEventListener('documentLoaded', () => {  
    // call methods relating to the loaded document 
  }); 
 
  // Open the signaturePanel element immediately to see Digital Signature information 
  instance.UI.openElements(['signaturePanel']); 
 
  // Please ensure that the PDF you load contains Digital Signature data 
  instance.UI.loadDocument('https://fileserver/documents/test.pdf'); 
 
  const response = await fetch('https://fileserver/path/to/exported/trust-list.fdf'); 
  instance.UI.VerificationOptions.loadTrustList(await response.blob()); 
})
```
その後、WebViewerはパブリック証明書を使用して PDF 内のデジタル署名の検証を試みます。

これで完了です！これらのステップが完了すると、PDFTron の WebViewer でデジタル署名されたドキュメントを開き、ドキュメントとその署名プロパティを以下のように表示することができます。

WebViewer に表示される有効なデジタル署名のプロパティ

次のステップ

この記事では、WebViewer という単一のコンポーネントを使用して、ユーザーが Web アプリで直接デジタル署名を検証できる環境をセットアップしました。WebViewer をインストールし、信頼リストをエクスポートすることで、エンドユーザーは追加のツールやプログラムを必要としません。

また、WebViewer は、ディグシグ挿入、長期検証 (LTV)、変更検出許可 (MDP) などの追加のセキュリティ機能をサポートしています。また、WebViewer は、開発者が安全なアプリケーションを構築するために、検証結果に関するきめ細かなレポートを提供します。詳細は、How We Secure our Digital Signature Validation in PDF をご覧ください。
本製品に関するご質問、ご不明な点はエクセルソフトまでお気軽にお問い合わせください。
PDFTron 製品の詳細は、弊社 Web サイトをご確認ください。

記事参照：
© 2023 PDFTron
「How to Validate Digital Signatures in PDF Using JavaScript」