当サイトのブログ記事をPageSpeed Insightsで確認したところ上のスクリーンショット画像の赤丸部分で示すように「４件の脆弱性が検出されました」との指摘があります。 またJavaScriptライブラリのバージョンは相当古く、jQuery@1.11.3 と表示されていました。
訂正：注意ポイント
6月1日に、ACTION ver20230520 にアップデートしました。 このアップデートによってテーマファイルが書換えられjQueryは「jQuery@1.11.3」になります。 当サイトのページをPageSpeed Insightsで再確認すると理由は不明ながら脆弱性の警告は出なくなっていました。 このことから、ご自身のページをPageSpeed Insightsで確認し、脆弱性の指摘が無ければ当記事にある、「jQuery@3.6.3」への変更は不要と思われます。 （2023/6/2:追記）
セキュリティの脆弱性を指摘されているので、非常に気になりこれを解決する方法を探ってみました。
ポイント
脆弱性を放置すると、他者が自サイトの内容を改竄する可能性がある一方、闇雲にjQueryのバージョンを上げることでWeb画面上の動作にトラブルが生じる恐れがあり、JavaScriptも書き換えが必要になる場合もあり得ます。
jQueryのバージョン変更を行う際は、以上の点に留意する必要があります。 今回の解決策は、脆弱性の指摘を回避するために実験的にAFFINGER6で設定されているjQueryのバージョン変更を行ったもので、Web画面上のトラブルについては考慮していないことを予めご承知おきください。
jQuery@1.11.3 の特定
jQueryのバージョンを調べる方法は、Chromeブラウザで ブログページを表示させて 表示 ＞ 開発/管理 ＞ 要素の検証 を選択した後 Console タブを選択して、 > $.fn.jquery を実行すればjQueryバージョンを確認することができます。
当ブログのページを上のやり方で jQueryバージョンを調べると '1.11.3' と表示されました。
また、当ページのHTMLソースを表示させて「 1.11.3 」で文字検索して確認すると、下の様にGoogleのCDN（Contents Delivery Network）を使ったjQuery の読込みを行っていることが分かりました。（Google Hosted Library参照）
html <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3' id='jquery-js'></script>
ここまで来ますと、どうもAffinger6に起因している可能性があります。 そこで、失礼ながら、Affinger6テーマを使用されていると思われる他のサイトのページをPageSpeed Insights で確認したところ、やはり脆弱性が指摘されており、JavaScriptライブラリのバージョンも jQuery@1.11.3 になっていることから、Affinger6テーマ特有のものと想定されます。
ということで、Affinger6の親テーマファイルの中の functions.php に当たりをつけて調べたところ、297行以降にHTMLに出力されるjQuery CDNの読込みコードを突き止めました。 なお、当ブログのテーマはAffinger6(バージョンは 20221111）です。
|
297 298 299 300 301 302 303 304 305 |
wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3', false ); |
297行目：wp_deregister_script で、Wordpressに同梱されている、jQueryを除外し
298行目：wp_enqueue_script でjQuery CDNのバージョンを1.11.3 に指定しています。
なぜ、Affinger6でjQuery@1.11.3を指定しているか？多分MicrosoftのIE8に対応する理由からかも知れませんが本当のところは良くわかりません。
jQueryのバージョン書換え
現在jQueryの最新バージョンは、jQuery@3.6.3 です。（Google Hosted Library参照） 取敢えず親テーマファイルのfunctions.phpのコードを以下の赤字の様に書き換えてバージョンアップしてみました。
functions.php wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js', array(), '3.6.3', false );
書換え方法
WordPress管理画面の外観タブから「テーマファイルエディタ」画面に移り、「編集するテーマを選択」でAFFINGER Child から 親ファイルのAFFINGER を選択します。 「テーマのための関数・functions.php」をクリックすると、phpコードが展開されますので、297行目以降の2箇所 1.11.3 を 3.6.3 に変更書換えし「ファイルの更新」ボタンを押して完了です。
（ロリポップサーバですと、管理画面の「ロリポップ！FTP」から、当該 親テーマの functions.php を選択し当該コード(3.6.3)に書換えて保存すればOKです。）
注記：子テーマのfunctions.phpを部分的に追記するのはNGです。 親テーマのfunctions.phpを直接変更する必要があります。 また、Affinger6のバージョンアップがあった場合、functions.phpが書換えられることがありますので、PageSpeed InsightsでjQueryバージョンを再確認する必要があります。
バージョン書換え後、PageSpeed Insightsで再確認
以下のスクリーンショット画像の様に、「脆弱性」の指摘が無くなって、「おすすめの方法」スコアーが92から100にアップし、JavaScriptのライブラリ・バージョンが指定した通りの'3.6.3'になっているのが確認出来ました。
以上、PageSpeed Insightsでチェックすると「JavaScriptライブラリの脆弱性が検出」された場合の解決策でした。 今の所、Affinger6でjQuery@3.6.3にバージョンアップしたことによる不具合の発生は無く、取敢えず様子を見ることにしています。 今後、Affinger6のバージョンアップで、jQueryのバージョン指定が出来るようになることを期待しています。