Chrome extension: customized "open in Sail" button

[linux-china]

I want to add customized "open in Sail" button in my project management system and the developers just click the button to open project with Sail support. Is it possible to make Chrome extension recognize this button? How to write the customized "open in Sail" html code? like following? :)

<a href="sail:xxxx/sail-demo" class="open-in-sail">Open in Sail </a>

[teddy-codes]

This would be cool to see, although... not sure how that would be implemented.

[deansheather]

Chrome extension APIs don't support registering custom protocol handlers, only Chrome apps do (which have been deprecated on all platforms except ChromeOS).

One way it could be done however is some sort of URL handler built into the extension. Basically, we'd reserve a subdomain or path of sail.dev for the extension which would intercept these requests and run sail.

Example: open-in.sail.dev/cdr/sail would be intercepted and parsed by the extension to open cdr/sail from GitHub in Sail. You would just link to https://open-in.sail.dev/cdr/sail on your page, and if the user doesn't have Sail or the extension installed, the webserver would respond and give a brief introduction and links to installation instructions.

Thoughts @nathanpotter?

[lucacasonato]

Seems like a cool idea. The path should not be GitHub only like shown above though, it should be any URL that Sail supports. Once the extension intercepts it should return a custom page with the console on it as this can not be injected into the page that has the button with this architecture.

[deansheather]

@nathanpotter

[lucacasonato]

I have thought about this some more and have come to the conclusion that the above option has some limitations.

1. You are navigating the user away from the page. This does not match how Github and Gitlab work. There you stay on the page.
2. The console has to be shown on a new page, either at open.sail.dev or an extension page, not the one you are pressing the button on. This does not match how the Github and Gitlab implementations work.
3. The button is not styled depending on the availability of sail ect.

---

All of these issues could be fixed by having the button work differently:
<a href="https://sail.dev/install" sail-repo="ssh://github.com:cdr/sail">Open in Sail</a>

When the page loads or the DOM is ready the sail extension looks for all elements with the sail-repo tag and registers a onclick. When the user clicks the button the default action (href) is prevented with preventDefault() and sail starts the container and streams the console into an object created on the page, just like with Github and Gitlab. If the extension is not installed, preventDefault() is not called and the button just redirects to the sail install page.

A lot of customization could be added with this as well. For example:

• a sail-console attribute with an id of a dom element to stream the console output to
• a sail-is-available-style attribute with classes to add to the element when sail is actually available
• a sail-callback attribute with a function to call when sail started or failed to start the container
• probably many more things

The extension could also register a global sail object (window.sail or a window onsailload event that returns an object) that can be used to programmatically control sail. The user could then dynamically add sail buttons depending on state, would be able to integrate with SPA frameworks, manually handle console logging, starting and stopping of containers and probably much more.

[deansheather]

If a website hijacked clicks and made them open a malicious Sail repo in the background this would be dangerous. For example, I could make a Sail repository deansheather/project mount the entire filesystem of the host into the container and then once the container starts change the user's /etc/resolv.conf to point to my malicious servers.

I agree that it would be cool to be able to customize sail and integrate it deeply into your own website. However, I don't think many websites will have the need to put a complicated open in sail button, and I don't think many websites will be using this feature anyways. Most projects are on GitHub or GitLab, which have the button already integrated in a secure way. We're able to put a terminal in GitHub and GitLab because we trust that those websites won't hide the terminal or create containers without the user explicitly clicking on the button.

This would also require changing the permissions of the extension to work on every website and would require injecting code into every website, which could be quite alarming to potential users.

[deansheather]

For security, the subdomain idea would require the site to be accessed in a new browser tab or window, which means that the parent page can't put it in a hidden iframe. If the user was paranoid, we could add a configuration option that additionally require them to click on a button on the sail page.

[teddy-codes]

Do you guys think that custom options within the href would be a good idea?

Example:
https://open.sail.dev?console=***&etc..

I think that would maybe be a good compromise for security and usability.

[deansheather]

@roberthmiller The security issue is being able to embed the console in the current page and being able to control sail programmatically. Moving sail-console to a query parameter doesn't make it more secure, as the console will still be embedded on a potentially malicious website.

[teddy-codes]

Am saying to not have the console show on the remote side, but instead have it show on open.sail.dev

[lucacasonato]

This would also require changing the permissions of the extension to work on every website and would require injecting code into every website, which could be quite alarming to potential users.

We already inject our content script into all sites, but I see your point. Although currently any page can implement their own "Open in Sail" button already, because the button is injection based on surrounding elements and not based on the domain. If I have a page an element with the css class project-repo-buttons and an input element with the id http_project_clone the extension will inject a button to open the page. Combine this with an click after 1000ms you get this.

If we lock it to a certain domain then private installs of github and gitlab wont work. I think the best solution would be to prompt the user every time before opening a sail instance. This can be done with a simple confirm() call or we could make a custom confirmation dialog using the extension popup. In that case the user should have the options "Allow", "Allow all on this domain" and "Deny". That way all security issues will me prevented we could go for the open.sail.dev or the in page API and button approach.

Chrome actually very strictly separates JS exec envs between extensions and content scripts, so creating an API under window.sail would actually not be possible. The other point with integrated buttons and consoles still stands though. I think with the right precautions, and a permission request to the user via a secure environment like confirm(), an injected extension iframe (like 1Password) or via the extension popup this should be possible.