So I have implemented the Google customer-reviews badge on a site and it’s throwing a JS error in the devtools console:
Unrecognized Content-Security-Policy directive 'base-uri'
Anyone encountered this error before and know how to resolve it?
The customer-reviews badge was implemented using the code supplied in the Google merchant center.
<script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script>
<script>
window.renderBadge = function () {
var ratingBadgeContainer = document.createElement("div");
document.body.appendChild(ratingBadgeContainer);
window.gapi.load('ratingbadge', function () {
window.gapi.ratingbadge.render(ratingBadgeContainer, { "merchant_id": MERCHANT_ID, "position": "BOTTOM_RIGHT" });
});
}
</script>
<script>
window.___gcfg = {
lang: 'en_US'
};
</script>
In IIS this is what I have for access control policy:
<httpProtocol>
<customHeaders>
<remove name="X-Powered-By" />
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
</customHeaders>
If I try to add the following I get a large amount of errors in the dev tools:
<add name="Content-Security-Policy"
value="script-src 'self' apis.google.com api.addressy.com maps.googleapis.com
cdn.jsdelivr.net code.jquery.com www.googletagmanager.com;" />
This is one of the errors:
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src https://mydomain.com.au https://apis.google.com https://api.addressy.com https://maps.googleapis.com https://cdn.jsdelivr.net https://code.jquery.com https://www.googletagmanager.com”). Source: onchange attribute on DIV element.
UPDATE
UPDATED WORKAROUND So as I can't resolve this problem I have just come up with a workaround. As the error was stopping other javascript from running(which executed after error thrown) I have moved the google customer reviews code to the very bottom of the page. So it's the very last bit of javascript to run. This way it doesn't matter if it's giving a error as the site will still function.
Also I check if the browser is safari and if it is I don't render the badge. This is not an ideal solution as now the badge is missing from safari browsers but it's the best I got until I figure it out.
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
window.renderBadge = function () {
if (!isSafari) {
var ratingBadgeContainer = document.createElement("div");
document.body.appendChild(ratingBadgeContainer);
window.gapi.load('ratingbadge', function () {
window.gapi.ratingbadge.render(ratingBadgeContainer, { "merchant_id": MERCHANT_ID, "position": "BOTTOM_RIGHT" });
});
}
}