Native oEmbed support on Custom Post Types produces Cross-site scripting errors or are not rendered at all.

[webdevmattcrom]

STEPS TO REPRODUCE

• Do a fresh install of WordPress 4.4+ or 4.5+
• Use any Core theme
• Create a Custom Post Type (sample code below)
• Create a post with that Post Type
• Try to embed that post on a page/post

Results have varied. For some it won't render as an oEmbed at all. For some there are cross-site scripting errors. I have gotten it to render correctly locally, but not on a live site.

I've also made sure to manually clear the _oembed cache in wp_postmeta when testing.

[webdevmattcrom]

Forgot the CPT code example:

function matt2016_register_promotion_post_type() {
    $labels = array(
        'name' => 'Promotions',
        'singular_name' => 'Promotion',
        'add_new' => 'Add New',
        'add_new_item' => 'Add New Promotion',
        'edit_item' => 'Edit Promotion',
        'new_item' => 'New Promotion',
        'view_item' => 'View Promotion',
        'search_items' => 'Search Promotions',
        'not_found' =>  'No Promotions found',
        'not_found_in_trash' => 'No Promotions found in trash',
        'parent_item_colon' => '',
        'menu_name' => 'Promotions'
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true, 
        'show_in_menu' => true, 
        'query_var' => true,
        'rewrite' => true,
        'capability_type' => 'post',
        'has_archive' => true, 
        'hierarchical' => false,
        'menu_position' => 6.1,
        'menu_icon' => 'dashicons-star-empty',
        'supports' => array('title','thumbnail','excerpt','revisions', 'editor')
    ); 

    register_post_type( 'promotion', $args );
}

add_action( 'init', 'matt2016_register_promotion_post_type' );

[webdevmattcrom]

Also, I first believed this was a Twentysixteen bug, but others have reported the problem with other Core themes as well. For context here's the issue I reported over there:
​https://github.com/WordPress/twentysixteen/issues/464

[andtrev]

Just a thought, and something I ran into, sounds like it may be having trouble discovering the oembed links? Are you sure your server can be contacted? You could try a quick echo esc_html( $html ); exit(); on line 365 of /wp-includes/class-oembed.php and then navigate to a page with the embedded post in it and see if it outputs the embedded posts html.

[DrewAPicture]

Replying to webdevmattcrom:

STEPS TO REPRODUCE
<snip>

• Try to embed that post on a page/post

Results have varied. For some it won't render as an oEmbed at all. For some there are cross-site scripting errors. I have gotten it to render correctly locally, but not on a live site.

To be clear: The problem strictly extends to the embed view not rendering correctly in the visual editor, correct?

Also, screenshots would be useful here.

[webdevmattcrom]

Replying to andtrev:

Are you sure your server can be contacted?

Yes, tested in many different environments, locally and live. All urls were correct. Did you try re-creating the steps? Would love to hear your results.

[webdevmattcrom]

Replying to DrewAPicture:

To be clear: The problem strictly extends to the embed view not rendering correctly in the visual editor, correct?

No, it is not limited to the visual editor. The visual editor does not render them as embeds, and the front-end has a variety of results. Either the 404 results of an embed, or the naked URL being output, or an embed being rendered but with Cross-site scripting errors which prevent any images or content from displaying, only the Title of the post.

Screenshots coming.

[webdevmattcrom]

Screenshots of results of the steps in the OP.

WHAT THE VISUAL EDITOR LOOKS LIKE:

Here's what it looked like for me:

Another tester had results that made it look like it was rendering as a media embed:

FRONT END RESULTS:

This result is currently live on my site. See far bottom right footer widget:
​https://www.mattcromwell.com/ro-fawp-politics/

Here's the copy of both of those errors:

Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.mattcromwell.com') does not match the recipient window's origin ('null').
script.js:474 Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

[andtrev]

It's working fine for me, a very slow server serving up the embeds have caused similar issues for me. When it displays just the link then it didn't get any embed info and likely was unable to get the posts html to even scrape for the embed link. You could try setting the timeout higher using the oembed_remote_get_args filter.

It would be nice if the errors from both of those wp_safe_remote_get calls would trickle down so folks could see if they are having issues connecting to the oembed providers.

[andtrev]

When I navigate to the oembed url for the post you're embedding I get a 404: ​https://www.mattcromwell.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.mattcromwell.com%2Fget-analytify%2F

