Can't injected MetaMask Web3 Provider to page served via XAMPP

Question

The title pretty much gives everything away, but I'll repeat it here for completeness. I'm new to Ethereum and am developing an Ethereum Dapp that's accessed through a frontend, written in Javascript, and using Web3 to communicate with Rinkeby. As I heard that MetaMask can't connect to any site hosted on file://, I hosted the frontend on an XAMPP Apache server (file:///C:/xampp/htdocs/voterScreen.html) for testing purposes. Now that I think about it, that's still running on file:// ... perhaps that's what's causing the issue?

My actual frontend is working fine, in terms of being able to read from my Contract, and in terms of all the methods working as they should. There's just one hiccup - I can't write to the Chain, because my Web3 isn't being injected from Metamask, even though I'm logged in and I'm searching for it. I've got this standard bit of code in my frontend:

 if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
        console.log("Metamask logged into successfully");
    } else {
        console.log("Metamask NOT logged into successfully");
        // set the provider you want from Web3.providers
        ***(other attempts at finding provider)***
}
(rest of code)  

and in fact, whenever I run the thing, I see "Metamask NOT logged into successfully", which confirms to me that Metamask's not being injected. This is a bit of a problem since I need that information to sign the Vote transaction that I want the frontend to be able to send. For reference, in the console, the following deprecation warning showed up:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its 
detrimental effects to the end user's experience. For more help, check 
https://xhr.spec.whatwg.org/.

I doubt this has anything to do with the problem, but I mention it just in case.

Either way, does anyone have a clue why MetaMask is consistently failing to be injected? Thanks.

Answer 1

For security reasons, metamask does not inject a provider into sites hosted on the file system. To go around this, you can serve the file via a local web server. To do this you have to access the file via the server, i.e. via http. With the default XAMPP configuration, try the URL http://127.0.0.1/voterScreen.html. This will access your local file, but it will be delivered via a server, which fulfills metamasks security requirements.