2013年1月14日月曜日

[node.js, express]express で CSRF 対策

実行環境
express v3.0.6

csrfミドルウェア


express アプリケーションでCSRFの脆弱性に対応するためには、 csrf ミドルウェアを導入します。(CSRF対策が必要な場面では、必ず通信をSSLやTLSで暗号化する必要がありますが、この記事ではそこには触れません。)

csrf ミドルウェアでは、以下の処理を行います。
  • セッション開始時にトークンを生成し、セッション変数に保存する
  • GET, HEAD, OPTIONS 以外のメソッドでHTTPリクエストを受け取ったときに、リクエストbodyで渡されたトークンの値と,セッションに保存した値を照合する

ミドルウェアの設定


csrfミドルウェアはセッションにトークンを保存するので、必ずsession ミドルウェアの後に呼び出します。(14行目)
また以下の例では、ビューからセッションの_csrfの値にアクセスできるように、res.locals._csrf に値をコピーしています。(16行目)

app.js
//~
app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());


  app.use(express.csrf());

  app.use(function(req, res, next){
    res.locals._csrf = req.session._csrf;
    next();
  })


  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});
//~

ビューの設定


HTMLフォームに、セッションの _csrf の値を保存するhiddenフィールドを追加します。(2行目)

form.jade
form(method="POST", action="/")
  input(type="hidden", name="_csrf", value= _csrf) 
  br
  input(type="submit") 

Errorのハンドリング


フォームで送信した_csrf の値とセッションに保存しているトークンの値が一致しないと、Errorオブジェクトが生成されるので、Errorをハンドルする処理を追加します。
以下の例では、レスポンスステータスに403をセットし、403エラー用のエラーページを表示させています。(20行目)

app.js
//~
app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(express.csrf());
  app.use(function(req, res, next){
    res.locals._csrf = req.session._csrf;
    next();
  })
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));

  app.use(function(err, req, res, next){
    if(err.name === "Forbidden"){
      res.status(403).render('403')
    } else {
      next(err)
    }
  })
});
//~

2012年12月15日土曜日

Express アプリケーションを CoffeeScript で書く

実行環境
OS : 10.8.2
node : v0.8.6
express : v3.0.4
coffee-script : 1.4.0

以前の記事で、クライアントサイドの JavaScript を CoffeeScript 化しましたが、今回はサーバサイドの JavaScript を CoffeeScript で書けるようにします。

CoffeeScript をインストール


CoffeeScript は npm で、-g オプション を付けてインストールします。
$sudo npm install -g coffee-script

これで、コンソールから coffee コマンドが使えるようになります。
$ coffee -v
CoffeeScript version 1.4.0

Express が生成する JavaScript を CoffeeScript に変換する


既存の JavaScriptファイル(以下 jsファイル)を CoffeeScriptファイル(以下 coffeeファイル)に変換するには、js2coffee を使います。
$ npm install -g js2coffee

これで、コンソールから js2coffeeコマンドが使えるのようになるので、Expressが自動生成した jsファイルを、coffeeファイルに変換します。

$ express coffeeTest && cd coffeeTest && npm install

$ js2coffee app.js > app.coffee
$ js2coffee routes/index.js > routes/index.coffee

アプリケーションを起動


後は、app.coffee を 
$ coffee app.coffee

で実行すれば、Expressアプリケーションが起動します。
もちろん、app.coffee 以外のファイルもすべて CoffeeScript で記述できます。


コンパイル済み jsファイルを保存したい場合


上記の方法だと、コンパイル済みの jsファイルはファイルシステムに保存されません。今回は、単純に coffeeファイルと同じ場所に jsファイルを生成してもよいのですが、管理しやすいように、ファイルの配置を工夫してみます。

例えば、 『src ディレクトリに coffee ファイルを、app ディレクトリにコンパイル済み jsファイルを保存する』 場合は、ディレクトリ構成は下記のようになると思います。(app.coffee を移動すると、view と static のパスを書き換える必要があるので注意してください。)

ディレクトリ構成例
coffeeTest/
  |_ app/ <= コンパイル済みの js ファイルはすべてここに生成される
  |
  |_ src/ <= coffeeScript はすべてここに保存する
  |  |_ app.coffee
  |  |_ routes/
  |    |_ index.coffee 
  |
  |_ node_modules/
  |_ public/
  |_ views/
  |_ package.json
src ディレクトリ以下の coffeeファイルを appディレクトリ以下にコンパイルするには、下記コマンドを実行します。 ( -b は関数のラッパーをはずす、-o はコンパイル先ディレクトリを指定するオプションです。)
$ coffee -bco ./app ./src
後は app.js をターゲットにしてアプリケーション起動します。
$ node ./app/app.js
もしくは、アプリケーションのルートに server.js などのファイルを作成し、そこで require('./app/app') してしまっても良いかもしれません。

