时间戳

首页 > 解决方案 > 拒绝执行内联脚本，因为它违反了以下 CSP，Chrome 扩展

javascript - 拒绝执行内联脚本，因为它违反了以下 CSP，Chrome 扩展

问题描述

我们正在尝试在我们的 chrome 扩展中实现谷歌分析。这些是我们所做的步骤：

我们manifest.json被编辑成这样：

"Content-Security-Policy": "default-src 'self'; script-src 'nonce-4AEemGb0xJptoIGFP3Nd'",

而我们的index.html：

<head>

  <meta charset="utf-8">
  <script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'XXXXX', 'auto');
    ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js' nonce="4AEemGb0xJptoIGFP3Nd"></script>

<!-- End Google Analytics -->
</head>

我们尝试使用 hash、nonce 和 unsafe inline，但都给出了这个错误代码：

在此处输入图像描述

我没主意了。

标签： javascriptgoogle-analyticscontent-security-policy

解决方案

Google 提供了将 GA 添加到 Chrome 扩展的教程：

安装跟踪代码

ga.js如果当前页面是使用https://协议加载的，那么标准的 Google Analytics 跟踪代码片段会从受 SSL 保护的 URL 中提取一个文件。Chrome 扩展程序和应用程序只能使用受 SSL 保护的ga.js. ga.jsChrome 的默认内容安全策略不允许通过不安全的 HTTP加载。这一点，再加上 Chrome 扩展程序托管在chrome-extension://架构下这一事实，需要对通常的跟踪片段进行轻微修改，以ga.js直接从 https://ssl.google-analytics.com/ga.js而不是默认位置提取。

以下是异步跟踪 API 的修改片段（修改后的行以粗体显示）：

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

您还需要通过放宽默认内容安全策略来确保您的扩展程序有权加载资源。manifest.json 中的策略定义可能如下所示：

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

这是一个弹出页面 (popup.html)，它通过外部 JavaScript 文件 (popup.js) 加载异步跟踪代码并跟踪单个页面视图：

<!DOCTYPE html>
<html>
  <head>
    ...
    <script src="popup.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

推荐阅读