[wp]セキュリティ面における脱SiteKitByGoogleの必要性と代案

つらい。

CSPと食い合わせが悪い
どうすんの
参考
CSP対応の処置例
1. 注意

CSPと食い合わせが悪い

WEBサイト脆弱性確認項目の中に、「Content Security Policy」の設定がある。

WEBサイト上においてどこの何をどうやって使うかを明示することで、変なところからの余計なことを突っぱねるという内容。セキュリティ意識からすると妥当だけど、通常のWEBサイトはあれやこれやを突っ込むのでやっぱりよろしくない。広告タグなりアナリティクスなりCDNなり、くさるほどある。それぞれ指定しなきゃいけないのは超だるい。

詳しいことは省くけど、要するにSiteKitを使うには「’unsafe-eval’」を設定する必要がある。これは特定の記述に関わる内容で、無効にするとSiteKitが動かなくなる。

「’unsafe-eval’」の使用はCSPの作法的に、端的に言ってNG。「どうしてもという場合は」とかいいながら、チェックしたらマイナス判定を食らう。

なのでSiteKitを使わない選択を迫られる。

どうすんの

諸々だるいのでGoogleタグマネージャ（GTM）で管理する。プラグインを使わずにGTM既存の導入方法でやっていけばCSPが納得する形になる。GTMを使うとアナリティクスやらなにやらを一元管理できて便利。ページの設置タグがGTM用だけで終わる。なのでまあいいんじゃないでしょうか。

流れ的にこう。

GTMでWEBサイトのコンテナを作ってWEBサイトに貼り付ける
GTMに使ってたアナリティクスを連携させる
SiteKitを無効化する
アナリティクスのリアルタイムで動作チェック

参考

公式の内容で事足りる。

[GA4] Google タグマネージャーで Google アナリティクス 4 を設定する - タグマネージャーヘルプ

この記事は、Google タグマネージャー内で Google アナリティクス 4（GA4）のタグを維持したい方を対象としています。Google タグマネージャーのウェブコンテナが GA4 にイベントを送信するために必要な操作について説明...

最低限の設定はこう。

CSP対応の処置例

GTMタグの貼り方は作法が色々あるだろうで割愛。functions.phpとかphpのincludeとかで上手いことやってください。

それよりも、そのまま貼って終わりにできないので各種設定について。

まずコードは最終的に<script>のベタ貼りなので、CSP準拠の環境ではそのままだと使えない。nonceを使うのでfunctions.phpでやっていく。

<?php
add_action('after_setup_theme', function(){
    if(is_admin()) return;
    ob_start(function ($buffer_html) {
        $nonce = wp_create_nonce( 'content-security-policy' );
        $buffer_html = str_replace('<script', '<script nonce="'.$nonce.'"', $buffer_html);
        return $buffer_html;
    });
}, 10000);

global $headerCSP;
$nonce = wp_create_nonce( 'content-security-policy' );
$headerCSP = "Content-Security-Policy:";
$headerCSP .= "script-src: https://tagmanager.google.com; 'nonce-{$nonce}'";
$headerCSP .= "style-src: https://tagmanager.google.com https://fonts.googleapis.com;";
$headerCSP .= "img-src: https://ssl.gstatic.com https://www.gstatic.com;";
$headerCSP .= "font-src: https://fonts.gstatic.com data:;";

HTTPヘッダー各種は公式が案内してる通り。

まずnonceを生成、<script>付与。今回はWPなのでCSPはhead()を使うため、その中身をグローバル変数で作成。

header.phpでグローバル変数を受け取ってheader()に入れる。

<?php
global $headerCSP;
header($headerCSP);
?>

functions.phpでheader()を仕込めたらheader.phpをいじらずに済むのだけど、なんか方法ありますかね。

注意

上記CSPの内容はGTM用の内容だけを書いてるので、本当にこれを適用させると多分WEBサイトがぶっ壊れます。やっちゃだめです。分からなかったらそもそもやらなくていい範囲なんで、無理しないでください。WEBサイト制作じゃなくてセキュリティ側の、保守の作業なので別作業です。分からなかったら分からないで触らないようにしましょう。

とはいえ、なんかこっちのが都合がいいらしいよでGTMを組み込むのは親切で素敵だと思います。