これだけで解決する場合がある
セキュリティの話です
「Cross-Domain JavaScript Source File Inclusion」という警告がある。
ZAP – Cross-Domain JavaScript Source File Inclusion
The world’s most widely used web app scanner. Free and open source. ZAP is a community project actively maintained by a ...

Cross Domain JavaScript Source File Inclusion
Cross-domain JavaScript source file inclusion is a warning that can affect a web application that runs one or more Javas...
雑に言って、他所から引っ張ってきたjs(CDN)を使ってるけど、大丈夫なんかそれ?って話。
それを解決する方法の一つ。これで解決する場合もあるし、解決のための一つの要素に過ぎないこともある。
参考
言い回しが多少変わるだけで、この記事の内容が全てですね。
CDNを使う際、コピー元のコードに「integrity」「crossorigin」とかの属性が付いてある。貼り付ける際にこれをちゃんと入れておきましょうねという話。
要するにこういうこと
例えば、jQuery公式のCDNはこんな感じになってる。
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
だから、これをそのまま使いましょう。
ぶっちゃけこれ↓でも動くんですよ。コードはスッキリするけどセキュリティ的にアウトなんですよ。
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
WordPressでやっていく場合のメモ
header.phpにまんま書く分には何も問題ない。
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
functions.phpでやっていく場合に支障が出る。
<?php
add_action('wp_enqueue_scripts', 'add_headFiles');
function add_headFiles() {
if(is_admin()) return;
wp_enqueue_script('jQuery', 'https://code.jquery.com/jquery-3.7.0.js', array());
}
add_filter('script_loader_tag', 'custom_script_loader_tag', 10, 2);
function custom_script_loader_tag($tag, $handle) {
if($handle == 'jQuery') {
return str_replace('></script>', ' integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>', $tag);
}else{
return $tag;
}
}
挿入タグ(wp_enqueue_script)では任意の属性の追加ができないので、追っかけで置換を噛ませて対応する。
やっていくことまとめ
- 使用してるCDNを洗い出す
- セキュリティ関連の属性をちゃんと記載する
- srcしか用意のないCDNがある場合(GitHub産とか)、別のCDNを拾うかDLして自鯖に上げて使う
コメント