前回の続き。

cvss3 のロジックはできたので（まだ基本評価基準のみだけど），これをブラウザ上でも使えるようにする。

Web 上をあちこち回ってみたが webpack を使うのがよさげである。今回の用途にはオーバースペックではあるが，練習を兼ねて使ってみる。以下のページがとても参考になった。感謝。

gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ

spiegel-im-spiegel/cvss-demo に開発環境を置いている。以下のページで実際に動いているのを確認できる。

Demo for CVSS v3

デモページでは [Score] ボタンを押すと Vector 情報を出力し，その Vector 情報を cvss3 で計算して Score を表示している。すべてクライアント側で動作しているのでご心配なく。

ハマりどころ

cvss3 ではオブジェクトを階層的に配置している。たとえば BaseMetrics オブジェクトを生成するには

app.js

var cvss3 = require('cvss3');
var base = new cvss3.BaseMetrics();

のように記述する。オブジェクトを階層的に配置することで Java 的な名前空間を構成している。 node.js ではこれで問題なく動作したが， webpack で JavaScript をバンドルするとうまくいかないようだ。上述のようなコードを書くと「BaseMetrics なんてコンストラクタはねーよ，バカ」（超意訳）とか怒られる。

色々試してみたが，オブジェクトを階層的に配置するのはダメらしい。なので，そこはすっぱり諦めて global 直下に並列に配置することにした。例えば上述のコードは

app.js

require('cvss3');
var base = new CVSS3_Base();

と書けば目的のオブジェクトを生成できる。もっとうまいやり方があるかも知れないが，週末も終わるし，本業が忙しくなってしばらく構ってあげられないと思うので，当面はこれで行ってみる。