I also see this JS error message on other pages like ​https://www.mattcromwell.com/hi-im-matt/about-me/ :

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.mattcromwell.com') does not match the recipient window's origin ('null'). https://js.stripe.com/v2/channel.html?stripe_xdm_e=https%3A%2F%2Fwww.mattcromwell.com&stripe_xdm_c=default286544&stripe_xdm_p=1

This is from Stripe, not sure if this is caused because of the other JS errors, but the errors aren't limited to oembed.

Replying to webdevmattcrom:

This result is currently live on my site. See far bottom right footer widget:
​https://www.mattcromwell.com/ro-fawp-politics/

Here's the copy of both of those errors:

Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.mattcromwell.com') does not match the recipient window's origin ('null').
script.js:474 Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

[webdevmattcrom]

Replying to andtrev:

I also see this JS error message on other pages like ​https://www.mattcromwell.com/hi-im-matt/about-me/ :

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.mattcromwell.com') does not match the recipient window's origin ('null'). https://js.stripe.com/v2/channel.html?stripe_xdm_e=https%3A%2F%2Fwww.mattcromwell.com&stripe_xdm_c=default286544&stripe_xdm_p=1

Actually, the Stripe error and others are being triggered because of the oEmbed problem. It's a cross-site scripting error because Stripe is trying to be loaded from inside the oEmbed but the source is registering as "null".

To clarify that a bit more, I removed all the oEmbed widgets from my site, except on one post.

You can see the errors here where the native oEmbed is in the footer:
​https://www.mattcromwell.com/commentary-on-mullenweg-interview/

But check any other page and there are zero errors.

When I navigate to the oembed url for the post you're embedding I get a 404: ​https://www.mattcromwell.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.mattcromwell.com%2Fget-analytify%2F

Where are you getting that URL from? The URL I pasted into that widget is:
​https://www.mattcromwell.com/promotions/get-analytify/

But I did test this again locally with Twenty Fifteen just now and the oEmbed worked as expected. What is strange is how so many others have been able to duplicate this problem consistently (see the Twenty Sixteen Github issue link above). Perhaps in the end this might not be an actual "bug" but the behavior definitely is buggy.

[webdevmattcrom]

Ironically, I may have just resolved this on my own site. I had a custom function which was stripping the CPT slug from the url. So when you visit that page the CPT Native oEmbed does now work. But I do have the conditional fix in place as well. Without the conditional check in Twenty Sixteen the CPT would not render with or without the custom functions for my CPT slug. In the end maybe this bug is limited to Twenty Sixteen and testing really requires clearing the _oembed cache before every single page refresh.

[andtrev]

Ya, you need to flush the rewrite rules after adding the custom post type code you posted above to get it to work correctly. It's likely this is the entire issue you've been having.

The content width doesn't look like it does anything other than set the iframe width for the embed. It will always be empty when it hits that function in Twenty Sixteen unless you have some other plugin setting it before hand, so all you're doing is turning the setting off, but the embed will then just default to a 500 pixel width. This should make absolutely no difference in whether it displays or not.

There is something interesting that happens, if the CPT registration code you posted above isn't included then the oembed properly shows a "Oops! That embed can’t be found." message in the iframe. But if you register the CPT and don't flush the rewrite rules it doesn't show an iframe at all, just the blockquote element with the link to the post you tried to embed. Seems like it would be better to show that same "Oops! That embed can’t be found." message rather than not doing anything.

Where are you getting that URL from? The URL I pasted into that widget is: ​https://www.mattcromwell.com/promotions/get-analytify/

This is how the oembed process works, first you specify the url of the post you want to embed, like the one you used above, then it requests that page and searches for oembed links in the head. Using the link above it would find these two links:

<link rel="alternate" type="application/json+oembed" href="https://www.mattcromwell.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.mattcromwell.com%2Fpromotion%2Fget-analytify%2F">
<link rel="alternate" type="text/xml+oembed" href="https://www.mattcromwell.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.mattcromwell.com%2Fpromotion%2Fget-analytify%2F&amp;format=xml">

Those links will return the code necessary to embed that post. Which is JavaScript that when run, will embed ​https://www.mattcromwell.com/promotions/get-analytify/embed/ in an iframe.

[azaozz]

you need to flush the rewrite rules after adding the custom post type code you posted above to get it to work correctly. It's likely this is the entire issue you've been having.

Seems this has been resolved. Agree we should try to catch similar errors and show better error messages for them. Better to move that to a new ticket.