如何在没有内容安全策略错误的内容脚本中使用Google +1？ [英] How to use Google +1 in a content script without Content Security Policy error?

问题描述

我试图构建使用 +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'。
 
 < blockquote> 
 
 
这里所有类似的问题都说我应该用content_security_policy将网站列入白名单，但我已经完成了，如您所见。是否有任何想法有什么不对？      扩展程序的内容安全策略 仅适用于扩展页面，不是内容脚本。 
 
当您插入< script> 标记时，它将成为页面CSP的主题，因此更改清单文件中的CSP字符串将不会
 
 
为了解决这个问题，我建议在你的其他内容脚本之前加载 scriptTagContext.js 。首先阅读 README.md 以了解技术，然后从 https://github.com/Rob-例如：每个Github页面上的G + 1  
 $  
 $ / $ ch 
 
 
我以Github为例，因为它强制执行严格的内容安全政策。
 
 $ b 
 manifest.json 
 
 
 
  {
name：Github上的Google +1，
version：1 ，
manifest_version：2，
content_scripts：[{
js：[scriptTagContext.js，contentscript.js]] ，
matches：[*：//*.github.com/*] 
}]，
permissions：[
 *： //apis.google.com / * 
] 
}  

scriptTagC ontext.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）; 
 
 //下一个片段相当于jQuery的$（'body'）。prepend（'< g：plusone />'）
 document.body.insertAdjacentHTML（'afterbegin'， '< G：Plusone精选>< /克：Plusone精选>'）; 
  

I'm trying to build chrome extension that uses +1 google api.

My manifest.json looks like:

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

As you can see I've whitelisted apis.google.com.

My plusone.js looks like:

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>');

As you can see I just inject script tag from whitelisted site.

Unfortunately, when I load a page I got an error:

Refused to load the script 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' because it violates the following Content Security Policy directive: "script-src 'self'".

All similar questions here say I should whitelist site with content_security_policy, but I've done it as you can see. Are there any ideas what's wrong?

解决方案

The extension's Content security policy only applies to extension pages, not content scripts.
When you insert a <script> tag, it becomes subject of the page's CSP, so changing the CSP string in the manifest file won't have any effect.

To solve the problem, I suggest to load scriptTagContext.js before your other content script. First read README.md to understand the technique, then get it from https://github.com/Rob--W/chrome-api/tree/master/scriptTagContext.

Example: G+1 on every Github page

I'm taking Github as an example, because it enforces a strict Content security policy.

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

Get it from 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>');

这篇关于如何在没有内容安全策略错误的内容脚本中使用Google +1？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！