如何在没有内容安全政策错误的内容脚本中使用Google +1？

Question

我正在尝试使用+1 google api构建chrome扩展程序.

我的manifest.json看起来像:

"manifest_version": 2,
"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'",
...
"matches": ["http://demosite.com/*"],
"js": ["js/jquery.js","js/social/plusone.js"]    

正如您所看到的,我将apis.google.com列入白名单.

我的plusone.js看起来像:

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://apis.google.com/js/plusone.js";
head.appendChild(script);

$('li.subscription').before('<g:plusone></g:plusone>');

正如您所看到的,我只是从白名单网站注入脚本标记.

不幸的是,当我加载页面时出现错误:

拒绝加载脚本apis.google.com/ / scs/apps-static / /js/k=oz.gapi.ru.Fqrb4MMzOT8.O/m...sv=1/d=1/ed=1/am=IQ /rs=AItRSTNEKbnLkdtNZVz4hKH7VV4tY98scw/cb=gapi.loaded_0'因为它违反了以下内容安全策略指令:"script-src'self'".

这里所有类似的问题都说我应该使用content_security_policy将网站列入白名单,但我已经完成了,你可以看到.有什么想法有什么不对吗？

Answer 1

扩展程序的内容安全策略 仅适用于扩展页,而不适用于内容脚本.
插入<script>标记时,它将成为页面CSP的主题,因此更改清单文件中的CSP字符串将不起任何作用.

要解决此问题,我建议scriptTagContext.js在您的其他内容脚本之前加载.首先阅读README.md以了解该技术,然后从https://github.com/Rob--W/chrome-api/tree/master/scriptTagContext获取它.

示例:每个Github页面上的G + 1

我以Github为例,因为它强制执行严格的内容安全策略.

的manifest.json

{
    "name": "Google +1 on Github",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["scriptTagContext.js", "contentscript.js"],
        "matches": ["*://*.github.com/*"]
    }],
    "permissions": [
        "*://apis.google.com/*"
    ]
}

scriptTagContext.js

从https://raw.github.com/Rob--W/chrome-api/master/scriptTagContext/scriptTagContext.js获取

contentscript.js

var script = document.createElement('script');
script.src = 'https://apis.google.com/js/plusone.js';
document.head.appendChild(script);

// Next snippet is equivalent to jQuery's $('body').prepend('<g:plusone/>')
document.body.insertAdjacentHTML('afterbegin', '<g:plusone></g:plusone>');