Question

我正在阅读the documentation on Chrome Apps and CSP.但是，我在浏览器中看到的行为与文档不匹配，文档本身似乎相互矛盾 - 具体来说：

指向远程网址的iframe，这些网址在Chrome应用内删除。

vs，在完全相同的页面上：

沙盒页面可以使用iframe

其中似乎包含了清单中permissions允许的远程iframe。

我的用例非常简单：我想将Spotify播放器嵌入我的Chrome应用中，通常使用

<iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

我的manifest.json

"app": {
  "background": {
    "scripts": ["js/background.js"]
  }
},
"permissions": [
  "https://embed.spotify.com/*"
],
"sandbox": {
  "pages": ["sandbox.html"]
},

我的sandbox.html（在背景页面上有自己的iframe）：

<body>
  <iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300"  height="380" frameborder="0" allowtransparency="true"></iframe>
</body>

但是我仍然得到：

拒绝框架＆＃39; https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs＆＃39;因为它违反了以下内容安全政策指令：＆＃34; frame-src＆＃39; self＆＃39; data：chrome-extension-resource：＆＃34;。 sandboxed.html：2

即使这与在应用页面中嵌入沙盒页面示例匹配。也许我应该使用webview代替？文档没有说清楚。

我可以访问iframe中的外部网站吗？如果是，怎么做？

Answer 1

这句话：

指向远程网址的iframe，这些网址在Chrome应用中已停用。

不是真的。指向远程网址的iframe默认为，但有两种机制可以加载指向远程网址的iframe：

如果您有从网络上加载的内容（例如，它需要是最新的）但是没有与应用的其余部分进行交互，请使用webview < / strong>即可。 webview可以访问iframe，但它们根本无法与应用的其余部分进行通信。另一方面，他们设置起来很简单。

如果您有内容从网络加载并与应用的其余部分进行互动，请使用沙盒：

制作一个普通的页面（包含在您的Chrome应用中），这是一个常规的Chrome应用页面，可以访问chrome。* API，它会在iframe中加载沙盒页面（2）

使用iframe指向第三方网站，第三方脚本等制作沙盒页面（包含在您的扩展程序中）。

第三方网站位于（2）
的iframe中

然后使用HTML5 postMessage() API发送1到2的消息。例如，第1页可以使用chrome。* API执行操作，然后将消息发布到沙箱页面。然后，沙盒页面会接收该消息并执行某些操作。

就我而言：

（2）加载soundcloud API（使用iframe，例如（3））

（1）使用postmessage（）告诉（2）播放轨道，soundcloud API在iframe（3）中执行。

如何在Chrome应用中访问/替换iframe？

1 个答案: