代码之家  ›  专栏  ›  技术社区  ›  user3554151

Chrome扩展将具有动态值的脚本注入到具有严格CSP的页面中

  •  2
  • user3554151  · 技术社区  · 7 年前

    我正在创建一个隐私扩展,在document\u start上运行内容脚本。

    这是我的内容脚本:

    console.log("Content Script Running ...");
    console.log("Window origin: " + window.location.href);
    
    function inject(filePath) {
      var script = document.createElement('script');
      script.src = chrome.extension.getURL(filePath);
      script.onload = function() {
        this.remove();
      };
      (document.head || document.documentElement).appendChild(script);
    }
    
    function injectText(text) {
      var script = document.createElement('script');
      script.textContent = text;
      script.onload = function() {
        this.remove();
      };
      (document.head || document.documentElement).appendChild(script);
    }
    
    function getSeed(origin) {
        // Get a Storage object
        var storage = window.sessionStorage;
    
        // Do we already have a seed in storage for this origin or not?
        var seed = storage.getItem(origin);
    
        if (seed === null) {
            // Initialise a 32 byte buffer
            seed = new Uint8Array(32);
    
            // Fill it with cryptographically random values
            window.crypto.getRandomValues(seed);
    
            // Save it to storage
            storage.setItem(origin, seed);
        }
    
        return seed;
    }
    
    var origin = window.location.hostname;
    
    var seed = getSeed(origin);
    
    injectText("var seed = '" + seed + "';");
    console.log("[INFO] Injected Seed ...");
    
    inject("js/lib/seedrandom.min.js");
    console.log("[INFO] Injected Seed Random ...");
    
    inject("js/random.js");
    console.log("[INFO] Injected Random ...");
    
    inject("js/api/document.js");
    console.log("[INFO] Injected Document API ...");
    
    inject("js/api/navigator.js");
    console.log("[INFO] Injected Navigator API ...");
    
    inject("js/api/canvas.js");
    console.log("[INFO] Injected Canvas API ...");
    
    inject("js/api/history.js");
    console.log("[INFO] Injected History API ...");
    
    inject("js/api/battery.js");
    console.log("[INFO] Injected Battery API ...");
    
    inject("js/api/audio.js");
    console.log("[INFO] Injected Audio API ...");
    
    inject("js/api/element.js");
    console.log("[INFO] Injected Element API ...");
    

    使用src属性加载的脚本是可以的,因为它们位于。js文件和从扩展加载,但是一个脚本具有动态值,即var seed=。。。被阻止,因为它是使用textContent属性注入的。

    有什么想法吗?

    1 回复  |  直到 7 年前
        1
  •  2
  •   user3554151 user3554151    7 年前

    我解决了这个问题。我遇到的主要问题是尝试注入一个内联文本脚本,该脚本具有以下内容:

    var seed = $(value that changes depending on the page)
    

    这会被某些网站(如推特)屏蔽。com和github。具有限制性内容安全策略的com。

    var filePath = // Get filepath to script
    var seed = // Get seed value in content script
    
    var script = document.createElement('script');
    script.setAttribute("data-seed", seed);
    script.src = chrome.extension.getURL(filePath);
    script.onload = function() {
      this.remove();
    };
    (document.head || document.documentElement).appendChild(script);
    

    这将在页面中创建一个脚本,如下所示

    <script data-seed="$(DATA-SEED-VALUE)" src="$(SRC-VALUE)"></script>
    

    然后,在此脚本中(在网页内容中),该脚本现在作为页面脚本运行:

    var seed = document.currentScript.getAttribute("data-seed");
    

    它得到了种子。这个解决方案更简洁、更容易,并且不需要更改CSP,这可能会给您正在交互的站点带来安全问题。