CoffeeScriptの変更を監視する


coffeeファイルを変更するたびにいちいち coffeeコマンドを実行するのは面倒なので、 coffee コマンドを -w オプションつきで実行して、src ディレクトリに変更があるたびに自動でコンパイルを実行するようにします。
$ coffee -wbco ./app ./src
さらに、このコマンドをCakefileにtask登録しておけば、一発で監視を開始できるのでおすすめです。

Cakefile
spawn = require('child_process').spawn
task 'watch', ->
  watch = spawn('coffee', ['-wbco', './app', './src'])

  watch.stdout.on 'data', (buffer)->
    if(buffer)
      console.log buffer.toString().trim() 

  watch.stderr.on 'data', (buffer)->
    if(buffer)
      console.log buffer.toString().trim() 
実行
$ cake watch

テンプレートモジュールを使う


以上、手動で CoffeeScript の設定を行ってきましたが、 express-coffeeモジュールを使うと、CoffeeScript で記述する前提でExpressアプリケーションのひな形を生成してくれます。testスクリプトもCoffeeScriptでかけるようになっているので、是非チェックしてみてください。

2012年12月9日日曜日

[node.js, undersore.js]複数の非同期処理の完了を待ち受ける

実行環境
node.js v0.8.3
undersore.js 1.4.3

node.js のプログラムで、複数の非同期処理の終了を待ってから後続の処理を実行する場合、underscore.js の after 関数がとても便利だったので紹介します。

underscore.js のインストール
$ npm install underscore

after 関数

underscore.js の after 関数では、第1引数で渡した数値回、戻り値で返す関数が実行されると、第2引数のコールバックが実行されます、、といってもよくわからないので、
例として、複数のファイルを非同期で削除し、すべてのファイルの削除が完了したらメッセージを表示するプログラムを作成しました。

//カレントディレクトリの、foo, bar, hoge というファイルを非同期で削除する。
//すべてのファイルの削除が完了したら、コンソールにメッセージを表示する。
var fs = require('fs'),
     _ = require('underscore')

var targets = ['foo', 'bar', 'hoge'];

//ファイルの削除を待ち受ける関数
var displayResult  = _.after(targets.length, function(){
  console.log('ファイルの削除が完了しました。');
});

_.each(targets, function(target){
  fs.exists(target, function(exists){
    if(exists){
      fs.unlink(target, function(err){
        if(err) throw err;
        console.log(target + " を削除しました。");
        displayResult(); //ファイルの削除を通知
      });
    } else {
      displayResult(); //ファイルの削除を通知
    }
  });
});

console.log('最初にここが実行されます。');

実行結果

最初にここが実行されます。
hoge を削除しました。
bar を削除しました。
foo を削除しました。
ファイルの削除が完了しました。

想定通りの順番で処理が実行されました!

しかし、上記のサンプルを見てもお分かりの通り、こんなに短いプログラムでも、処理が行ったり来たりしていて、もうスパゲッティ化の兆候が現れはじめてます。。
複数の非同期処理を制御する場合は、かなり慎重にプログラミングする必要がありますね。

でも、after だけでなく、underscore.js には、便利な関数(extend, each, map など)がたくさん用意されているので、積極的に利用していこうと思います。

まとめ


  • 複数の非同期処理の完了を待ち受ける場合は、 underscore.js の after 関数が便利。
  • コードのスパゲッティ化には十分注意する!

2012年12月1日土曜日

[node.js + express]クライアントサイドの JavaScript を CoffeeScript化 & 複数ファイルを結合 & 縮小化する

(2013/1/14 追記) サーバーサイドのプログラムをCoffeeScript で記述する方法をこちらにまとめました。

実行環境
OS: Mac OS X 10.8.2
node: v.0.8.3
express: v3.0.3
connect-assets: v2.3.3

CoffeeScript の導入


クライアントサイドの CoffeeScript のコンパイルや、複数の JavaScript ファイルの結合、縮小化(Rails の Asset Pipleline 機能と同等の機能)をするには、connect-assets モジュールが便利です。
今回の記事では、 connect-assets で JavaScript を扱う基本的な方法を説明します。(なお、このモジュールでは css も同様に扱えますが、この記事では触れていません。)


connect-assets の設定


require してミドルウェアを設定します。
app.use(require('connect-assets')());


CoffeeScript(JavaScript) ファイルの保存場所


アプリケーションの直下に asset/js というディレクトリを作成し、ここに .coffee(.js) ファイルを保存します。
myApplication/
  |_ assets/
      |_ js/
          |_application.coffee
          |_jquery.js


view から JavaScript をロード


