Skip to content

Instantly share code, notes, and snippets.

@cookiengineer cookiengineer/README.md
Last active Jan 24, 2019

Embed
What would you like to do?
Chromium/Gecko Bug when using instanceof operator across iframes

instanceof operator corruption when transferring arrow functions across iframes

Test Case Architecture

The idea is to have two different html files to communicate with each other, whereas the index.html symbolizes the main program and has APIs that are accessible inside the iframe via window.parent as the origin and other CORS relevant headers are correctly set.

The "public API" of the browser or browser.settings object is asynchronous, so it uses a callback parameter which is optional and validated with a ternary.

The Problem

When calling the API inside the same html file or via different scripts, it works as expected.

  • typeof callback is "function".
  • callback instanceof Function is true.

However, when calling the API from inside the iframe via parent.browser or other means of access, it behaves differently.

  • typeof callback is "function".
  • callback instanceof Function is false.

How to Reproduce

Go to this folder, use a local web server that correctly serves .mjs files as Content-Type: application/javascript.

Info: If you want to use python's integrated http.server, you need to apply the patch to the /usr/lib/python3.7/http/server.py file and integrate the extensions_map with the correct file extensions and headers.

git clone <this-gist> /tmp/whatever;

cd /tmp/whatever;
python -m http.server 1337;
chromium http://localhost:1337;

Inside Chromium, there are two console groups displayed inside the Dev Tools console. Their contents should be identical, but they are not.

<!DOCTYPE html>
<script type="module" src="index.mjs"></script>
<iframe id="main-webview" sandbox="allow-scripts allow-same-origin" src="/test-arrow.html"></iframe>
const Settings = function() {};
Settings.prototype = Object.assign({}, {
check: function(data, callback) {
console.log(data, callback);
console.log(typeof callback, callback instanceof Function);
}
});
const check = function(data, callback) {
console.log(data, callback);
console.log(typeof callback, callback instanceof Function);
};
const _update = function(a,b) {
};
let settings = new Settings();
let browser = {};
browser.settings = settings;
console.group('-- inside index --');
check(null, _ => {});
check(null, _ => _update);
check(null, _ => _update('foo', 'bar'));
settings.check(null, _ => {});
settings.check(null, _ => _update);
settings.check(null, _ => _update('foo', 'bar'));
browser.settings.check(null, _ => {});
browser.settings.check(null, _ => _update);
browser.settings.check(null, _ => _update('foo', 'bar'));
console.groupEnd('-- inside index --');
window.settings = settings;
window.browser = browser;
window.check = check;
window._update = _update;
--- server.py 2019-01-11 00:51:51.000000000 +0100
+++ server.py 2019-01-24 16:13:57.009123367 +0100
@@ -872,6 +872,9 @@
extensions_map = mimetypes.types_map.copy()
extensions_map.update({
'': 'application/octet-stream', # Default
+ '.html': 'text/html',
+ '.js': 'application/javascript',
+ '.mjs': 'application/javascript',
'.py': 'text/plain',
'.c': 'text/plain',
'.h': 'text/plain',
<!DOCTYPE html>
<html>
<script type="module" src="test-arrow.mjs"></script>
</html>
const browser = window.browser || parent.browser;
const check = window.check || parent.check;
const settings = window.settings || parent.settings;
const _update = window._update || parent._update;
console.group('-- inside iframe --');
check(null, _ => {});
check(null, _ => _update);
check(null, _ => _update('foo', 'bar'));
settings.check(null, _ => {});
settings.check(null, _ => _update);
settings.check(null, _ => _update('foo', 'bar'));
browser.settings.check(null, _ => {});
browser.settings.check(null, _ => _update);
browser.settings.check(null, _ => _update('foo', 'bar'));
console.groupEnd('-- inside iframe --');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.