0

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" });
        });
    }
}
Web Dev Guy
  • 1,693
  • 3
  • 18
  • 42
  • so ... what does your content-security-policy look like? – Jaromanda X Aug 25 '17 at 06:33
  • @JaromandaX Hi thanks for the help. Hmm don't have one as far as I'm aware. Working with a site someone else built. Where would I find it. its a customized version of nopcommrce, built from the source code – Web Dev Guy Aug 25 '17 at 06:36
  • either in the HTTP headers or as a html ` – Jaromanda X Aug 25 '17 at 06:44
  • in html all I have is this `` Can't find anything in the headers for it. – Web Dev Guy Aug 25 '17 at 06:49
  • `in http` - that looks like HTML ... http headers don't look like that - anyway, any indication in the developer tools console where the CSP comes from? – Jaromanda X Aug 25 '17 at 06:50
  • sorry typo, nah in the http headers there is nothing about csp. Im looking at the first request on the network tab which is the `/` – Web Dev Guy Aug 25 '17 at 06:52
  • There is this which is the only thing which remotely looks like it might be related to CSP. `Access-Control-Allow-Origin` – Web Dev Guy Aug 25 '17 at 06:53
  • It’s loading a `https://www.google.com/shopping/customerreviews/badge…` URL in an iframe, and that document is served the CSP header `script-src 'unsafe-inline' https: http: 'unsafe-eval';object-src 'none';base-uri 'self';report-uri /_/VerifiedReviewsBadgeUi/cspreport`, which is a valid CSP policy. And Safari supports `base-uri`. So dunno why that message appears – sideshowbarker Aug 25 '17 at 06:54
  • nope, that's a CORS header, nothing to do with CSP – Jaromanda X Aug 25 '17 at 06:54
  • what version of Safari? – Jaromanda X Aug 25 '17 at 06:54
  • If that has nothing to do with your server, not much you can do – Jaromanda X Aug 25 '17 at 06:56
  • It was the latest version on ipads and iphones, damn I gotta leave the office :/ still new so can't stick around. Will be home in a few hours – Web Dev Guy Aug 25 '17 at 06:58
  • @JaromandaX I have updated my question and added the current security policy – Web Dev Guy Aug 28 '17 at 01:18

0 Answers0