CustomEvent.detail"tainted"？

Question

我正在开发一个 Chrome 扩展来增加网站的便利性。
我可以访问该页面的 DOM，但我还需要与该页面上的 "first-party" JS 进行交互，而我无法通过我的扩展程序进行交互。

我可以在页面中插入任意标签（最值得注意的是 <script> 标签），但是由于转义字符串

{
    html: '<div onclick="doSomething(this, \'someName\')"></div>'
}

真的很痛苦，我想将注入的代码保持在绝对最低限度。

我尝试将事件侦听器注入页面以从页面获取 JS 变量，但是运行遇到了问题。
似乎如果 CustomEvent 从扩展程序传递到网站或返回，并且如果 CustomEvent.detail 在某处包含某些类型的对象（至少函数和错误），则整个 CustomEvent.detail 将被清除，即设置为空。

例子

脚本（extension.js）：

(function()
{
    var script = document.createElement('script');
    script.innerHTML = [
"window.addEventListener('xyz', function(ev)",
"    {                                      ",
"        console.log('after dispatch:');    ",
"        console.log(ev.detail);            ",
"    });                                    ",
    ].join('\n');
    document.head.appendChild(script);
    // JSON-serializable data
    var e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger' } });
    console.log('before dispatch:')
    console.log(e.detail);
    window.dispatchEvent(e);
    // non-JSON-serializable data
    var detail = { x: 42, name: 'Schroedinger' };
    detail.detail = detail; // Create circular reference
    e = new CustomEvent('xyz', { detail: detail });
    console.log('before dispatch:')
    console.log(e.detail);
    window.dispatchEvent(e);
    // data with function
    e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger', func: function(){} } });
    console.log('before dispatch:');
    console.log(e.detail);
    window.dispatchEvent(e);
    // data with error object
    e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger', err: new Error() } });
    console.log('before dispatch:');
    console.log(e.detail);
    window.dispatchEvent(e);
})();

输出（为便于阅读而分段）：

before dispatch:
Object {x: 42, name: "Schroedinger"}
after dispatch:
Object {x: 42, name: "Schroedinger"}

before dispatch:
Object {x: 42, name: "Schroedinger", detail: Object}
after dispatch:
Object {x: 42, name: "Schroedinger", detail: Object}

before dispatch:
Object {x: 42, name: "Schroedinger", func: function (){}}
after dispatch:
null

before dispatch:
Object {x: 42, name: "Schroedinger", err: Error at chrome-extension://...}
after dispatch:
null

我最初认为 JSON-可序列化是问题所在，但循环引用在事件中传递得很好，如果 JSON-序列化它们会中断。
感觉某些对象 "taint" 事件的详细信息与 non-crossorigin images taint canvases 相同，只是控制台中没有任何内容。

我无法找到关于此行为的任何文档，并且（如 Paul S. 所建议的），Chrome permissions list.[=21 上似乎没有针对此行为的 "privilege" =]

在 Chrome 40.0.2214.115m、43.0.2357.124m 和 48.0.2547.0-dev 中测试

Answer 1

我发现了什么

我最初认为这是一项安全功能，主要是因为 Firefox 的行为方式。

In ran an equivalent test in Firefox by putting the event listener in a separate file that could be loaded via mozIJSSubScriptLoader:

test.js:

(function()
{
    window.addEventListener('xyz', function(ev)
    {
        console.log('after dispatch:');
        console.log(ev.detail);
    });
})();

firefox.js:

(function()
{
    var mozIJSSubScriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);
    window.addEventListener('load', function load(event)
    {
        window.removeEventListener('load', load);
        window.gBrowser.addEventListener('DOMContentLoaded', function(event)
        {
            mozIJSSubScriptLoader.loadSubScript('chrome://my-extension/content/test.js', window.content, 'UTF-8');
            // JSON-serializable data
            var e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger' } });
            console.log('before dispatch:')
            console.log(e.detail);
            window.content.dispatchEvent(e);
            // non-JSON-serializable data
            e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger', func: function(){} } });
            console.log('before dispatch:');
            console.log(e.detail);
            window.content.dispatchEvent(e);
        });
    });
})();

Result:

(Note that the error occurs twice.)

So in Firefox it doesn't even matter what detail contains - as long as it comes from an extension, the page is not allowed to access it.
Looks like a security feature to me.

我将以上内容放在引号中的原因是因为这在 Chrome!

中有些不同

经过更深入的调查后，看起来虽然扩展和页面共享 DOM 树，但它们存在于两个不同的上下文中。
我不知道这实际上是一项安全功能还是仅仅是一种技术后果，但这当然会导致只能来回传递可克隆对象。

但令我困惑的是，操作默默地失败了，根据 the HTML standard, §2.7.5 (structured clone)，整个操作应该失败并出现错误：

↪ If input is another native object type (e.g. Error, Function)
↪ If input is a host object (e.g. a DOM node)
Throw a DataCloneError exception and abort the overall structured clone algorithm.

解决方法

我最终使用了一个相当简单（虽然不是很漂亮）的解决方法：
在 Chrome 中，没有等同于 mozIJSSubScriptLoader 的东西，但是您可以从扩展中将 <script> 标记附加到页面（在 FF 中不允许这样做）。
与 chrome.extension.getURL 一起，可用于运行一个 JS 文件，在页面的上下文中使用扩展名打包：

(function()
{
    var script = document.createElement('script');
    script.src = chrome.extension.getURL('extension.js');
    document.head.appendChild(script);
})();

当然需要

"web_accessible_resources": [ "extension.js" ]

在 manifest.json 中设置，这不是很漂亮，但应该不是实际问题。

当然，这样做的缺点是，在 extension.js 中，您无法再访问您的扩展程序可以访问的任何 chrome API，但就我而言，我不需要那个。不过，通过 CustomEvent 设置代理并不难，因为 Chrome API 的大部分只需要 returns 数据是可克隆的。

CustomEvent.detail"tainted"？

CustomEvent.detail "tainted"?

javascript

custom-event

google-chrome-extension

例子

我发现了什么

解决方法