Embed H5P from Wordpress to R Bookdown

Question

I try to add interactive H5P features to my bookdown.

You can see them on this bookdown

https://www.bookdown.org/pbaumgartner/itns-exercises/chapter-01.html

See how the author embeds H5P elements hosted on his Wordpress site https://github.com/petzi53/itns-exercises/blob/master/001-research-questions.Rmd as iframe like this <iframe src="https://peter.baumgartner.name/wp-admin/admin-ajax.php?action=h5p_embed&id=49" width="958" height="665" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://peter.baumgartner.name/wp-content/plugins/h5p/h5p-php-library/js/h5p-resizer.js" charset="UTF-8"></script>

I manage to embed H5P iframe when it comes from https://h5p.org like this

<iframe src="https://h5p.org/h5p/embed/1295995" width="1090" height="245" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *" title="SOEP Intrpduction"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

I have a H5P element on my website https://marco-kuehne.com/wp-admin/admin-ajax.php?action=h5p_embed&id=2 but when embedded my browser says

"Website will not allow Firefox to display the page if another site has embedded it"

The problem seems to be on my server. Anyone knows how to configure a server to allow embedding this H5P element? Thank you

Answer 1

Your server is configured to not allow embedding its contents into other sites - it is setting the so called X-Frame-Options to sameorigin. You would need to resolve this by setting up a Content Security Policy (CSP).

Firefox hints to that issue if you click on "Learn more" by the way.

The details for setting up a CSP in the response header will depend what server software you're using (and depend on if you have the rights to change the server settings), but often one can get away with putting an .htaccess file to the root path of your webspace or to the relevant directory - if the server allows to override the CSP in .htaccess files.

Adding

Header add Content-Security-Policy "frame-ancestors *;"

to the .htaccess file should overrule the X-Frame-Options and allow any (!) other server to embed the content. You can choose to be more restrictive by explicitly stating URLs as the [frame-ancestors] value3.