Filter oembeds tags to modify iframe attributes

By default, when putting another WP url inside a post/page, it oEmbeds it and produces a blockquote and iframe code with the default in the front-end:

<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" ....></iframe>

It also produces an error in the JS console XMLHttpRequest cannot load .js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. which is hinting that it is blocking some scripts to run.

What is the best filter to use to modify the iframe produced in the front-end, for example, we want it to allow-same-origin attribute for sandbox

<iframe class="wp-embedded-content" sandbox="allow-scripts allow-same-origin" security="restricted" ....></iframe>

By default, when putting another WP url inside a post/page, it oEmbeds it and produces a blockquote and iframe code with the default in the front-end:

<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" ....></iframe>

It also produces an error in the JS console XMLHttpRequest cannot load http://example/wp-content/themes/themename/js/test.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. which is hinting that it is blocking some scripts to run.

What is the best filter to use to modify the iframe produced in the front-end, for example, we want it to allow-same-origin attribute for sandbox

<iframe class="wp-embedded-content" sandbox="allow-scripts allow-same-origin" security="restricted" ....></iframe>

• filters
• oembed

Share Improve this question edited Nov 30, 2018 at 0:03 Carl Alberto asked Nov 24, 2018 at 1:12 Carl AlbertoCarl Alberto 1,09711 gold badge1212 silver badges3030 bronze badges 3

• Note that the iframe itself is provided by the OEmbed provider, it isn't always generated by WordPress itself, modifying the result may not be the best approach here, especially if the embedded item is a WP post, modifying the generated oembed iframe for WP embeds at the source end would be better. – Tom J Nowell ♦ Commented Nov 24, 2018 at 1:56
• But more importantly, what problem does this solve? Why didn't you ask about that instead? – Tom J Nowell ♦ Commented Nov 24, 2018 at 1:57
• Thanks for the response @TomJNowell. Along with my issue is there is an error in JS console XMLHttpRequest cannot load http://example/wp-content/themes/themename/js/test.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. I updated this question to add more details to the problem. – Carl Alberto Commented Nov 30, 2018 at 0:05

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

I was able to solve the the CORS issue by using this snippet which now allows this iFrame to allow-same-origin or runs scripts inside this domain.

function oembed_iframe_overrides($html, $url, $attr) {

   if ( strpos( $html, "<iframe" ) !== false ) { 
      return str_replace('<iframe class="wp-embedded-content" sandbox="allow-scripts allow-same-origin"', '<iframe class="wp-embedded-content" sandbox', $html); }
   else {
      return $html;
   }
} 
add_filter( 'embed_oembed_html', 'oembed_iframe_overrides', 10, 3);