WordPress.org

Make WordPress Core


Ignore:
Timestamp:
11/11/2021 02:47:10 AM (3 weeks ago)
Author:
westonruter
Message:

Embeds: Conditionally enqueue wp-embed only if needed and send ready message in case script loads after post embed windows.

  • Prevent loading wp-embed script unconditionally on every page in favor of conditionally enqueueing when a post embed is detected. The wp-embed script is also explicitly marked as being in the footer group. Sites which currently disable post embed scripts from being enqueued via remove_action( 'wp_head', 'wp_oembed_add_host_js' ) will continue to do so.
  • Send a ready message from the host page to each post embed window in case the iframe loads before the wp-embed script does. When the ready message is received by the post embed window, it sends the same height message as it sends when it loads.
  • Eliminate use of grunt-include to inject emoji script and the post embed script. Instead obtain the script contents via file_get_contents() (as is done elsewhere in core) and utilize wp_print_inline_script_tag()/wp_get_inline_script_tag() to construct out the script. This simplifies the logic and allows the running of src without SCRIPT_DEBUG enabled.
  • For the embed code that users are provided to copy for embedding outside of WP, add the secret on the blockquote and iframe. This ensures the blockquote will be hidden when the iframe loads. The embed code in question is accessed here via get_post_embed_html().

Props westonruter, swissspidy, pento, flixos90, ocean90.
Fixes #44632, #44306.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/embed.php

    r51298 r52132  
    360360 */
    361361function wp_oembed_add_host_js() {
    362     wp_enqueue_script( 'wp-embed' );
     362    add_filter( 'embed_oembed_html', 'wp_maybe_enqueue_oembed_host_js' );
     363}
     364
     365/**
     366 * Enqueue the wp-embed script if the provided oEmbed HTML contains a post embed.
     367 *
     368 * In order to only enqueue the wp-embed script on pages that actually contain post embeds, this function checks if the
     369 * provided HTML contains post embed markup and if so enqueues the script so that it will get printed in the footer.
     370 *
     371 * @since 5.9.0
     372 *
     373 * @param string $html Embed markup.
     374 * @return string Embed markup (without modifications).
     375 */
     376function wp_maybe_enqueue_oembed_host_js( $html ) {
     377    if ( preg_match( '/<blockquote\s[^>]*wp-embedded-content/', $html ) ) {
     378        wp_enqueue_script( 'wp-embed' );
     379    }
     380    return $html;
    363381}
    364382
     
    451469    $embed_url = get_post_embed_url( $post );
    452470
    453     $output = '<blockquote class="wp-embedded-content"><a href="' . esc_url( get_permalink( $post ) ) . '">' . get_the_title( $post ) . "</a></blockquote>\n";
    454 
    455     $output .= "<script type='text/javascript'>\n";
    456     $output .= "<!--//--><![CDATA[//><!--\n";
    457     if ( SCRIPT_DEBUG ) {
    458         $output .= file_get_contents( ABSPATH . WPINC . '/js/wp-embed.js' );
    459     } else {
    460         /*
    461          * If you're looking at a src version of this file, you'll see an "include"
    462          * statement below. This is used by the `npm run build` process to directly
    463          * include a minified version of wp-embed.js, instead of using the
    464          * file_get_contents() method from above.
    465          *
    466          * If you're looking at a build version of this file, you'll see a string of
    467          * minified JavaScript. If you need to debug it, please turn on SCRIPT_DEBUG
    468          * and edit wp-embed.js directly.
    469          */
    470         $output .= <<<JS
    471         include "js/wp-embed.min.js"
    472 JS;
    473     }
    474     $output .= "\n//--><!]]>";
    475     $output .= "\n</script>";
     471    $secret     = wp_generate_password( 10, false );
     472    $embed_url .= "#?secret={$secret}";
     473
     474    $output = wp_get_inline_script_tag(
     475        file_get_contents( sprintf( ABSPATH . WPINC . '/js/wp-embed' . wp_scripts_get_suffix() . '.js' ) )
     476    );
    476477
    477478    $output .= sprintf(
    478         '<iframe sandbox="allow-scripts" security="restricted" src="%1$s" width="%2$d" height="%3$d" title="%4$s" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>',
     479        '<blockquote class="wp-embedded-content" data-secret="%1$s"><a href="%2$s">%3$s</a></blockquote>',
     480        esc_attr( $secret ),
     481        esc_url( get_permalink( $post ) ),
     482        get_the_title( $post )
     483    );
     484
     485    $output .= sprintf(
     486        '<iframe sandbox="allow-scripts" security="restricted" src="%1$s" width="%2$d" height="%3$d" title="%4$s" data-secret="%5$s" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>',
    479487        esc_url( $embed_url ),
    480488        absint( $width ),
     
    487495                get_bloginfo( 'name' )
    488496            )
    489         )
     497        ),
     498        esc_attr( $secret )
    490499    );
    491500
Note: See TracChangeset for help on using the changeset viewer.