メモログ

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 を有効にしてテストすることで違反した場合にレポート送らせることができるなと思ったのですが、まだそこまでは試していません。

というメモ。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。