我已经为Chrome和Firefox制作了浏览器扩展程序。 Firefox使用Web Extension APIs开发,因此这两个扩展程序之间的代码差异很小。 作为扩展程序中的重要功能,一些HTML元素通过内容脚本成为网页的一部分。 这也涉及加载托管在某些服务器上并通过https提供的图像。 现在,在Twitter和GitHub上运行扩展程序时,这些图像在Chrome中正常加载。 但是,有趣的是,在Firefox中,当相应的扩展程序在Twitter和GitHub上运行时,根本不会加载图像。 更有趣的是,Twitter在其响应头中设置的内容脚本策略禁止了该图像加载,因此Firefox的行为是正确的。 所以,我的问题基本上是:Chrome是否在这里违反了CSP?
附上Twitter设置的CSP-- https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph.facebook.com https://twitter.com 'unsafe-eval' https://.twimg.com https://api.twitter.com https://analytics.twitter.com https://publish.twitter.com https://ton.twitter.com https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com 'self'; frame-ancestors 'self'; font-src https://twitter.com https://.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://twitter.com https://.twimg.com https://ton.twitter.com blob: 'self'; connect-src https://graph.facebook.com https://.giphy.com https://.twimg.com https://pay.twitter.com https://analytics.twitter.com https://media.riffsy.com https://upload.twitter.com https://api.mapbox.com 'self'; style-src https://fonts.googleapis.com https://twitter.com https://.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src 'self'; frame-src https://staticxx.facebook.com https://twitter.com https://.twimg.com https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-static.ak.facebook.com 'self' https://donate.twitter.com; img-src https://graph.facebook.com https://.giphy.com https://twitter.com https://.twimg.com data: https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://.fbcdn.net https://syndication.twitter.com https://media.riffsy.com https://www.google.com https://stats.g.doubleclick.net https://*.tiles.mapbox.com https://www.google-analytics.com blob: 'self'; report-uri https://twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;
该代码块规定了脚本、字体、媒体、连接、样式、对象和图片的来源。其中包括Facebook、Google Analytics、Twitter等网站,以及自身网站。此外还规定了一些其他限制,如禁止使用eval()函数等。
请注意其中的“img-src”。还有一个困扰我的问题是,扩展程序在清单文件中也指定了自己的内容脚本策略。这两个策略如何共同发挥作用?
附上Twitter设置的CSP-- https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://graph.facebook.com https://twitter.com 'unsafe-eval' https://.twimg.com https://api.twitter.com https://analytics.twitter.com https://publish.twitter.com https://ton.twitter.com https://syndication.twitter.com https://www.google.com https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com 'self'; frame-ancestors 'self'; font-src https://twitter.com https://.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://twitter.com https://.twimg.com https://ton.twitter.com blob: 'self'; connect-src https://graph.facebook.com https://.giphy.com https://.twimg.com https://pay.twitter.com https://analytics.twitter.com https://media.riffsy.com https://upload.twitter.com https://api.mapbox.com 'self'; style-src https://fonts.googleapis.com https://twitter.com https://.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src 'self'; frame-src https://staticxx.facebook.com https://twitter.com https://.twimg.com https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-static.ak.facebook.com 'self' https://donate.twitter.com; img-src https://graph.facebook.com https://.giphy.com https://twitter.com https://.twimg.com data: https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://.fbcdn.net https://syndication.twitter.com https://media.riffsy.com https://www.google.com https://stats.g.doubleclick.net https://*.tiles.mapbox.com https://www.google-analytics.com blob: 'self'; report-uri https://twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;
该代码块规定了脚本、字体、媒体、连接、样式、对象和图片的来源。其中包括Facebook、Google Analytics、Twitter等网站,以及自身网站。此外还规定了一些其他限制,如禁止使用eval()函数等。
请注意其中的“img-src”。还有一个困扰我的问题是,扩展程序在清单文件中也指定了自己的内容脚本策略。这两个策略如何共同发挥作用?
chrome.webRequest.onHeadersReceived
可以重写 CSP 标头。 - Xan