MetaMask May Break Sites

[jonathansampson]

Description

Enabling MetaMask may cause web compatibility issues with some websites. MetaMask performs a script-injection into the visited document, which may cause issues. One example of this is with the vote.webbyawards.com website.

When MetaMask is disabled, the angular application works as expected.

Steps to Reproduce

1. Enable MetaMask (no need to authenticate or unlock the extension)
2. Navigate to vote.webbyawards.com

Actual result:
Note presence of template strings.

Expected result:
Website should work as intended.

Reproduces how often:
100%

Brave Version

0.22.13

about:brave info:

Brave: 0.22.13 
V8: 6.5.254.41 
rev: a8cfb160479f1d00d0769368eb440030182bb83b 
Muon: 5.1.2 
OS Release: 10.0.16299 
Update Channel: Release 
OS Architecture: x64 
OS Platform: Microsoft Windows 
Node.js: 7.9.0 
Brave Sync: v1.4.2 
libchromiumcontent: 65.0.3325.181

Reproducible on current live release:
Yes

Additional Information

MetaMask injects a script tag directly into the root element, via its manifest.json:

   "content_scripts": [ {
      "all_frames": true,
      "js": [ "scripts/contentscript.js" ],
      "matches": [ "file://*/*", "http://*/*", "https://*/*" ],
      "run_at": "document_start"
   } ],

Worth noting that the WebExtension API determines the placement of the script when using run_at. In the case of document_start, the script in added immediately within the rootElement.

Switching run_at to document_end resolves this problem, though it may not be a feasible solution for the MetaMask team, depending on what scripts/contentscript.js does.

[jonathansampson]

cc @danfinlay

[jonathansampson]

Testing this today, I am unable to repro on the Webby Awards website.

[danfinlay]

Sorry for slow reply on your issue, I had the flu when this was submitted :/

We tracked with this issue:
MetaMask/metamask-extension#3382

The ability to block sites we interfere with is here:
MetaMask/metamask-extension#3590

And you can see we stopped injecting web3 for webby awards here:
https://github.com/MetaMask/metamask-extension/blob/master/app/scripts/contentscript.js#L137

This is just a short-term solution, long term we are going to not inject web3 on pages by default, instead requiring sites to explicitly request a sign-in:
MetaMask/metamask-extension#714

[danfinlay]

(This should be fixed now)

[m-alikhizar]

Still same thing is happening in my scenario too. I've a Angular 4 application running on localhost.

If i enable MetaMask chrome extension it doesn't let angular list any thing in view. Since things do work normal if i disable MetaMask ext.

[danfinlay]

@Khizar-Ali please post a reproduction site if possible, so that we can debug how exactly we may be breaking that site.

[bsclifton]

I don't think there's any specific action we can take, so I'm going to close this issue. For any future webcompat incidents, let's open issues here:
https://github.com/MetaMask/metamask-extension/issues