Test if blockstack works well within a Chrome extension

[satazor]

The plan is to have discussify as:

1. A regular web-app
2. A extension to easily discuss URIs
3. An embed so that developers can embed discussions on stuff like articles, news, etc.

Making an extension is probably the easiest of all and goes well with the amount of features the MVP will have. Still, we must be sure that blockstack authentication works well with extensions.

[satazor]

https://forum.blockstack.org/t/got-a-few-questions-considering-using-blockstack/5608

[satazor]

After some tests, blockstack does not work inside extensions because:

• It tries to do window.location = ‘blockstack:xxx which fails in extensions
• Even if the previous point was somehow fixed, chrome extensions do not have a regular "origin/domain"

I will try to go with a "inject code" approach instead and will report back.

[satazor]

I've tried the "inject code" approach and hit another issue, and this is a very hard one..

1. User enters xxx.com and clicks the Discussify extension
2. The extension injects the Discussify UI and prompts for login
3. User clicks "Login with blockstack" within the Discussify UI
4. User is redirected to http://localhost:8888/auth?authRequest=eyJ0e... where he approves the "login". Note that this page is being served by a locally installed Blockstack app.
5. At this page, Blockstack attempts to fetch manifest.json file from xxx.com/manifest.json for some reason, probably to get things like the App name and icons to display in the authorization prompt
6. This request fails for most sites because there's no Access-Control-Allow-Origin header that allows localhost:8888 to fetch that file from xxx.com

I've never hit this issue before because I've been using some demo applications that already had a server in place with that header. Nevertheless, we can't get around this because we do not control the servers from the sites where people will be using Discussify.

This is a major issue.. I'm considering switching to uport again and put the "app-secret" in the source-code until they add a p2p flow as discussed here: uport-project/docs#18 (comment).

//cc @diasdavid

[marcooliveira]

This is unfortunate. What if, instead, we inject an iframe to something that we're hosting, which we would control and add CORS?

[satazor]

@marcooliveira that can work indeed, I will try it out.

[satazor]

I've managed to make it work with the iframe strategy that @marcooliveira pointed out. Here's a video:

To have it registered, here's the list the issues of this solution:

• blockstack auth doesn’t work within extensions, had to use an iframe workaround
• the iframe strategy will not work in sites with CSP frame-src whitelisting
• there's an issue in the blockstack auth flow that was patched locally, will need to create an issue

[satazor]

Possible solution for the CSP blocking: https://transitory.technology/browser-extensions-and-csp-headers/