拒绝诬陷https://api.xxx.jp/'因为它违反了以下内容安全策略指令：“frame src'self'

Question

我们开始吧：我是谷歌chrome扩展开发的新手，所以请容忍我。

我有一个分机，它给了我以下错误：

拒绝框架'https://api.xxx.jp/'，因为它违反了以下内容安全策略指令："frame-src'自己'https://staticxx.facebook.comhttps://twitter.comhttps：//*.twimg.comhttps://5415703.fls.doubleclick.nethttps://player.vimeo.comhttps://pay.twitter.comhttps://www.facebook.comhttps://ton.twitter.comhttps://syndication.twitter.comhttps://vine.co推特：https://www.youtube.comhttps://platform.twitter.comhttps://upload.twitter.comhttps://s-static.ak.facebook.comhttps://4337974.fls.doubleclick.nethttps://8122179.fls.doubleclick.nethttps://donate.twitter.com”。

My manifest.json文件具有以下有关内容安全策略的设置：

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

在我的content.js文件中，我通过iframe标签调用api：

<iframe src="'+url+'" name="xxxExtensionsFrame" width="380" height="' + (heightBase - 5) + '" border="0" frameborder="0" scrolling="no"></iframe>

api的url总是https形式。

• 此扩展适用于大多数网站，但也适用于某些网站，如https://twitter.com/?lang=en，它将显示一个灰色弹出框，其中包含上述错误消息

下面是我在工作中的扩展示例：

<video class="image-viewer horizontal" poster="https://thumb.gyazo.com/thumb/642_w/_262d5667a035ff8505079ce6994d3c3f-gif.jpg" autoplay="" playsinline="" loop="" style="max-width: 642px; max-height: 100%;"><source src="https://i.gyazo.com/90701bdda37df8282699208efaa215a5.mp4" type="video/mp4"></video>

欢迎任何帮助。

Answer 1

Twitter使用内容安全策略头。解决问题的唯一方法是使用后台脚本中的chrome.web请求API修改响应标头。

以下是一个例子：

chrome.webRequest.onHeadersReceived.addListener(info => {
    const headers = info.responseHeaders; // original headers
    for (let i=headers.length-1; i>=0; --i) {
        let header = headers[i].name.toLowerCase();
        if (header === "content-security-policy") { // csp header is found
            // modify frame-src here
            headers[i].value = headers[i].value.replace("frame-src", "frame-src https://domain-you-want-to-iframe.com/");
        }
    }
    // return modified headers
    return {responseHeaders: headers};
}, {
    urls: [ "<all_urls>" ], // match all pages
    types: [ "sub_frame" ] // for framing only
}, ["blocking", "responseHeaders"]);

这个例子摘自我的博客文章。