WordPress/wp-includes/js/wp-embed.js

152 lines
3.8 KiB
JavaScript
Raw Normal View History

/**
* WordPress inline HTML embed
*
* @since 4.4.0
* @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.
*/
(function ( window, document ) {
'use strict';
var supportedBrowser = false,
loaded = false;
if ( document.querySelector ) {
if ( window.addEventListener ) {
supportedBrowser = true;
}
}
/** @namespace wp */
window.wp = window.wp || {};
if ( !! window.wp.receiveEmbedMessage ) {
return;
}
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. Built from https://develop.svn.wordpress.org/trunk@52132 git-svn-id: http://core.svn.wordpress.org/trunk@51724 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-10 21:49:18 -05:00
/**
* Receive embed message.
*
* @param {MessageEvent} e
*/
window.wp.receiveEmbedMessage = function( e ) {
var data = e.data;
if ( ! data ) {
return;
}
if ( ! ( data.secret || data.message || data.value ) ) {
return;
}
if ( /[^a-zA-Z0-9]/.test( data.secret ) ) {
return;
}
var iframes = document.querySelectorAll( 'iframe[data-secret="' + data.secret + '"]' ),
blockquotes = document.querySelectorAll( 'blockquote[data-secret="' + data.secret + '"]' ),
allowedProtocols = new RegExp( '^https?:$', 'i' ),
i, source, height, sourceURL, targetURL;
for ( i = 0; i < blockquotes.length; i++ ) {
blockquotes[ i ].style.display = 'none';
}
for ( i = 0; i < iframes.length; i++ ) {
source = iframes[ i ];
if ( e.source !== source.contentWindow ) {
continue;
}
source.removeAttribute( 'style' );
/* Resize the iframe on request. */
if ( 'height' === data.message ) {
height = parseInt( data.value, 10 );
if ( height > 1000 ) {
height = 1000;
} else if ( ~~height < 200 ) {
height = 200;
}
source.height = height;
}
/* 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;
}
}
}
}
};
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;
for ( i = 0; i < iframes.length; i++ ) {
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. Built from https://develop.svn.wordpress.org/trunk@52132 git-svn-id: http://core.svn.wordpress.org/trunk@51724 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-10 21:49:18 -05:00
/** @var {IframeElement} */
source = iframes[ i ];
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. Built from https://develop.svn.wordpress.org/trunk@52132 git-svn-id: http://core.svn.wordpress.org/trunk@51724 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-10 21:49:18 -05:00
secret = source.getAttribute( 'data-secret' );
if ( ! 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 ) ) {
iframeClone = source.cloneNode( true );
iframeClone.removeAttribute( 'security' );
source.parentNode.replaceChild( iframeClone, source );
}
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. Built from https://develop.svn.wordpress.org/trunk@52132 git-svn-id: http://core.svn.wordpress.org/trunk@51724 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-10 21:49:18 -05:00
/*
* Let post embed window know that the parent is ready for receiving the height message, in case the iframe
* loaded before wp-embed.js was loaded. When the ready message is received by the post embed window, the
* window will then (re-)send the height message right away.
*/
source.contentWindow.postMessage( {
message: 'ready',
secret: secret
}, '*' );
}
}
if ( supportedBrowser ) {
window.addEventListener( 'message', window.wp.receiveEmbedMessage, false );
document.addEventListener( 'DOMContentLoaded', onLoad, false );
window.addEventListener( 'load', onLoad, false );
}
})( window, document );