内容安全政策的扩展和bookmarklets [英] Content Security Policy for extensions and bookmarklets
问题描述
Github的内容安全政策：
内容安全策略：default-src *; script-src
assets-cdn.github.com www.google-analytics.com
collector-cdn.github.com; object-src assets-cdn.github.com; style-src
'self''unsafe-inline''unsafe-eval'assets-cdn.github.com; img-src
'self'data：assets-cdn.github.com identicons.github.com
www.google-analytics.com collector.githubapp.com
* .githubusercontent.com * .gravatar.com * .wp.com; media-src'none'; frame-src'self'render.githubusercontent.com www.youtube.com
player.vimeo.com checkout.paypal.com; font-src assets-cdn.github.com;
connect-src'self'ghconduit.com:25035 live.github.com
uploads.github.com s3.amazonaws.com
我们可以通过浏览器扩展服务来剪辑/检索内容，例如Evernote或Pocket。
我没有看到任何Pocket或Evernote在这个Github政策。有人可以解释为什么Pocket扩展能够从Github检索内容，而Evernote扩展没有，有一个）CSP政策是否可以阻止小书签应用程序或浏览器扩展应用程序（如剪辑器）加载？如果是这样，Pocket如何能够在任何内容上进行扩展？
在我们的bookmarklets / extensions中有这个问题，我希望它们能够平滑地工作作为口袋扩展，但我真的不知道从哪里开始......谢谢
编辑：
当人们要求评论中的代码时，我们的bookmarklet会加载这个javascript：
javascript： （function（）{
function loadScript（a，b）{
var c = document.createElement（'script'）;
c.type ='text / javascript';
c.src = a;
var d = document.getElementsByTagName（'head'）[0]，
done = false;
c.onload = c.onreadystatechange = function（）{
if（！done&&（！this.readyState || this.readyState =='loaded'|| this.readyState =='complete'））{
done = true;
b（）
}
};
d.appendChild（c）
}
loadScript（'http://localhostsss.com:9000/assets/js/backbone/views/clipping/clippinglocal。 js'，function（）{
s.clipping.initClipping（）
}）
}）（）
如果我尝试在具有CSP的中等页面中启动此书签，我会收到以下错误消息。
拒绝加载脚本
' http：// localhostssss.com:9000/assets/js/backbone/views/clipping/clippinglocal.js '
，因为它违反了以下内容安全政策指令：
script-srcunsafe-eval ''unsafe-inline'about：
https：// .akamaihd.net http：// .baidu.com https ：//bitly.com
https：// .cloudfront.net https：// .facebook.com https：// .facebook.net
ht tps：//getpocket.com https：// .github.com https：// .googleapis.com
https://ssl.google-analytics.com https://app.greenhouse.io
https：// .medium.com https://myspace.com https：// .pinterest .com
https://www.readability.com https ：//thinkery.me https://this.cm
https：// .twitter。 com https://use.typekit.net https：//*.instapaper.com
'self'。
有人可以告诉我如何让我们的书签在Media或Github等网站上加载，这些网站有CSP策略。 b
我不能多说浏览器扩展，因为我还没有开发它，而且这个人不在这里。我只知道我们有同样的问题，我们的浏览器扩展与我们的bookmarklets基本上是相同的代码，只是它有点适合浏览器扩展外壳。如果你只能回答书签的情况下，我会没事的，接受答案，但浏览器扩展的任何提示将会很好：）
CSP策略可否阻止书签工具应用或浏览器扩展程序应用程序加载？
非常简单：如果扩展名或小书签违反CSP，它将被阻止。
因此，如果CSP阻止所有内联脚本，则不会有小书签工作。 Github使用 media-src 来做到这一点，因为通过简单的存在，默认情况下，media-src指令会嵌入脚本。所以没有书签可以在Github上工作。 （注意，尽管所有浏览器都以这种方式工作，但这并不是标准所说的应该发生的事情，Bookmarklets实际上应该免除CSP的限制，但不幸的是没有浏览器允许这样做）
现在，至于哪些扩展可以工作或无法工作，取决于扩展本身作品。扩展不能被CSP直接阻止，但是，如果扩展尝试做违反CSP的任何操作，它可能会失败。因此，在Github上，如果扩展尝试将本地脚本添加到页面的DOM中，或者尝试从未批准的位置向页面的DOM附加外部脚本，或者执行CSP中描述的其他任何受限制的事件，则可能会失败。
那么，Evernote扩展的哪一部分会导致CSP错误，以及Pocket如何做相似的工作而不会导致错误？我不知道。这一切都取决于如何写这些应用程序的具体细节。最有可能的是，查看他们的代码并尝试弄清楚它是非常简单的。据我所知，所有Chrome扩展程序都是用JavaScript编写的，并且打包为一个zip文件 - 只是具有不同的文件扩展名。我相信Firefox插件也是如此。
Github has the following Content Security Policy:
Content-Security-Policy:default-src *; script-src assets-cdn.github.com www.google-analytics.com collector-cdn.github.com; object-src assets-cdn.github.com; style-src 'self' 'unsafe-inline' 'unsafe-eval' assets-cdn.github.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com; media-src 'none'; frame-src 'self' render.githubusercontent.com www.youtube.com player.vimeo.com checkout.paypal.com; font-src assets-cdn.github.com; connect-src 'self' ghconduit.com:25035 live.github.com uploads.github.com s3.amazonaws.com
We can clip/retrieve content from the web with browser extensions of services likes Evernote or Pocket.
I don't see any reference to Pocket or Evernote in this Github policy. Can someone please explain why the Pocket extension is able to retrieve content from Github, while the Evernote extension is not, having a CSP error)
Can the CSP policy prevent a bookmarklet app or a browser extension app like a clipper to load? If so, how Pocket does to be able make their extension work on any content?
We have this problem in our bookmarklets/extensions and I would like them to work as smooth as Pocket extension but I don't really know where to start... thanks
Edit: As people are asking for code in the comments, our bookmarklet is loaded with this javascript:
javascript: (function() {
function loadScript(a, b) {
var c = document.createElement('script');
c.type = 'text/javascript';
c.src = a;
var d = document.getElementsByTagName('head')[0],
done = false;
c.onload = c.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
b()
}
};
d.appendChild(c)
}
loadScript('http://localhostsss.com:9000/assets/js/backbone/views/clipping/clippinglocal.js', function() {
s.clipping.initClipping()
})
})()
If I try to launch this bookmarklet in a Medium page, which have a CSP, I get the following error.
Refused to load the script 'http://localhostssss.com:9000/assets/js/backbone/views/clipping/clippinglocal.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'unsafe-inline' about: https://.akamaihd.net http://.baidu.com https://bitly.com https://.cloudfront.net https://.facebook.com https://.facebook.net https://getpocket.com https://.github.com https://.googleapis.com https://ssl.google-analytics.com https://app.greenhouse.io https://.medium.com https://myspace.com https://.pinterest.com https://www.readability.com https://thinkery.me https://this.cm https://.twitter.com https://use.typekit.net https://*.instapaper.com 'self'".
Can someone tell me how to make our bookmarklet loadable on websites like Medium or Github which have a CSP policy.
I can't talk so much about browser extensions yet because I didn't work on it yet and the person is not here atm. I just know that we have the same problem and our browser extensions are basically the same code as our bookmarklets except it's a little bit adapted to fit in a browser extension shell. If you can only answer for the bookmarklet case I'll be ok and accept the answer but any hint for browser extensions would be nice too :)
Can the CSP policy prevent a bookmarklet app or a browser extension app like a clipper to load?
It is very simple: The extension or bookmarklet will be blocked if it violates the CSP.
So, if the CSP blocks all inline script, no bookmarklet will work. Github does that with media-src because, by simply existing, the "media-src" directive blocks inline script by default. So no bookmarklet can work on Github.
(As a side note, even though all browsers work this way, this isn't what the standards says should happen. Bookmarklets should actually exempt from CSP, but unfortunately no browsers have bothered to permit that.)
Now, as for which extensions will work or will not work, that depends on how the extension itself works. Extensions can not be directly blocked by CSP, but, if the extension tries to do anything which does violates the CSP, it may fail. So, on Github, if the extension tries to add native script into the page's DOM, or tries to append an external script to the page's DOM from an unapproved location, or do any of the other restricted things described in the CSP, it may fail.
So, what part of the Evernote extension is causing a CSP error and how does Pocket do a similar job without causing an error? I don't know. That all depends on the very specific details of how those applications are written. Most likely it is quite simple to look at their code and try to figure it out. As far as I know, all Chrome extensions are written in JavaScript and packaged as a zip file - just with a different file extension. I believe that the same is true of Firefox addons also.
这篇关于内容安全政策的扩展和bookmarklets的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
