0

我有一个 Chrome 扩展程序，单击它会在页面上插入视频：

<video width="320" height="240" controls>
  <source src="https://example.com/video.mp4" type="video/mp4">
</video>

在 Twitter.com 上使用扩展程序时，视频不会加载到页面上，并且在控制台中我看到此错误：

Refused to load media from 'https://example.com/video.mp4' because it violates the following Content Security Policy directive: "media-src 'self' blob:

在Manifest.json（version3）中，我尝试了以下几个版本，但没有任何效果。有谁知道如何解决此错误以便可以加载视频？非常感谢任何和所有帮助 - 谢谢。

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; media-src * blob: https://example.com/*"
  },
4

3 回答 3

0

正如@granty 提到的，鉴于 Twitter 禁止 CSP，没有直接的解决方案。

但是，一种解决方法是在页面上插入 iframe，然后在 iframe 中插入插入视频。希望这可以帮助其他寻找解决方案的人！

于 2021-08-14T20:43:57.310 回答
0

代替：

"extension_pages": "script-src 'self'; object-src 'self'; media-src * blob: https://example.com/*"

尝试：

"extension_pages": "script-src 'self'; object-src 'self'; media-src example.com"
于 2021-08-12T10:53:12.427 回答
0

不幸的是，您不能在<video>受 CSP 保护的页面中插入标签。Twitter 有一个 CSP：

media-src 'self' blob: https://*.vine.co https://*.giphy.com
   https://media.riffsy.com https://*.twimg.com https://twitter.com
   https://dhdsnappytv-vh.akamaihd.net https://mdhdsnappytv-vh.akamaihd.net
   https://mmdhdsnappytv-vh.akamaihd.net https://mpdhdsnappytv-vh.akamaihd.net
   https://pdhdsnappytv-vh.akamaihd.net https://dwo3ckksxlb0v.cloudfront.net
   https://*.pscp.tv https://*.video.pscp.tv;

如您所见，这是一个 twitter 的 CSP 阻止了您扩展的工作：

拒绝加载媒体，'https://example.com/video.mp4'因为它违反了以下内容安全策略指令：“ media-src 'self' blob: ...

因为您的扩展程序的 CSP 是media-src * blob: https://example.com/*"- 这些不是您在控制台中看到的阻止规则。

于 2021-08-14T16:19:45.277 回答