NewRelic BrowserとCSP、お前らと仲良くやっていく。

早いもので、もう2019年12月14日になってしまった。そう、この記事はNew Relic Advent Calendar 2019向けに書いたものだ。

CSP -  Content Security Policy

みんなどのくらいCSPを設定しているだろうか？　もしや、ご存知ない？　という方は↑のリンクを舐めるように読んでほしい。

端的に言うと、CSPはWEBサイトで意図せず埋め込まれたJavaScriptの実行や外部のリソースを制限するものだ。こいつを設定することで、XSS他の攻撃に対する防御力を高めることができる。

現代において、設定しない理由はないので、是非導入しよう。

NewRelicBrowserをつかっているがCSPを設定したい

設定に関するドキュメントはちゃんとある。設定例も掲示されているが、そのままでは使えない。

In order to obtain accurate browser performance metrics, New Relic Browser requires the use of a small, inline JavaScript snippet. New Relic carefully reviews the inline JavaScript to prevent Cross-Site Scripting (XSS) and other potential vulnerabilities.

inline JavaScript snippet、つまり、<script>タグ内コードに実行許可をあたえなければいけない。`unsafe-inline`、こいつを設定しないと、NewRelic Browser agentは動作しなくなってしまう。

Content-Security-Policy: default-src 'self'　'unsafe-inline' https://js-agent.newrelic.com https://bam.nr-data.net

ちなみにだが、上記だけだと、画像の読み込みやHTMLに埋め込まれたCSSはポリシー違反になる。大体一般的な設定をするとしたらこんなかんじだろうか。内容はなんとなく読んだら理解できると思う。

<!--metaタグでの設定例-->  
<meta http-equiv="Content-Security-Policy"
       content="default-src 'self' 'unsafe-inline' https://*.google-analytics.com https://*.newrelic.com https://bam.nr-data.net;
                style-src 'self' 'unsafe-inline';
                img-src https://* data:;
                font-src 'self' data:;
                media-src 'self' data:;"
 >

CSPエラーを通知したい

エラーを監視したい、大抵の人ならそう思うはずだ？

CSPもエラー通知の仕様がある。 `report-to`パラメータを設定すれば、違反の内容をサーバに通知してくれる。ただし、`report-to` はHTTPヘッダ専用パラメータだ。

今更ながらなのだが、metaタグでCSP設定したい、その上でエラーも知りたい……。なので、自力でCSP違反があったらNewRelicに通知する。

<script>
 document.addEventListener("securitypolicyviolation", (e) => {
   if (newrelic) {
     newrelic.noticeError(new Error(`securitypolicyviolation ${e.violatedDirective}: ${e.blockedURI}`));
   }
 });
</script>

CSP違反はSecurityPolicyViolationEventでとることができる。そこにNewRelicのnoticeErrorを組み合わせる。みたまんまだ。addPageActionでも通知できるが、当然エラー扱いにはならずクエリかかないと検知数や詳細わからないしだるい（アラートもエラーとは別に設定が必要だろう)。noticeErrorはそのままエラー扱いにしてくれるので採用した。

これでNewRelic Browserを使っているサイトのCSPは完璧だ

安心して年を越すぞ！

その他

なぜNewRelic Browserなのか？

多分君たちが一番知りたい内容だろう。飲みながらはなそう。

unsafe-inline

不吉な設定名だと思ったことだろう。その直感は間違いではない。本来は意図せずサイトに埋め込まれた `<script>alert('foo')</script>` みたいなコードをブロックするための設定だ。仕様上の制限とはいえ、こいつを許可しないといけないのは、結構つらい。しかし、Google Analyticsもこの設定が必須である。大抵の計測タグはそうなっている。我々はこの世の中を受け入れるしかない。

report-to

NewRelicでこいつがうけとれるのかどうか、NewRelicと組み合わせるいいかんじの設定があるのかどうか、そもそも調べても検証してもない。後続よ、あとはたのむ。

CSPエラー通知してうれしいことあんの？

「だってもうブロックされてんじゃん？　問題なくね？」その疑問はもっともだ。ここでわかるのは、攻撃らしき形跡があるのと、HTMLのサイタイジングにおもらしがあることぐらいだ。でもまぁ、おもらしはバグなので、知れた方がよいよね？