I just implemented the trustpilot carousel integration in magento 2.x. For this I created a simple plugin which inserts the needed data into the head and body of the document (using laoyout files and .phtml). Here is the code:
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 -->
This code was generated using the trustpilot integration tool. It works nicely but when I load the page I get this exception in the inspector console:
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "" from accessing a cross-origin frame
After debugging it with chrome I found out this happens when trustpilot loads some iframe into my webpage. Any Ideas how this happens or how I can prevent it?
This is a magento issue. Smaller version 2.2 will not contain the fix (not yet released). When inserting elements magento will always try to access the iframes via contentDocument. The official fix for this is found in this commit:
After applying it the error vanished.