Question

我写了一个chrome扩展，在github页面上插入一个图像，图像的src是根据XMLHttpRequest的响应（blob类型）创建的，如下所示：

let xhr = new XMLHttpRequest();
  let badgeUrl = `https://api.travis-ci.org${project}.svg`;
  xhr.open('GET', badgeUrl, true);
  xhr.responseType = 'blob';
  xhr.onreadystatechange = () => {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        const img = $("<img alt='build status'></img>");
        img.attr('src', window.URL.createObjectURL(xhr.response));
        img.on('load', () => {
          const link = $(`<a class='travis-ci' href='https://travis-ci.org${project}'></a>`);
          link.append(img);
          link.appendTo($(el));
        });
    }
  };
  xhr.send();

第一次登陆github页面时效果很好，但如果我点击标签链接访问github中的其他页面（例如从https://github.com/Username?tab=repositories登陆https://github.com/Username），我会得到这个CSP控制台日志错误：

frameworks-506169c….js:4 Refused to load the image 'blob:https://github.com/e6006be0-c503-421b-87a5-46fe8a150d2a' because it violates the following Content Security Policy directive: "img-src 'self' data: assets-cdn.github.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com".

这是截图： sceenshot

错误数量等于上一页中插入的blob图像数量。

实际上，它对此扩展的功能没有影响，但我期待在没有这些恼人的错误日志的情况下使控制台更加干净。有人有这个想法吗？

顺便说一下，我已经将像'api.travis-ci.org'这样的链接添加到清单文件的permissions中，如下所示：

  "permissions": [
    "https://api.travis-ci.org/"
  ],
  "content_security_policy": "script-src 'self' https://github.com; object-src 'self'",
  "content_scripts": [ {
    "js":      [ "bundle.js"],
    "matches": [ "https://github.com/*" ],
    "run_at":  "document_idle"
  } ]

控制台显示CSP错误，因为chrome扩展在位置更改时重新加载blob文件

0 个答案: