CSSやJavaScriptファイルのバージョン番号を変える

CSSやJavaScriptファイルのバージョン番号を変える - キャッシュの更新を考慮してバージョン番号を隠す

説明

WordPress 4.7系の脆弱性をついた攻撃も落ち着いた感じなので、標準でヘッダーやフッター内に出力されるWordPressのバージョン番号について一考しました。

HTML内のWordPressのバージョン番号

まずはWordPressのバージョン番号を類推できる情報がどの程度出力されているか確認します。標準テーマ「Twenty Seventeen」を親テーマとした子テーマを適用している場合、ユーザーが未ログイン状態では次のような内容が出力されています(ユーザーがログインしている状態はもう少し増えます)。

// 絵文字表示用スクリプト
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source": {"concatemoji":"http:\/\/localhost\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.3"}};

// テーマのCSSファイルを指定するlink要素
<link rel='stylesheet' id='parent-style-css'  href='http://localhost/wp-content/themes/twentyseventeen/style.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://localhost/wp-content/themes/child-theme/style.css?ver=4.7.3' type='text/css' media='all' />

// 作成ツールを示すmeta要素
<meta name="generator" content="WordPress 4.7.3" />

// 埋め込み要素の表示を支援するスクリプト
<script type='text/javascript' src='http://localhost/wp-includes/js/wp-embed.min.js?ver=4.7.3'></script>

これらを分類すると、meta要素、link要素のCSSファイル指定、script要素のJavaScriptファイル指定になります。

meta要素を削除する方法は、ヘッダー情報が出力される(wp_headアクションの実行)前に以下のコードを指定します。これに対応するプラグインもあるので、それらを利用してもいいでしょう。

remove_action( 'wp_head', 'wp_generator' );
バージョン番号を変える

いよいよ本題のlink要素のCSSファイル指定とscript要素のJavaScriptファイル指定です。ファイルのURL指定にバージョン番号を追加している目的の1つは、バージョンアップの際にキャッシュ問題を回避することでしょう。というわけで、バージョン情報をそのまま出力せず、バージョンアップ時にキャッシュ問題を回避する内容に変更したいと思います。

$theme_default_version = substr( hash( 'sha256', filemtime( ABSPATH . WPINC . '/version.php' ).filemtime( get_stylesheet_directory(). '/style.css' ) ), 3, 8 ) ;

この例では、WordPressのバージョン番号を記載したversion.phpと現在のテーマのstyle.cssの更新日時をベースにハッシュ値を生成し、その一部を切り出した値にしています。これであればどちらかのファイルが更新された場合に値が変わることが期待できます。

CSSファイルのバージョンパラメータの変更は、'wp_print_styles'フィルターを使用します。

add_action( 'wp_print_styles', 'theme_wp_print_styles', 1000 );
if ( ! function_exists( 'theme_wp_print_styles' ) ) {
	function theme_wp_print_styles() {
		global $theme_default_version;
		wp_styles()->default_version = $theme_default_version;
	}
}

JavaScriptファイルのバージョンパラメータの変更は、'wp_print_scripts'フィルターは使用せず、'script_loader_src'フィルターを使用します。これは'wp_print_scripts'フィルターを使用してもwp-emoji-release.min.jsのバージョンパラメータを変更できないためです。

add_filter( 'script_loader_src', 'theme_script_loader_src' );
if ( ! function_exists( 'theme_script_loader_src' ) ) {
	function theme_script_loader_src( $src ) {
		global $theme_default_version;
		return str_replace( 'ver='.get_bloginfo( 'version' ), 'ver='.$theme_default_version, $src );
	}
}

ここではWordPressのバージョン番号が指定されているファイル指定のみを変更するようにしています。

バージョン番号を隠す必要性

今回、弊社サイトのリニューアルで「Twenty Seventeen」の子テーマを採用しました。出力されたHTMLを見るとWordPressのバージョン番号が多数出現します。WordPressを常に最新版に維持できるならバージョン番号を隠す必要はないかもしれませんが、攻撃者にヒントを与えることはないでしょう。バージョン番号を隠してブラウザのキャッシュを考慮するなら、ここら辺が落としどころなのではないでしょうか。

お勧めコンテンツ

add_post_meta(2010年2月13日 登録)

bool add_post_meta( int $post_id, string $meta_key, mixed $meta_value [ , bool $unique = false ] )
投稿情報にカスタムフィールド情報を追加する。

get_query_var(2011年1月14日 登録)

mixed get_query_var( string $var )
投稿検索に関連する変数の値を取得する。

strip_fragment_from_url(2015年12月10日 登録)

string strip_fragment_from_url( $url )
URLからフラグメント部分('#'以降の文字)を取り除く。

wp_list_categories(2012年2月10日 登録)

string wp_list_categories( [ mixed $args = '' ] )
カテゴリーリストを表示または取得する。

add_theme_page(2011年5月26日 登録)

mixed add_theme_page( string $page_title, string $menu_title, mixed string $capability, string $menu_slug [ , mixed $function = '' ] )
外観メニューにサブメニューを登録する。

最終更新日時 : 2017-03-14 16:34