Chrome扩展CSP(用于外部脚本)

ac1kyiln 于 11个月前发布在 Go

关注(0)|答案(2)|浏览(116)

我想创建一个类似的Chrome扩展https://chromewebstore.google.com/detail/jetradar-cheap-flights-ai/bbdcobeilglncnnogiogdiagjflekean
我有这个代码：

<script async src="https://tp.media/content?currency=usd&trs=291038&shmarker=21549&combine_promos=101_7873&show_hotels=true&powered_by=true&locale=en_us&searchUrl=search.jetradar.com&color_button=%2332a8dd&color_icons=%2332a8dd&dark=%23262626&light=%23FFFFFF&secondary=%23FFFFFF&special=%23C4C4C4&color_focused=%2332a8dd&border_radius=0&no_labels=&plain=true&promo_id=7879&campaign_id=100" charset="utf-8"></script>

字符串
但它每次都会给出安全错误：

Refused to load the script 'https://tp.media/content?currency=usd&trs=291038&shmarker=21549&combine_promos=101_7873&show_hotels=true&powered_by=true&locale=en_us&searchUrl=search.jetradar.com&color_button=%2332a8dd&color_icons=%2332a8dd&dark=%23262626&light=%23FFFFFF&secondary=%23FFFFFF&special=%23C4C4C4&color_focused=%2332a8dd&border_radius=0&no_labels=&plain=true&promo_id=7879&campaign_id=100' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

型
我尝试了不同的方法，但没有帮助（

google-chrome

来源：https://stackoverflow.com/questions/77729432/chrome-extensions-csp-for-external-scripts

2条答案

按热度按时间

sxissh061#

更新内容安全策略（CSP）您可以将其更新为允许来自指定域的脚本。
添加'tp.media'

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://tp.media;">

字符串

赞(0）回复(0）举报 11个月前

rdlzhqv92#

在Manifest V3中，不允许在扩展的上下文中直接执行外部脚本，但仍然允许通过加载到iframe中的网页显示外部内容，前提是iframe加载了通过HTTPS访问的资源。
因此，您可以创建一个HTML页面，该页面将作为一个iframe嵌入到popup扩展中，并将放置您的外部脚本。
为您的扩展创建以下文件：（假设您有一个文件widget.html，可以通过HTTPS在任何服务器上访问。

manifest.json:

{
  "manifest_version": 3,
  "name": "Flight Tickets Widget",
  "version": "1.0",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}

字符串

popup.html（在iframe标记的src属性中指定小部件的HTTPS URL）

<!DOCTYPE html>
<html>
<head>
  <title>Flight Tickets Widget</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 400px;
      height: 600px;
    }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <iframe src="https://yourserver.com/widget.html"></iframe>
</body>
</html>

型
将https://yourserver.com/widget.html替换为您的widget.html页面所在的实际URL。

widget.html（此文件必须托管在您的服务器上，并可通过HTTPS访问）

<!DOCTYPE html>
<html>
<head>
  <title>Widget</title>
</head>
<body>
  <script async src="https://tp.media/content..."></script>
</body>
</html>

型
所有的工作与清单V3！谢谢！

赞(0）回复(0）举报 11个月前

我来回答

Chrome扩展CSP(用于外部脚本)

2条答案

相关问题

热门标签

最新问答