具有完整性和跨源的 Wordpress 脚本

Question

我正在尝试使用 WordPress 上的 wp_register_script 和 wp_enqueue_script 功能来使脚本入队，该脚本具有两个属性："integrity" 和 "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 的原始脚本，它还具有 bootstrap 和具有相同属性（完整性和跨域）的系绳，因此，由于它是非常新的，任何形式的帮助将不胜感激。

Answer 1

这是正确的语法：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

"integrity" 和 "crossorgin" 不属于 URL。它们是脚本标签的一部分。

很遗憾，Wordpress 目前无法处理排队脚本的属性。
但他们正在努力......状态：需要测试:-)
=> Ticket 22249 / Wordpress Core

Answer 2

你可以使用script_loader_tag hook（主要部分实际上不是我的代码，但老实说我不记得我从哪里得到的，可能是在这里的某个地方在 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;
}

Answer 3

感谢所有的帖子，他们真的很有帮助。我确实推出了我自己的版本以赋予它一些结构并使其更易于阅读和更新。像往常一样使用入队，为 CSS 文件使用末尾带有错误标记的脚本，以便它在顶部加载。虽然它可能会有所简化。

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 

function add_attributes_to_script( $tag, $handle, $src ) {

        $scripts_to_load = array (

            (0) => Array
              (
                ('name') => 'popper_min_js',
                ('type') => '<script type="text/javascript" src="',         
                ('integrity') => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
                ('close') => '></script>'
              ),

             (1) => Array
               (
                ('name') => 'bootstrap_min_js', 
                ('type') => '<script type="text/javascript" src="',
                ('integrity') => 'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T',
                ('close') => '></script>'
               )
        );  

        $key = array_search($handle, array_column($scripts_to_load, 'name'));

        if ( FALSE !== $key){

            $tag = $scripts_to_load[$key]['type'] . esc_url($src) . '" integrity="' . $scripts_to_load[$key]['integrity'] .'" crossorigin="anonymous"' . $scripts_to_load[$key]['close'] . "\n";

        }
        return $tag;
    }

Answer 4

我只是偶然破解了这个。对于古老的 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/

Answer 5

这里有很好的解释：

对于每个排队的脚本，您需要添加一个过滤器以添加适当的属性；

/**
* load custom JS
*/
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', [], null);

    add_filter('style_loader_tag', __NAMESPACE__ . '\add_jquery_sri', 10, 2); 
});
 
/**
* add SRI attributes to jQuery style loader element

* @param string $html
* @param string $handle
* @return string
*/
function add_jquery_sri($html, $handle) {
    if ($handle === 'jQuery') {
        $html = str_replace(' />', ' integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" />', $html);
    }
 
    return $html;
}

URL & 哈希取自 https://cdnjs.com/libraries/jquery 向作者致敬！

Answer 6

您可以使用 add_action 添加具有 Crossorigin 完整性的 CDN :

function add_jquery(){
echo '<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256- 
 QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>';
 }

 add_action( 'wp_head', 'add_jquery' );

具有完整性和跨源的 Wordpress 脚本

Wordpress script with integrity and crossorigin

php

wordpress

integrity

bootstrap-4