How to open a local application on the web

If a customer puts forward a requirement to open a calculator on a web page, you must not think it is a simple matter. In fact, it is impossible to do it without "external force".

background

A project customer put forward such a demand

• Need to open IE and firefox in chrome browser
• Need to open IE and chrome in firefox
• Need to open firefox and chrome in IE

The summary is that you can open any browser in any browser. At first sound, I think it’s a bit of a silly demand. In fact, my first reaction is also like this, but after understanding the background of the matter, I found this It is a very reasonable requirement. The background is that the customer has several legacy old systems, among which the core business system can only run on IE, and a certain BI system can only run on firefox. You may find it strange that only IE is supported. Understand, only supporting firefox is a bit weird, but it is true, we don't have to go into it. Now that customers want to make a portal, they need to click to all systems on the portal, and then there is the above demand.

Sandbox model

Imagine what would happen if javascript could read and write local files

• Open Baidu and all your information may be leaked
• Opening Baidu may quietly install the family bucket for you
• Open Baidu, your disk may be formatted
• .....

The javascript here does not refer to the nodejs javascript running on the server side, but refers to the javascript running on the web side

If this is the case, then the Internet cannot exist for so long, because the website is public and anyone can access it. Your phone and computer are private and private. You cannot allow a public website to visit your private. Device, but we often hear that you shouldn’t open a certain webpage casually. Beware of poisoning. Opening a webpage will not cause poisoning, but the webpage will guide or even automatically download the virus and then induce you to run the virus, such as the family bucket of a certain degree. The computer is poisoned after running, that is to say, even if you browse bad websites, there will be no problem as long as you don’t use your hands to download programs of unknown origin.

Then the core of ensuring that the browser does not do bad things is the sandbox model concept (sandbox), also known as sandbox, and the sandbox model stipulates

• The browser cannot access the local program
• The browser cannot read local files
• The browser cannot write local files
• The browser cannot obtain sensitive computer information, such as user name, email, etc., but can access some non-sensitive information, such as operating system version and browser kernel information

Simply put, you cannot read, write, or watch. In the movie "Trumen's World", the small town where Trumen is located is a sandbox. Trumen cannot touch the outside world, and he does not feel that his world is false. With the sandbox model, we can surf the Internet happily and enjoy the convenience brought by the Internet.

How to open a local program

Then you may ask, why the webpage can open Thunder and QQ programs? Take Thunder as an example, when we click Thunder download on the webpage, the system will open the local Thunder program to download. How does this happen? , If you look closely, you will find that Thunder’s download address is quite special

thunder://QUFodHRwOi8veDEwOC55c2JpcmQuY29tOjEwNy9kYXRhL3d3dy55c2JpcmQuY29t07DK08TxL7jWzPrPwC1CbHUlNUIxMjgweDcyMCU1RC5ybXZiWlo=

It is not our common http protocol. The protocol name is thunder . This is a custom protocol. When the operating system configures the association relationship between the custom protocol and the application, the browser can open the corresponding program according to this configuration. In, this configuration relationship is configured in the registry. The opening mentioned in the beginning requires the help of external forces to enable the browser to open the local program. This refers to this. The following is the configuration of the Thunder protocol in the registry.

Registry configuration

For example, we need to open ie in chrome, we stipulate the protocol ie:// , just follow the steps to configure the registry

• win+r open the run window, enter regedit to enter the registry
• Create a directory HKEY_CLASSES_ROOT ie\Shell\Open\command (refer to the above image, the registration form of Thunder)
• Modify the default command value to iexplore
• Create a string under the ie project, the name is URL Protocol value is empty

Write html code

<a href="ie://">打开IE</a>

A window pops up after the browser is clicked, and IE can be opened by clicking Open

Of course, you can also save the following script as a file with the reg suffix, and click directly to import the registry. The effect is the same as the one manually configured.

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\ie]
"URL Protocol"=""
@="iexplore"
[HKEY_CLASSES_ROOT\ie\shell]
[HKEY_CLASSES_ROOT\ie\shell\open]
[HKEY_CLASSES_ROOT\ie\shell\open\command]
@="iexplore"

If you enter start iexplore in the windows console, you can open ie. Similarly, start firefox opens Firefox, start chrome opens chrome, and the star command can search for matching applications in the specified folder and open it. You can refer to here

