Embeds: Fix support for embedding in non-WordPress sites.

This moves the last of the iframe message code from PHP to JavaScript, so it can be included in any site, without needing to rely on any of WordPress' internal behaviour.

Props swissspidy.

Fixes #34451.



git-svn-id: https://develop.svn.wordpress.org/trunk@35577 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/embed-functions.php

@@ -460,7 +460,7 @@ function get_post_embed_html( $width, $height, $post = null ) {
 
 	$embed_url = get_post_embed_url( $post );
 
-	$output = '<blockquote><a href="' . get_permalink( $post ) . '">' . get_the_title( $post ) . "</a></blockquote>\n";
+	$output = '<blockquote class="wp-embedded-content"><a href="' . esc_url( get_permalink( $post ) ) . '">' . get_the_title( $post ) . "</a></blockquote>\n";
 
 	$output .= "<script type='text/javascript'>\n";
 	$output .= "<!--//--><![CDATA[//><!--\n";
@@ -754,7 +754,7 @@ function wp_filter_oembed_result( $result, $data, $url ) {
 
 	$allowed_html = array(
 		'a'          => array(
-			        'href' => true,
+			'href'         => true,
 		),
 		'blockquote' => array(),
 		'iframe'     => array(
@@ -766,7 +766,6 @@ function wp_filter_oembed_result( $result, $data, $url ) {
 			'marginheight' => true,
 			'scrolling'    => true,
 			'title'        => true,
-			'class'        => true,
 		),
 	);
 
@@ -782,9 +781,10 @@ function wp_filter_oembed_result( $result, $data, $url ) {
 	if ( ! empty( $content[1] ) ) {
 		// We have a blockquote to fall back on. Hide the iframe by default.
 		$html = str_replace( '<iframe', '<iframe style="display:none;"', $html );
+		$html = str_replace( '<blockquote', '<blockquote class="wp-embedded-content"', $html );
 	}
 
-	$html = str_replace( '<iframe', '<iframe sandbox="allow-scripts" security="restricted"', $html );
+	$html = str_replace( '<iframe', '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"', $html );
 
 	preg_match( '/ src=[\'"]([^\'"]*)[\'"]/', $html, $results );
 
@@ -956,5 +956,5 @@ function print_embed_scripts() {
  * @return string The filtered content.
  */
 function _oembed_filter_feed_content( $content ) {
-	return str_replace( '<iframe sandbox="allow-scripts" security="restricted" style="display:none;"', '<iframe sandbox="allow-scripts" security="restricted"', $content );
+	return str_replace( '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;"', '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"', $content );
 }

src/wp-includes/js/wp-embed-template.js

@@ -1,9 +1,10 @@
 (function ( window, document ) {
 	'use strict';
 
-	var secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' ),
+	var supportedBrowser = ( document.querySelector && window.addEventListener ),
-		supportedBrowser = ( document.querySelector && window.addEventListener ),
 		loaded = false,
+		secret,
+		secretTimeout,
 		resizing;
 
 	function sendEmbedMessage( message, value ) {
@@ -177,7 +178,25 @@
 		}, 100 );
 	}
 
+	/**
+	 * Re-get the secret when it was added later on.
+	 */
+	function getSecret() {
+		if ( window.self === window.top || !!secret ) {
+			return;
+		}
+
+		secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' );
+
+		clearTimeout( secretTimeout );
+
+		secretTimeout = setTimeout( function () {
+			getSecret();
+		}, 100 );
+	}
+
 	if ( supportedBrowser ) {
+		getSecret();
 		document.documentElement.className = document.documentElement.className.replace( /\bno-js\b/, '' ) + ' js';
 		document.addEventListener( 'DOMContentLoaded', onLoad, false );
 		window.addEventListener( 'load', onLoad, false );

src/wp-includes/js/wp-embed.js

@@ -64,17 +64,31 @@
 		loaded = true;
 
 		var isIE10 = -1 !== navigator.appVersion.indexOf( 'MSIE 10' ),
-			isIE11 = !!navigator.userAgent.match( /Trident.*rv\:11\./ ),
+			isIE11 = !!navigator.userAgent.match( /Trident.*rv:11\./ ),
-			iframes, iframeClone, i;
+			iframes = document.querySelectorAll( 'iframe.wp-embedded-content' ),
+			blockquotes = document.querySelectorAll( 'blockquote.wp-embedded-content' ),
+			iframeClone, i, source, secret;
 
-		/* Remove security attribute from iframes in IE10 and IE11. */
+		for ( i = 0; i < blockquotes.length; i++ ) {
-		if ( isIE10 || isIE11 ) {
+			blockquotes[ i ].style.display = 'none';
-			iframes = document.querySelectorAll( '.wp-embedded-content[security]' );
+		}
 
-			for ( i = 0; i < iframes.length; i++ ) {
+		for ( i = 0; i < iframes.length; i++ ) {
-				iframeClone = iframes[ i ].cloneNode( true );
+			source = iframes[ i ];
+			source.style.display = '';
+
+			if ( !source.getAttribute( 'data-secret' ) ) {
+				/* Add secret to iframe */
+				secret = Math.random().toString( 36 ).substr( 2, 10 );
+				source.src += '#?secret=' + secret;
+				source.setAttribute( 'data-secret', secret );
+			}
+
+			/* Remove security attribute from iframes in IE10 and IE11. */
+			if ( ( isIE10 || isIE11 ) && !!source.getAttribute( 'security' ) ) {
+				iframeClone = source.cloneNode( true );
 				iframeClone.removeAttribute( 'security' );
-				iframes[ i ].parentNode.replaceChild( iframeClone, iframes[ i ] );
+				source.parentNode.replaceChild( iframeClone, source );
 			}
 		}
 	}

tests/phpunit/tests/oembed/filterResult.php

@@ -28,7 +28,7 @@ class Tests_Filter_oEmbed_Result extends WP_UnitTestCase {
 		$html   = '<div><iframe></iframe><iframe></iframe><p></p></div>';
 		$actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
 
-		$this->assertEquals( '<iframe sandbox="allow-scripts" security="restricted"></iframe>', $actual );
+		$this->assertEquals( '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"></iframe>', $actual );
 	}
 
 	function test_filter_oembed_result_with_newlines() {
@@ -41,7 +41,7 @@ EOD;
 
 		$actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
 
-		$this->assertEquals( '<iframe sandbox="allow-scripts" security="restricted"></iframe>', $actual );
+		$this->assertEquals( '<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"></iframe>', $actual );
 	}
 
 	function test_filter_oembed_result_without_iframe() {
@@ -83,13 +83,23 @@ EOD;
 		$html   = '<blockquote></blockquote><iframe></iframe>';
 		$actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
 
-		$this->assertEquals( '<blockquote></blockquote><iframe sandbox="allow-scripts" security="restricted" style="display:none;"></iframe>', $actual );
+		$this->assertEquals( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;"></iframe>', $actual );
 	}
 
 	function test_filter_oembed_result_allowed_html() {
-		$html   = '<blockquote><strong><a href="" target=""></a></strong></blockquote><iframe></iframe>';
+		$html   = '<blockquote class="foo" id="bar"><strong><a href="" target=""></a></strong></blockquote><iframe></iframe>';
 		$actual = wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' );
 
-		$this->assertEquals( '<blockquote><a href=""></a></blockquote><iframe sandbox="allow-scripts" security="restricted" style="display:none;"></iframe>', $actual );
+		$this->assertEquals( '<blockquote class="wp-embedded-content"><a href=""></a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;"></iframe>', $actual );
+	}
+
+	/**
+	 * @group feed
+	 */
+	function test_filter_feed_content() {
+		$html   = '<blockquote></blockquote><iframe></iframe>';
+		$actual = _oembed_filter_feed_content( wp_filter_oembed_result( $html, (object) array( 'type' => 'rich' ), '' ) );
+
+		$this->assertEquals( '<blockquote class="wp-embedded-content"></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted"></iframe>', $actual );
 	}
 }