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
This commit is contained in:
Gary Pendergast 2015-11-09 00:07:03 +00:00
parent 80975befb8
commit 6b9ba5893f
4 changed files with 63 additions and 20 deletions

View File

@ -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 );
}

View File

@ -1,9 +1,10 @@
(function ( window, document ) {
'use strict';
var secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' ),
supportedBrowser = ( document.querySelector && window.addEventListener ),
var 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 );

View File

@ -64,17 +64,31 @@
loaded = true;
var isIE10 = -1 !== navigator.appVersion.indexOf( 'MSIE 10' ),
isIE11 = !!navigator.userAgent.match( /Trident.*rv\:11\./ ),
iframes, iframeClone, i;
isIE11 = !!navigator.userAgent.match( /Trident.*rv:11\./ ),
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. */
if ( isIE10 || isIE11 ) {
iframes = document.querySelectorAll( '.wp-embedded-content[security]' );
for ( i = 0; i < blockquotes.length; i++ ) {
blockquotes[ i ].style.display = 'none';
}
for ( i = 0; i < iframes.length; i++ ) {
iframeClone = iframes[ i ].cloneNode( true );
for ( i = 0; i < iframes.length; i++ ) {
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 );
}
}
}

View File

@ -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 );
}
}