在使用 CSP 的网站上安装计数器

Yandex Metrica 生成的代码片段旨在内联插入页面的 HTML 代码中。 在使用内容安全政策技术的网站上，除非您采取特定步骤，否则此代码将不会运行。 特别是，您需要使用 HTTP 标头来授予浏览器处理数据的权限。 HTTP 标头应包含 src-script 指令与 nonce 属性（这需要对 script 元素的内容进行签名）以及处理noscript元素内容的 img-src 指令。

此外，Yandex Metrica 还提供了另一种启用计数器代码的方法：仅在页面的 HTML 代码中放置 noscript 元素的内容，并将 script 元素的内容移到外部脚本中（例如，移动到 JS 文件）。

无论您选择哪种方法，都必须修改 HTTP 标头以添加访问 Yandex Metrica 的权限。

将计数器代码插入网站页面的 HTML 代码中

如果您使用此方法，Content-Security-Policy 或者 Content-Security-Policy-Report-Only HTTP 标头必须包含以下指令：

• 带 nonce 属性的 script-src。 此属性必须包含具有随机字符（拉丁字母和数字）序列的字符串值。 该值必须在服务器上针对每个请求单独随机生成。

  Content-Security-Policy: script-src 'nonce-<character sequence>';
  

  网站页面上计数器代码的 script 元素中 nonce 属性必须包含相同的字符序列。

  ...
  <!-- Yandex Metrica counter -->
  <script type="text/javascript" nonce="<character sequence>">
      (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
      []).push(arguments)};
  ...
  

• img-src 允许处理 noscript 元素内容。

  Content-Security-Policy: img-src https://mc.yandex.ru;
  

• connect-src 用于连接到 Yandex Metrica。

  Content-Security-Policy: connect-src https://mc.yandex.ru;
  

• 带字符串 blob: https://mc.yandex.ru 的 child-src 使 Session Replay、click map、link map 和 scroll map 正常工作。

  Content-Security-Policy: child-src blob: https://mc.yandex.ru;
  

• 带字符串 blob: https://mc.yandex.ru 的 frame-src 使 Session Replay、click map、link map 和 scroll map 正常工作。

  Content-Security-Policy: frame-src blob: https://mc.yandex.ru;
  

使用此方法时的 HTTP 标头示例：

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src https://mc.yandex.ru https://yastatic.net 'nonce-<character sequence>';
 connect-src https://mc.yandex.ru;
 ...

使用外部脚本连接计数器代码

如果您使用此方法，Content-Security-Policy 或者 Content-Security-Policy-Report-Only HTTP 标头可以有一组通用指令，包括从 Yandex Metrica 加载数据的规则：

• script-src 允许处理脚本。

  Content-Security-Policy: script-src https://mc.yandex.ru https://yastatic.net;
  

• img-src 允许处理 noscript 元素内容。

  Content-Security-Policy: img-src https://mc.yandex.ru;
  

  已复制

• connect-src 用于连接到 Yandex Metrica。

  Content-Security-Policy: connect-src https://mc.yandex.ru;
  

• 带字符串 blob: https://mc.yandex.ru 的 child-src 使 Session Replay、click map、link map 和 scroll map 正常工作。

  Content-Security-Policy: child-src blob: https://mc.yandex.ru;
  

  已复制

• 带字符串 blob: https://mc.yandex.ru 的 frame-src 使 Session Replay、click map、link map 和 scroll map 正常工作。

  Content-Security-Policy: frame-src blob: https://mc.yandex.ru;
  

  已复制

使用此方法时的 HTTP 标头示例：

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src 'self' https://mc.yandex.ru https://yastatic.net;
 connect-src https://mc.yandex.ru;
 ...

下面的示例在外部 JS 文件中启用 JavaScript 代码。 只有带 src 属性的 script 元素需要添加到网站页面的 HTML 代码中。 该属性必须包含文件的路径（例如，metrika.js）。

<script type="text/javascript" src="/metrika.js"></script>

1. 在 Yandex Metrica 界面中，转至 Settings 中的 Tag 部分并复制 script 元素的内容。

2. 将此代码添加到 metrika.js 文件。

   文件内容示例

   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
   []).push(arguments)};
       m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)
   [0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym")
       ym(XXXXXX, "init", {
           id:XXXXXX,
           clickmap:true,
           trackLinks:true,
           accurateTrackBounce:true
       });
   

   其中 XXXXXX 是 Yandex Metrica 计数器号码。

   已复制

3. 为了让计数器收集禁用 JavaScript 的用户的数据，请将 noscript 元素添加到网站页面的 HTML 代码中：

   <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript> 
   

   已复制

联系我们