Does this solve the customer's needs? We only need to configure a few custom protocols. The answer is no, because the open url cannot be specified in this way. Although the ie://http://definesys.com , IE will Open the original address, which is ie://http://definesys.com instead of http://definesys.com , so we need to write an intermediate program to finish parsing the URL and open the specified application.

Develop application

Because it is a windows application and needs to be installed on the client's computer, java does not need to be considered, there are the following options

• windows GUI program
• windows console program
• .NET

The console will pop up a black window. The experience is not good. .NET has requirements for the operating environment and it is difficult to achieve compatibility. Therefore, consider using C language to develop windows GUI programs. The function is very simple. It is to parse the url to open the specified application. Since it is developing windows c, then we must sacrifice the ancient artifact vc++6.0

Seeing this familiar and kind start-up screen, I couldn't help posting a circle of friends to pay tribute to the dead youth. The core code is as follows

#include "stdafx.h"
#include "resource.h"
#include "Windows.h"
#include "shellapi.h"
int APIENTRY WinMain(HINSTANCE hInstance,
                     HINSTANCE hPrevInstance,
                     LPSTR     lpCmdLine,
                     int       nCmdShow) {
    if(lpCmdLine==NULL||strlen(lpCmdLine)==0) {
        MessageBox(NULL, "无法打开应用程序 原因：缺少参数", "提示", 0);
        return 0;
    }
    lpCmdLine=lpCmdLine+7;
    lpCmdLine[strlen(lpCmdLine)-1]='\0';
    char *p = strchr(lpCmdLine, ':');
    int size=p-lpCmdLine;
    char protocal[30];
    memcpy(protocal,lpCmdLine,size);
    protocal[size]='\0';
    char url[1000];
    memset(url,'\0',1000);
    strcpy(url,p+1);
    int ret=(int)ShellExecute(NULL, "open", protocal, url, NULL, SW_MAXIMIZE);
    if(ret<32) {
        if(ret==2) {
            MessageBox(NULL, strcat("启动失败没有安装",protocal), "提示", 0);
        } else {
            MessageBox(NULL, "启动失败未知原因请联系管理员", "提示", 0);
        }
    }
    return 0;
}

The code did the following

• Parse the parameters, the format here is sso://{browser}:{url} such as sso://firefox:http:definesys.com
• Open the browser
• If the browser is not installed

Packaged application

The application is developed, but how to deliver it to the customer, it is impossible for each customer to configure the registry. We need an installation package, and the customer can click Next to complete the installation package. advancedinstaller is strongly recommended This installation package creation tool, I only now know that the original installation program is made with tools, I thought it was written by myself, advancedinstaller can create an installation program to guide users to complete the installation, advancedinstaller is very powerful, including Read and write registry function

• download and install advancedinstaller
• Just create a Simple project

• Configure application information

• Upload the application in Files and Folders

• Configure registry information

The default value behind the command is 060d531af96472, APPDIR represents the installation path, and the name [APPDIR]sso.exe "%1"

You also need to create a value of sso URL Protocol

• Click Build in the upper left corner to generate an installer

test

Write the following html for testing

<html>
<head>
    <head lang="en">
        <meta charset="UTF-8">
        <title>浏览器测试</title>
        <script src="protocolcheck.js"></script>
        <script type="text/javascript">
            function check() {
                window.protocolCheck("sso://",
                    function () {
                        let msg = confirm("未安装相关工具，点击确定下载安装")
                        if (msg) {
                            window.open("http://zhengjianfeng.cn/sso/ssoclient.msi", "_blank");
                        }
                    });
            }
        </script>

    </head>
</head>
<body>
<h1>浏览器测试</h1>
<ul>
    <li>
        <a href="sso://iexplore:http://www.definesys.cn" onclick="check();">打开IE</a>
    </li>
    <li>
        <a href="sso://chrome:http://www.definesys.cn" onclick="check();">打开chrome</a>
    </li>
    <li>
        <a href="sso://firefox:http://www.definesys.cn" onclick="check();">打开firefox</a>
    </li>
</body>
</html>

Among them, check is to detect whether a custom protocol is configured, and protocolcheck.js is a toolkit for detecting custom protocols, which can be downloaded