Make WordPress Core

Changeset 56383


Ignore:
Timestamp:
08/10/2023 07:47:08 PM (9 months ago)
Author:
westonruter
Message:

Embeds: Modernize wp-embed script with removal of obsolete IE10/IE11 code and support for WP<4.4.

  • Remove obsolete load event handler in wp-embed since IE10+ support DOMContentLoaded.
  • Replace obsolete use of document.createElement('a') in favor of the newer URL class (supported in all browsers but obsolete IE11).
  • Remove obsolete IE10/IE11 code.
  • Combine conditionals.
  • Use substring() instead of deprecated substr() method.
  • Eliminate the stipulation that wp-embed.js not include ampersands, considering this was put in place for WP<4.3 which now accounts for only 1.43% of sites. This includes the elimination of the verify:wp-embed grunt task.

Props westonruter, swissspidy.
Fixes #58974.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/Gruntfile.js

    r56247 r56383  
    765765                    '!wp-admin/js/farbtastic.js',
    766766                    '!wp-includes/js/swfobject.js',
    767                     '!wp-includes/js/wp-embed.js' // We have extra options for this, see uglify:embed.
    768                 ]
    769             },
    770             embed: {
    771                 options: {
    772                     compress: {
    773                         conditionals: false
    774                     }
    775                 },
    776                 expand: true,
    777                 cwd: WORKING_DIR,
    778                 dest: WORKING_DIR,
    779                 ext: '.min.js',
    780                 src: ['wp-includes/js/wp-embed.js']
     767                ]
    781768            },
    782769            'jquery-ui': {
     
    14621449    grunt.registerTask( 'uglify:all', [
    14631450        'uglify:core',
    1464         'uglify:embed',
    14651451        'uglify:jquery-ui',
    14661452        'uglify:imgareaselect',
     
    15081494     */
    15091495    grunt.registerTask( 'verify:build', [
    1510         'verify:wp-embed',
    15111496        'verify:old-files',
    15121497        'verify:source-maps',
    15131498    ] );
    1514 
    1515     /**
    1516      * Build assertions for wp-embed.min.js.
    1517      *
    1518      * @ticket 34698
    1519      */
    1520     grunt.registerTask( 'verify:wp-embed', function() {
    1521         const file = `${ BUILD_DIR }/wp-includes/js/wp-embed.min.js`;
    1522 
    1523         assert(
    1524             fs.existsSync( file ),
    1525             'The build/wp-includes/js/wp-embed.min.js file does not exist.'
    1526         );
    1527 
    1528         const contents = fs.readFileSync( file, {
    1529             encoding: 'utf8',
    1530         } );
    1531 
    1532         assert(
    1533             contents.length > 0,
    1534             'The build/wp-includes/js/wp-embed.min.js file must not be empty.'
    1535         );
    1536         assert(
    1537             false === contents.includes( '&' ),
    1538             'The build/wp-includes/js/wp-embed.min.js file must not contain ampersands.'
    1539         );
    1540     } );
    15411499
    15421500    /**
  • trunk/src/js/_enqueues/wp/embed.js

    r55763 r56383  
    55 * @output wp-includes/js/wp-embed.js
    66 *
    7  * This file cannot have ampersands in it. This is to ensure
    8  * it can be embedded in older versions of WordPress.
    9  * See https://core.trac.wordpress.org/changeset/35708.
     7 * Single line comments should not be used since they will break
     8 * the script when inlined in get_post_embed_html(), specifically
     9 * when the comments are not stripped out due to SCRIPT_DEBUG
     10 * being turned on.
    1011 */
    1112(function ( window, document ) {
    1213    'use strict';
    1314
    14     var supportedBrowser = false,
    15         loaded = false;
    16 
    17         if ( document.querySelector ) {
    18             if ( window.addEventListener ) {
    19                 supportedBrowser = true;
    20             }
    21         }
     15    /* Abort for ancient browsers. */
     16    if ( ! document.querySelector || ! window.addEventListener || typeof URL === 'undefined' ) {
     17        return;
     18    }
    2219
    2320    /** @namespace wp */
    2421    window.wp = window.wp || {};
    2522
     23    /* Abort if script was already executed. */
    2624    if ( !! window.wp.receiveEmbedMessage ) {
    2725        return;
     
    3634        var data = e.data;
    3735
    38         if ( ! data ) {
    39             return;
    40         }
    41 
    42         if ( ! ( data.secret || data.message || data.value ) ) {
    43             return;
    44         }
    45 
    46         if ( /[^a-zA-Z0-9]/.test( data.secret ) ) {
     36        /* Verify shape of message. */
     37        if (
     38            ! ( data || data.secret || data.message || data.value ) ||
     39            /[^a-zA-Z0-9]/.test( data.secret )
     40        ) {
    4741            return;
    4842        }
     
    6660            source.removeAttribute( 'style' );
    6761
    68             /* Resize the iframe on request. */
    6962            if ( 'height' === data.message ) {
     63                /* Resize the iframe on request. */
    7064                height = parseInt( data.value, 10 );
    7165                if ( height > 1000 ) {
     
    7670
    7771                source.height = height;
    78             }
     72            } else if ( 'link' === data.message ) {
     73                /* Link to a specific URL on request. */
     74                sourceURL = new URL( source.getAttribute( 'src' ) );
     75                targetURL = new URL( data.value );
    7976
    80             /* Link to a specific URL on request. */
    81             if ( 'link' === data.message ) {
    82                 sourceURL = document.createElement( 'a' );
    83                 targetURL = document.createElement( 'a' );
    84 
    85                 sourceURL.href = source.getAttribute( 'src' );
    86                 targetURL.href = data.value;
    87 
    88                 /* Only follow link if the protocol is in the allow list. */
    89                 if ( ! allowedProtocols.test( targetURL.protocol ) ) {
    90                     continue;
    91                 }
    92 
    93                 /* Only continue if link hostname matches iframe's hostname. */
    94                 if ( targetURL.host === sourceURL.host ) {
    95                     if ( document.activeElement === source ) {
    96                         window.top.location.href = data.value;
    97                     }
     77                if (
     78                    allowedProtocols.test( targetURL.protocol ) &&
     79                    targetURL.host === sourceURL.host &&
     80                    document.activeElement === source
     81                ) {
     82                    window.top.location.href = data.value;
    9883                }
    9984            }
     
    10287
    10388    function onLoad() {
    104         if ( loaded ) {
    105             return;
    106         }
    107 
    108         loaded = true;
    109 
    110         var isIE10 = -1 !== navigator.appVersion.indexOf( 'MSIE 10' ),
    111             isIE11 = !!navigator.userAgent.match( /Trident.*rv:11\./ ),
    112             iframes = document.querySelectorAll( 'iframe.wp-embedded-content' ),
    113             iframeClone, i, source, secret;
     89        var iframes = document.querySelectorAll( 'iframe.wp-embedded-content' ),
     90            i, source, secret;
    11491
    11592        for ( i = 0; i < iframes.length; i++ ) {
     
    12097            if ( ! secret ) {
    12198                /* Add secret to iframe */
    122                 secret = Math.random().toString( 36 ).substr( 2, 10 );
     99                secret = Math.random().toString( 36 ).substring( 2, 12 );
    123100                source.src += '#?secret=' + secret;
    124101                source.setAttribute( 'data-secret', secret );
    125             }
    126 
    127             /* Remove security attribute from iframes in IE10 and IE11. */
    128             if ( ( isIE10 || isIE11 ) ) {
    129                 iframeClone = source.cloneNode( true );
    130                 iframeClone.removeAttribute( 'security' );
    131                 source.parentNode.replaceChild( iframeClone, source );
    132102            }
    133103
     
    144114    }
    145115
    146     if ( supportedBrowser ) {
    147         window.addEventListener( 'message', window.wp.receiveEmbedMessage, false );
    148         document.addEventListener( 'DOMContentLoaded', onLoad, false );
    149         window.addEventListener( 'load', onLoad, false );
    150     }
     116    window.addEventListener( 'message', window.wp.receiveEmbedMessage, false );
     117    document.addEventListener( 'DOMContentLoaded', onLoad, false );
    151118})( window, document );
  • trunk/tests/phpunit/tests/oembed/template.php

    r52978 r56383  
    344344        $this->assertFalse( $scripts->query( 'wp-embed', 'enqueued' ) );
    345345    }
    346 
    347     /**
    348      * Confirms that no ampersands exist in src/wp-includes/js/wp-embed.js.
    349      *
    350      * See also the `verify:wp-embed` Grunt task for verifying the built file.
    351      *
    352      * @ticket 34698
    353      */
    354     public function test_js_no_ampersands() {
    355         $this->assertStringNotContainsString( '&', file_get_contents( ABSPATH . WPINC . '/js/wp-embed.js' ) );
    356     }
    357346}
Note: See TracChangeset for help on using the changeset viewer.