Problem embedding H5P from Wordpress site to another site

Submitted by codybee on Wed, 02/19/2020 - 21:11
Forums: 
Installation and server related problems

Hello,

I am trying to figure out why I am not able to embed the following Iframe code on other websites.  I created the H5P content with the WordPress plugin.  On my other site that I am trying to embed the code into it says that whynotspanish.com refused to connect.  I also tried embedding it a different way in my other site and got an error that whynotspanish.com does not support Iframeing.

<iframe src="https://www.whynotspanish.com/wp-admin/admin-ajax.php?action=h5p_embed&id=2" width="800" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://www.whynotspanish.com/wp-content/plugins/h5p/h5p-php-library/js/..." charset="UTF-8"></script>

 

Any ideas on how to fix this or pointing me in the right direction to solve this would be greatly appreciated.

otacke's picture

otacke

Thu, 02/20/2020 - 08:52

Does your server impose restrictions for cross- origin resource sharing (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)?

BV52's picture

BV52

Thu, 02/20/2020 - 17:37

Hi codybee,

I suspect the same thing and you can access your browser console (usually F12 or Ctrl+shift+J) to verify this. You might see something like "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource".

-BV

codybee

Thu, 02/20/2020 - 19:02

Thanks for the replies.  I am not the most computer savvy so I'm stumbling my way through this.

I pulled up the console and I am getting this error...

Refused to display 'https://www.whynotspanish.com/wp-admin/admin-ajax.php?action=h5p_embed&id=2' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I read the article and tried adding the following to my staging sites .htaccess file

Access-Control-Allow-Origin: https://www.espanolenuso.com

Vary: Origin

This gave me a different error.

Failed to load resource: the server responded with a status of 500 ()

Any idea what I doing wrong?  I'll keep messing around with it but any guidance would be greatly appreciated. 

Thanks for your time!

BV52's picture

BV52

Fri, 02/21/2020 - 17:19

Hi codybee,

You might want to look at this page it will give you an idea on how to tackle this issue.

-BV

codybee

Fri, 02/21/2020 - 22:35

Thanks so much for pointing me in the right direction.  I was able to figure this out.  I stumbled upon this website and it helped me with figuring it out.  https://geekflare.com/csp-frame-ancestors-configuration/

For me adding this was what fixed my issue.

Header set Content-Security-Policy "frame-ancestors 'self' yourwebsite.com;"

Thanks for the amazing product and great support!