事象はタイトルの通り、webpack でバンドルされた styled-components が、SCP を有効にした信頼されないコンテンツとして読み込めなくなってしまった。
https://github.com/styled-components/styled-components/issues/887
この issue で議論されている通り、インライン化された styled-components のコードを読み込むには unsafe-inline で回避しなければならないと怒られる。
もちろん unsafe-inline なんて汚い手段を取りたくないので調べた結果、 webpack 環境下では__webpack_nonce__を使うことでよしなに nonce 属性を付与してくれるらしい。
https://github.com/styled-components/styled-components/issues/887#issuecomment-376479268 https://github.com/styled-components/styled-components/issues/887#issuecomment-376858712
この辺りのコメントを参考に、テンプレートで styled-components が読み込まれる前に nonce の生成をして __webpack_nonce__ へ引き渡すようにしてみたが何やら動作しない。
もう少し調査を進めると、どうやら開発環境だとうまく動作しないようなコメントを見かけた。
どうやらプロダクションビルドしないと __webpack_nonce__ が想定した動作にならないようで、実際プロダクションビルドをすることで正常に nonce が styled-components 側にも割り当てられるようになった。(この辺りはかなり対症療法的なやり口だったので実際にどういう仕組みで動作しているのかまでは確認していない)
styled-components の CSP 対応はどうなってるんだという話だが、Client-side nonce support #2363を見てる感じでは何かする気はなさそうなので webpack 側の機能でなんとかしていこうというところだろうか。
調査中に絶望している記事をいくつか見つけたので誰かがこれを見て救われることを祈ってます。(実際これで救われるかは知らないけど)