view からコンパイル済みの JavaScript をロードするには、 js() 関数にファイル名を渡します。
この関数はコンパイル済みの JavaScript を指す <script> タグを文字列で返すので、jade で実行する場合は下記のように != で呼び出す必要があります。
!= js('application')

レンダリング結果は下記のとおり
<script src="/js/application.js"></script>


ファイルの依存関係


CoffeeScript(JavaScript)ファイルの依存関係は、コメントで定義します。例えば、以下のようなファイル構成で、
myApplication/
  |_ assets/
      |_ js/
         |_ application.coffee
         |_ foo.coffee
         |_ bar.coffee

application.coffee が foo.coffee と bar.coffee に依存している場合は、application.coffee で以下のように依存関係を定義します。(JavaScript の場合は //= )

application.coffee
#= require foo.coffee bar.coffee

この状態で jade で != js('application') を実行すると、下記の結果が得られます。
<script src='/js/foo.js'></script>
<script src='/js/bar.js'></script>
<script src='/js/application.js'></script>

特定のディレクトリ以下のファイルをすべて依存ファイルとして指定するには、下記のように記述します。
#= require_tree ./


結合・縮小化


アプリケーションを production モードで実行している場合は、依存ファイルの結合と、ファイルの縮小化が実行されます。結合・縮小化済みファイルは、デフォルトでは builtAssets ディレクトリに保存されるので、あらかじめ assets ディレクトリと同じ構成で builtAssets を作成しておく必要があります。
myApplication/
  |_ assets/
  |  |_ js/
  |     |_ application.coffee //foo.coffee と bar.coffee に依存
  |     |_ foo.coffee
  |     |_ bar.coffee
  |
  |_ builtAssets/
     |_ js/

この状態で production モードでアプリケーションを実行し、下記 jade ファイルを実行すると、
!= js('application')

以下のように結合・縮小化されたファイルが生成されました。
myApplication/
  |_ assets/
  |  |_ js/
  |     |_ application.coffee
  |     |_ foo.coffee
  |     |_ bar.coffee
  |
  |_ builtAssets/
     |_ js/
        |_ application-38a0083f4a868f2797aba944e5ce3ad6.js

js() が生成する <script> タグは、src 属性でこのファイルを指定します。
結合前のファイルに変更があるたびに、新しいファイルが生成されますが、js() 関数は常に最新のファイル指定する <script> タグを返してくれます。

さらに、結合済みファイルは Expires ヘッダがかなり長く設定されるので、とても効率の良い JavaScript の配布が可能となります。

まとめ


  • connect-assets モジュールを使うと、JavaScript の結合と縮小化、 CoffeeScript での記述が可能になる。
  • .js, .coffee ファイルは、 assets ディレクトリに配置する。
  • view からは、js() 関数で JavaScript をロードする。
  • アプリケーションを production モードで実行すると、コンパイル、結合、圧縮済みのファイルが、 builtAssets ディレクトリに生成される。

2012年11月28日水曜日

[node.js + express]フォームで送信されたデータにアクセスする

実行環境
OS Mac OS X 10.8.2
node v.0.8.3
express v3.0.3

bodyParser ミドルウェア


クライアントから express アプリケーションへ HTTP の POST メソッドでデータ送信した場合、( 正確には Content-Type が application/x-www-form-urlencodedか multipart/form-data のリクエストを送信した場合) リクエストが bodyParser ミドルウェアを経由すると、req.body オブジェクトにメッセージボディの値が追加されます。

また、メッセージボディの各パラメータ名が JavaScript のオブジェクトとして解釈できる場合は、オブジェクトにパースしてから req.body に追加してくれます。
もちろん、配列やネストしたオブジェクトでも問題なくパースしてくれます。

例として、entry というリソースを生成するフォームを jade で作成しました。

_form.jade
form(method="POST", action="/entries")

  label お名前
    input(type="text", name="entry[author][name]", id="entry[author][name]")
  br
  label タイトル 
    input(type="text", name="entry[title]", id="entry[title]")
  br
  label 本文 
    textarea(name="entry[body]", id="entry[body]")
  br
  lebel カテゴリ(複数可)
    input(type="checkbox", name="entry[category][]", value="diary")
    | 日記
    input(type="checkbox", name="entry[category][]", value="memo")
    | メモ 
  br
  input(type="submit")

上記フォームからのリクエストが bodyParser ミドルウェアを経由すると、 req.body.entry は下記のようなオブジェクトになります。

{ entry:
   { author: { name: 'takeshi' },
     title: 'test',
     body: 'This is test.',
     category: [ 'diary', 'memo' ] 
   }
}

関連性のある値をまとめることで、コードの可読性が上がるとともに、新しいオブジェクトを生成する際など、以下のような簡潔な記述が可能となります。

app.js
app.use(express.bodyParser());

var Entry = require('./models').Entry; 
app.post('/entries', function(req, res){

  //mongoose で Entry オブジェクトを生成
  var new_entry = new Entry(req.body.entry);
  new_entry.save(function(err){
    res.redirect('/entries');
  });
})


まとめ

  • bodyParser ミドルウェアを使うと、 req.body にリクエストボディの値が追加される。
  • リクエストボディのパラメータ名を JavaScript のオブジェクトとして解釈できる値にすると、オブジェクトにパースして req.body に追加してくれる。

2012年11月24日土曜日

[node.js + express]フォームデータ を PUT や DELETE で送信する

実行環境
node v0.8.3
express v3.0.3

HTTPメソッドの書き換え


methodOverride ミドルウェアを使うと、フォームのデータを PUT や DELETE といった、POST, GET 以外の HTTPメソッドで(擬似的に)サーバーに送信することが可能になります。

設定は簡単で、送信したい HTTPメソッド名を、_method という名前でフォームから POST で送信するだけです。下記は、フォームデータを DELETE メソッドとして送信する jade のサンプルです。
form(method="POST", action="/entries/#{entry._id}")
  input(type="hidden", name="_method", value="DELETE" )

  input(type="submit", value="削除" )

このフォームで設定されているメソッドはあくまで POST のため、フォームデータは通常通り POST メソッドで送信されます。
しかし methodOverride を使用しているアプリケーションは、送信された _method の値から、リクエストは DELETE メソッドで送信されたと解釈します。(実際には、req.method の値を _method の値で上書きしています。methodOverride の詳しい処理は こちら のソースコードを確認してみてください。)

そのため、上記のフォームから送信されたリクエストは、app.post() ではなく、app.delete() でマッピングされたルートとマッチします。
app.delete('/entries/:id', routes.entries.destroy);

RESTful な URL


methodOverride の HTTPメソッド書き換え機能を利用することで、以下のような RESTful な URL を構築することができます。

app.js
app.get ('/entries', routes.entries.index);
app.post('/entries', routes.entries.create);

app.get('/entries/new'     , routes.entries.new);
app.get('/entries/:id/edit', routes.entries.edit);

app.get   ('/entries/:id', routes.entries.show);
app.put   ('/entries/:id', routes.entries.update);
app.delete('/entries/:id', routes.entries.destroy);

まとめ


methodOverride ミドルウェア を使うと、 form から 任意の HTTP メソッドでデータをサーバーに送信できる。
HTTPメソッド名は、_method という名前で送信する。

2012年11月21日水曜日

[node.js + express] 環境ごとに設定を切り替える

実行環境
node.js v0.8.14
express v3.0.3

環境変数 NODE_ENV


express は、アプリケーションの実行環境を、app.settings.env の値で判断しています。
app.settings.env は、 expressアプリケーション実行時に、環境変数 NODE_ENV の値で初期化されます。(環境変数 NODE_ENV が定義されていない場合は、'development' で初期化します。)

以下のコマンドで、アプリケーションの実行時に環境を指定できます。
$ export NODE_ENV=production && node app.js

app.configure で環境ごとの設定


app.configure では、1番目の引数で設定を反映させる環境を, 2番目の引数で設定用コールバックを指定します。
1番目の値が実際の環境( NODE_ENV, app.settings.env )と一致するときのみ、第2引数のコールバックを実行します。

また、 引数にコールバックのみ渡した場合は、すべての環境で設定用コールバックが呼び出されます。

app.js
//全環境共通の設定
app.configure(function(){
});

//開発環境用の設定
app.configure('development', function(){
});

//本番環境用の設定
app.configure('production', function(){
});

サンプル


express コマンドで生成した app.js を確認すると、development 環境のみの設定として、errorHandler ミドルウェア を呼び出しています。

app.js
app.configure('development', function(){
  app.use(express.errorHandler());
});

このミドルウェアは、エラー内容をフォーマットしてレスポンスで返してくれるため、開発時には非常に役に立ちます。
しかし、本番環境で実行してしまうと、アプリケーションの内部情報をユーザーに表示させることになってしまうため、開発環境のみに限定した設定となっています。

そのため、本番環境では、エラー時には専用のエラーページを表示させる、などの対策が必要になります。

app.js
app.configure('development', function(){
  app.use(express.errorHandler());
});

app.configure('production', function(){
  app.use(function(err, req, res, next){
    console.error(err.stack);
    res.status(500);
    res.render('500', {title: "エラーが発生しました。"});
  });
})

まとめ


express アプリケーションの環境は、環境変数 NODE_ENV で設定する。
app.configure() で、環境ごとの設定を定義する。