2

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>
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
    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
    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.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. I updated this question to add more details to the problem. Nov 30, 2018 at 0:05

1 Answer 1

2

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);
2
  • Any help here on a similar question please? :) wordpress.stackexchange.com/questions/339370/…
    – Gabe
    Jun 2, 2019 at 7:25
  • Note that embed_oembed_html filter is applied after retrieving the oEmbed cache, for each embed, so it will have a negative impact on page performance, specially if there are lots of embeds. To prevent this, use the oembed_result filter, which is applied before the oEmbed response is cached. Mar 23 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.