将 H5P 从 Wordpress 嵌入到 R Bookdown

Question

我尝试在我的

H5P

中添加交互式

bookdown

功能。

你可以在这本书上看到它们

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

看看作者如何嵌入托管在他的 Wordpress 网站上的 H5P 元素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>

我设法嵌入 H5P

iframe

当它来自 https://h5p.org 像这样

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

我的网站上有一个 H5P 元素 https://marco-kuehne.com/wp-admin/admin-ajax.php?action=h5p_embed&id=2 但是当嵌入时我的浏览器说

"如果其他站点嵌入了该页面，则该网站将不允许 Firefox 显示该页面"

问题似乎出在我的服务器上。任何人都知道如何配置服务器以允许嵌入此 H5P 元素？谢谢

Answer 1

您的服务器配置为不允许将其内容嵌入其他站点 - 它正在将所谓的 X-Frame-Options 设置为

sameorigin

。 您需要通过设置 Content Security Policy (CSP) 来解决这个问题。

如果您顺便点击“了解更多”，Firefox 会提示该问题。

在响应标头中设置 CSP 的详细信息将取决于您使用的服务器软件（并取决于您是否有权更改服务器设置），但通常可以通过放置

.htaccess

文件到您的网站空间的根路径或相关目录 - 如果服务器允许覆盖

.htaccess

文件中的 CSP。

添加

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

到

.htaccess

文件应该否决

X-Frame-Options

并允许任何（！）其他服务器嵌入内容。您可以通过将 URL 明确声明为 [frame-ancestors] 值3.

来选择更严格