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_adjacent_post(2012年2月1日 登録)

object get_adjacent_post( [ bool $in_same_cat = false [ , mixed $excluded_categories = '' [ , bool $previous = true [ , string $taxonomy = 'category' ] ] ] ] )
現在の投稿記事に隣接する投稿記事を取得する。

get_template_directory(2010年1月14日 登録)

string get_template_directory( )
現在使用しているテーマのパス名を取得する。

next_comments_link(2010年2月4日 登録)

void next_comments_link( [ string $label = '' ] )
次のコメント一覧ページのリンクテキストを表示する。

get_post_format_string(2011年9月11日 登録)

string get_post_format_string( [ string $slug ] )
投稿フォーマット名を取得する。

is_front_page(2011年2月17日 登録)

bool is_front_page( )
フロントページか調べる。

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