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を常に最新版に維持できるならバージョン番号を隠す必要はないかもしれませんが、攻撃者にヒントを与えることはないでしょう。バージョン番号を隠してブラウザのキャッシュを考慮するなら、ここら辺が落としどころなのではないでしょうか。

お勧めコンテンツ

get_currentuserinfo(2011年6月21日 登録)

mixed get_currentuserinfo( )
現在のユーザ情報を読み込む。

is_network_admin(2011年6月22日 登録)

bool is_network_admin( )
リクエストページがネットワーク管理者ページ(/wp-admin/network/内)か調べる。

get_parent_theme_file_path(2017年4月5日 登録)

string get_parent_theme_file_path( string $file = '' )
親テーマ内にあるファイルのパス名を取得する。

delete_metadata(2014年3月11日 登録)

bool delete_metadata( string $meta_type, int $object_id, string $meta_key [ , mixed $meta_value = '' [ , bool $delete_all = false ] ] )
メタ情報の値を削除する。

is_search(2009年11月26日 登録)

bool is_search( )
要求されているページが、検索結果ページか調べる。

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