带有轮播集成的 Trustpilot 交叉起源错误答案

【问题标题】：Trustpilot cross-oirigin error with carousel integration带有轮播集成的 Trustpilot 交叉起源错误
【发布时间】：2017-12-22 01:33:01
【问题描述】：

我刚刚在 magento 2.x 中实现了 trustpilot 轮播集成。为此，我创建了一个简单的插件，它将所需的数据插入到文档的头部和正文中（使用 laoyout 文件和 .phtml）。代码如下：

xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" src_type="url" />
    </head>
    <body>
        <referenceContainer name="content">
            <block class="\Magento\Framework\View\Element\Template" name="<vendor>.trustpilot"
                   template="<vendor>_Trustpilot::trustpilot.phtml"/>
        </referenceContainer>
    </body>
</page>

phtml:

<!-- TrustBox widget - Carousel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="<template-id>" data-businessunit-id="<businessunit-id>" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="4,5" data-schema-type="Organization">
    <a href="<correct-url>" target="_blank">Trustpilot</a>
</div>
<!-- End TrustBox widget -->

此代码是使用 trustpilot 集成工具生成的。它工作得很好，但是当我加载页面时，我在检查器控制台中得到了这个异常：

未捕获的 DOMException：无法从 'HTMLIFrameElement' 读取 'contentDocument' 属性：已阻止具有源“”的框架访问跨域框架

在使用 chrome 对其进行调试后，我发现当 trustpilot 将一些 iframe 加载到我的网页中时会发生这种情况。有什么想法是如何发生的或如何防止它？

【问题讨论】：

看起来您网站上的某些东西正试图读取注入 iframe 上的 contentDocument 属性，该 iframe 由 Trustpilot 的域提供。我建议扫描您的脚本以查找 contentDocument。
谢谢，但这不会发生在我们的其他网站上。目前正在与 trustpilot 支持人员联系。解决后会报告。

标签： javascript php html magento2 trustpilot

【解决方案1】：

这是一个 magento 问题。较小的 2.2 版将不包含该修复程序（尚未发布）。插入元素时，magento 将始终尝试通过 contentDocument 访问 iframe。此提交中找到了对此的官方修复：

https://github.com/magento/magento2/commit/3026e814e236d28d54b5fdb57c7da163ed4c7be4

应用后错误消失了。

【讨论】：