具有完整性和交叉origin的Wordpress脚本

php bootstrap-4 wordpress integrity

2022-08-31 00:05:41

我试图在WordPress上使用wp_register_script和wp_enqueue_script函数来对脚本进行排队，该脚本具有两个属性：“完整性”和“crossorigin”。

通常我使用PHP，我的代码看起来像这样：

wp_register_script('jquery', 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://code.jquery.com/jquery-3.1.1.slim.min.js', false, null);
wp_enqueue_script('jquery');

使用任何其他脚本。wp_register_script采用五个参数（在本例中为四个），$handle、$src、$deps$ver（$media）。我想知道在哪里可以添加这两个属性。我已经试过了：

wp_register_script('jquery', 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://code.jquery.com/jquery-3.1.1.slim.min.js'.'integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"', false, null);
    wp_enqueue_script('jquery');

但它没有奏效。

有人有同样的问题吗？这是来自 bootstrap 4 的原始脚本，它还具有具有相同属性（完整性和交叉origin）的 bootstrap 和 tether，因此，由于它非常新，任何类型的帮助都将非常受欢迎。

答案 1

我只是偶然破解了这个。我不得不在古代Internet Explorer版本的一些CSS文件上使用条件，并认为我不妨尝试将数组放在我使用的同一wp_script_add_data函数中。它的工作原理！

    wp_register_script('jquery3', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), '3.3.1', true); // jQuery v3
    wp_enqueue_script('jquery3');
    wp_script_add_data( 'jquery3', array( 'integrity', 'crossorigin' ) , array( 'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=', 'anonymous' ) );

参考资料： https://developer.wordpress.org/reference/functions/wp_script_add_data/#parameters

为了完整起见：如果添加 jQuery v3，则还需要迁移 v3：http://jquery.com/download/

答案 2

你可以使用script_loader_tag钩子（主要部分实际上不是我的代码，但老实说，我不记得我在哪里得到它，可能是在SO或WP Stack Exchange的某个地方）：

add_filter( 'script_loader_tag', 'add_attribs_to_scripts', 10, 3 );
function add_attribs_to_scripts( $tag, $handle, $src ) {

// The handles of the enqueued scripts we want to defer
$async_scripts = array(
    'jquery-migrate',
    'sharethis',
);

$defer_scripts = array( 
    'contact-form-7',
    'jquery-form',
    'wpdm-bootstrap',
    'frontjs',
    'jquery-choosen',
    'fancybox',
    'jquery-colorbox',  
    'search'
);

$jquery = array(
    'jquery'
);

if ( in_array( $handle, $defer_scripts ) ) {
    return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
}
if ( in_array( $handle, $async_scripts ) ) {
    return '<script src="' . $src . '" async="async" type="text/javascript"></script>' . "\n";
}
if ( in_array( $handle, $jquery ) ) {
    return '<script src="' . $src . '" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}
return $tag;
}