Filter oembeds tags to modify iframe attributes

by

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.com/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>

1 Answer
1

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

Leave a Comment