grunt で Content Security Policy をテストする

Content Security Policy (CSP)をgrunt-contrib-connectで設定するのにはどうしたら良いかという話。

やり方としては、grunt-contrib-connect タスクで CORS を有効にする - メモログと同様、middlewareのオプションに追加する。

middleware: function (connect, options) {
  return [
    function (req, res, next) {
      res.setHeader('Content-Security-Policy-Report-Only', 
        "default-src *; script-src 'self'; style-src 'self' 'unsafe-inline'; report-uri 'localhost'");
      next();
    },
    // Serve static files.
    connect.static(options.base),
    // Make empty directories browsable.
    connect.directory(options.base)
  ];
}

こんな感じ。上記では、ポリシーのテストを目的にしているので、「Content-Security-Policy-Report-Only」を使用しています。また、report-onlyモードではreport-uriの設定が必須なので、それを追加しています。report-uriにはUsing CSP violation reports - Security | MDNによると、CSPにひっかかった場合にその内容をreport-uriにPOSTで送ってくれます。

これで、たとえばjasmineのテストをするときにCSPを有効にしてテストすることで違反した場合にレポート送らせることができるなと思ったのですが、まだそこまでは試していません。

というメモ。