Question

因此，我在网站上实施了Google客户评论徽章，并在devtools控制台中抛出了JS错误：

Unrecognized Content-Security-Policy directive 'base-uri'

之前有人遇到此错误并知道如何解决它？

客户评论徽章是使用Google商家中心提供的代码实现的。

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

在IIS中，这就是我对访问控制策略的要求：

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

如果我尝试添加以下内容，我会在开发工具中收到大量错误：

<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;" />

这是其中一个错误：

内容安全策略：页面的设置阻止了加载自己的资源（“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“）。资源： DIV元素的onchange属性。

更新

更新的解决方法因为我无法解决这个问题，我刚刚来解决方法。由于错误是停止其他JavaScript 运行（在抛出错误后执行）我移动了谷歌客户评论代码到页面的最底部。所以就是这样最后一点javascript运行。这样就无所谓了在网站仍然有效的情况下发出错误。

另外，我检查浏览器是否是safari，如果是，我不会渲染徽章。这不是一个理想的解决方案，因为现在safari浏览器中缺少徽章，但它是我得到的最好的，直到我弄明白。

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" });
        });
    }
}

Google客户评论中的Safari浏览器JS错误

0 个答案: