Changeset 56383

Timestamp:

08/10/2023 07:47:08 PM (18 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:

• Gruntfile.js (modified) (3 diffs)
• src/js/_enqueues/wp/embed.js (modified) (7 diffs)
• tests/phpunit/tests/oembed/template.php (modified) (1 diff)

trunk/Gruntfile.js

@@ -765 +765 @@
                     '!wp-admin/js/farbtastic.js',
                     '!wp-includes/js/swfobject.js',
-                    '!wp-includes/js/wp-embed.js' // We have extra options for this, see uglify:embed.
-                ]
-            },
-            embed: {
-                options: {
-                    compress: {
-                        conditionals: false
-                    }
-                },
-                expand: true,
-                cwd: WORKING_DIR,
-                dest: WORKING_DIR,
-                ext: '.min.js',
-                src: ['wp-includes/js/wp-embed.js']
+                ]
             },
             'jquery-ui': {
@@ -1462 +1449 @@
     grunt.registerTask( 'uglify:all', [
         'uglify:core',
-        'uglify:embed',
         'uglify:jquery-ui',
         'uglify:imgareaselect',
@@ -1508 +1494 @@
      */
     grunt.registerTask( 'verify:build', [
-        'verify:wp-embed',
         'verify:old-files',
         'verify:source-maps',
     ] );
-
-    /**
-     * Build assertions for wp-embed.min.js.
-     *
-     * @ticket 34698
-     */
-    grunt.registerTask( 'verify:wp-embed', function() {
-        const file = `${ BUILD_DIR }/wp-includes/js/wp-embed.min.js`;
-
-        assert(
-            fs.existsSync( file ),
-            'The build/wp-includes/js/wp-embed.min.js file does not exist.'
-        );
-
-        const contents = fs.readFileSync( file, {
-            encoding: 'utf8',
-        } );
-
-        assert(
-            contents.length > 0,
-            'The build/wp-includes/js/wp-embed.min.js file must not be empty.'
-        );
-        assert(
-            false === contents.includes( '&' ),
-            'The build/wp-includes/js/wp-embed.min.js file must not contain ampersands.'
-        );
-    } );
 
     /**

trunk/src/js/_enqueues/wp/embed.js

@@ -5 +5 @@
  * @output wp-includes/js/wp-embed.js
  *
- * This file cannot have ampersands in it. This is to ensure
- * it can be embedded in older versions of WordPress.
- * See https://core.trac.wordpress.org/changeset/35708.
+ * Single line comments should not be used since they will break
+ * the script when inlined in get_post_embed_html(), specifically
+ * when the comments are not stripped out due to SCRIPT_DEBUG
+ * being turned on.
  */
 (function ( window, document ) {
     'use strict';
 
-    var supportedBrowser = false,
-        loaded = false;
-
-        if ( document.querySelector ) {
-            if ( window.addEventListener ) {
-                supportedBrowser = true;
-            }
-        }
+    /* Abort for ancient browsers. */
+    if ( ! document.querySelector || ! window.addEventListener || typeof URL === 'undefined' ) {
+        return;
+    }
 
     /** @namespace wp */
     window.wp = window.wp || {};
 
+    /* Abort if script was already executed. */
     if ( !! window.wp.receiveEmbedMessage ) {
         return;
@@ -36 +34 @@
         var data = e.data;
 
-        if ( ! data ) {
-            return;
-        }
-
-        if ( ! ( data.secret || data.message || data.value ) ) {
-            return;
-        }
-
-        if ( /[^a-zA-Z0-9]/.test( data.secret ) ) {
+        /* Verify shape of message. */
+        if (
+            ! ( data || data.secret || data.message || data.value ) ||
+            /[^a-zA-Z0-9]/.test( data.secret )
+        ) {
             return;
         }
@@ -66 +60 @@
             source.removeAttribute( 'style' );
 
-            /* Resize the iframe on request. */
             if ( 'height' === data.message ) {
+                /* Resize the iframe on request. */
                 height = parseInt( data.value, 10 );
                 if ( height > 1000 ) {
@@ -76 +70 @@
 
                 source.height = height;
-            }
+            } else if ( 'link' === data.message ) {
+                /* Link to a specific URL on request. */
+                sourceURL = new URL( source.getAttribute( 'src' ) );
+                targetURL = new URL( data.value );
 
-            /* Link to a specific URL on request. */
-            if ( 'link' === data.message ) {
-                sourceURL = document.createElement( 'a' );
-                targetURL = document.createElement( 'a' );
-
-                sourceURL.href = source.getAttribute( 'src' );
-                targetURL.href = data.value;
-
-                /* Only follow link if the protocol is in the allow list. */
-                if ( ! allowedProtocols.test( targetURL.protocol ) ) {
-                    continue;
-                }
-
-                /* Only continue if link hostname matches iframe's hostname. */
-                if ( targetURL.host === sourceURL.host ) {
-                    if ( document.activeElement === source ) {
-                        window.top.location.href = data.value;
-                    }
+                if (
+                    allowedProtocols.test( targetURL.protocol ) &&
+                    targetURL.host === sourceURL.host &&
+                    document.activeElement === source
+                ) {
+                    window.top.location.href = data.value;
                 }
             }
@@ -102 +87 @@
 
     function onLoad() {
-        if ( loaded ) {
-            return;
-        }
-
-        loaded = true;
-
-        var isIE10 = -1 !== navigator.appVersion.indexOf( 'MSIE 10' ),
-            isIE11 = !!navigator.userAgent.match( /Trident.*rv:11\./ ),
-            iframes = document.querySelectorAll( 'iframe.wp-embedded-content' ),
-            iframeClone, i, source, secret;
+        var iframes = document.querySelectorAll( 'iframe.wp-embedded-content' ),
+            i, source, secret;
 
         for ( i = 0; i < iframes.length; i++ ) {
@@ -120 +97 @@
             if ( ! secret ) {
                 /* Add secret to iframe */
-                secret = Math.random().toString( 36 ).substr( 2, 10 );
+                secret = Math.random().toString( 36 ).substring( 2, 12 );
                 source.src += '#?secret=' + secret;
                 source.setAttribute( 'data-secret', secret );
-            }
-
-            /* Remove security attribute from iframes in IE10 and IE11. */
-            if ( ( isIE10 || isIE11 ) ) {
-                iframeClone = source.cloneNode( true );
-                iframeClone.removeAttribute( 'security' );
-                source.parentNode.replaceChild( iframeClone, source );
             }
 
@@ -144 +114 @@
     }
 
-    if ( supportedBrowser ) {
-        window.addEventListener( 'message', window.wp.receiveEmbedMessage, false );
-        document.addEventListener( 'DOMContentLoaded', onLoad, false );
-        window.addEventListener( 'load', onLoad, false );
-    }
+    window.addEventListener( 'message', window.wp.receiveEmbedMessage, false );
+    document.addEventListener( 'DOMContentLoaded', onLoad, false );
 })( window, document );

trunk/tests/phpunit/tests/oembed/template.php

@@ -344 +344 @@
         $this->assertFalse( $scripts->query( 'wp-embed', 'enqueued' ) );
     }
-
-    /**
-     * Confirms that no ampersands exist in src/wp-includes/js/wp-embed.js.
-     *
-     * See also the `verify:wp-embed` Grunt task for verifying the built file.
-     *
-     * @ticket 34698
-     */
-    public function test_js_no_ampersands() {
-        $this->assertStringNotContainsString( '&', file_get_contents( ABSPATH . WPINC . '/js/wp-embed.js' ) );
-    }
 }