Detail the communication between the web page and the local computer

Said a long time ago. There are two ways for the web page to communicate with the client's local computer Localhost:

1. Flash 2. ActiveX controls

Since I don't know Flash very well, I can't give any sample code.

For ActiveX controls, you can directly search for "ActiveX controls" on the Internet, and there will be many related answers.

but:

  For modern browsers, both of the above methods are not supported.

  For Flash, although the browser still supports it, the Flash plug-in is not loaded by default.

  It will only be loaded if the user manually clicks to agree.

  ActiveX controls are only supported in IE browsers and require user consent, let alone modern browsers

so. For modern browsers. To communicate with the local computer. The above two methods no longer work.

 

Is it possible to communicate with the local computer directly through the Web page without the user's consent?

The answer is of course. Otherwise, this article would not exist.

 

For the communication between the Web and the server, we take the HTTP protocol. This is also supported by all browsers, regardless of
whether modern browsers or ancient browsers also support the HTTP protocol.

So

If the Web wants to communicate with the local computer, as long as the Web communicates with the local computer through the HTTP protocol. Isn't the problem solved?

How to achieve it?

Since we want to communicate with the local computer through the HTTP protocol, there must be a local channel that supports the HTTP protocol.
How do we usually communicate with the remote server? For example, Baidu, we enter http://www.baidu.com to If it can be opened normally
, what should we do locally? When we are doing development and testing, do we enter: http://localhost or http://127.0.0.1 to access our local computer
? Then, we ask in the page to Send a request locally. What will be the result?

Let's experiment:

First of all, since you want to communicate with the local server. Then we need to monitor the local http protocol communication locally, the code is as follows

namespace LocalApp
{
    class Program
    {
        public static HttpListener listener = new HttpListener();
        static void Main(string[] args)
        {
            listener.Start();
            listener.Prefixes.Add( " http://127.0.0.1:8976/ " ); // We monitor the HTTP protocol on port 8976 of the local computer 
            Thread t = new Thread( new ThreadStart(clientListener));
            t.Start();
            while (true)
            {
                string s = Console.ReadLine();
                listener.Stop();
                listener.Close();
            }
        }
        public  static  void clientListener()
        {
            while (true)
            {
                try
                {
                    // If we receive a request, we start a thread to process the request 
                    HttpListenerContext request = listener.GetContext();
                    ThreadPool.QueueUserWorkItem(processRequest, request);
                }
                catch (Exception e) { Console.WriteLine(e.Message); }
            }
        }
        public static void processRequest(object listenerContext)
        {
            try
            {
                var context = (HttpListenerContext)listenerContext;
                var dicPar = new Dictionary<string, string>();
                var listPar = new List<string>();
                //拿到请求参数
                foreach (var item in context.Request.QueryString.AllKeys)
                {
                    listPar.Add(String.Format("{0}={1}", item, context.Request.QueryString[item]));
                    dicPar.Add(item, context.Request.QueryString[item]);
                }
                // Set the return value 
                var resultJson = JsonConvert.SerializeObject(dicPar);
                Console.WriteLine(String.Join(Environment.NewLine, listPar));
                context.Response.StatusCode = (int)HttpStatusCode.OK;
                context.Response.ContentLength64 = System.Text.Encoding.UTF8.GetByteCount(resultJson);
                context.Response.ContentType = "application/json";
                context.Response.ContentEncoding = Encoding.UTF8;
                context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
                //返回结果
                System.IO.Stream output = context.Response.OutputStream;
                using (StreamWriter writer = new StreamWriter(output))
                {
                    writer.Write(resultJson);
                    writer.Close();
                }
            }
            catch
            {
            }
        }
    }
}

 

The above code is to listen to the HTTP protocol on port 8976 of the local computer,
if a request is received. Just extract the parameters and return them in the form of Json

Then, let's write an Html page and send data to the local port 8976. The
code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <form id="form1" enctype="application/x-www-form-urlencoded">
        <div><label>参数1:<input type="text" name="Par1" /></label></div>
        <div><label>参数2:<input type="text" name="Par2" /></label></div>
        <div><button type="button" onclick="btnSubmit()">提交</button></div>
    </form>
    <script>
        function btnSubmit() {
            $.get("http://127.0.0.1:8976/", $("#form1").serialize(), function (result) {
                console.log(result);
            }, "json");
        }
    </script>
</body>
</html>

 

Open the Chrome browser to test it. The result is as follows:


The page successfully initiated the request, and the local computer APP also listened to the request from the Web, and got all the parameters.
Can we use the Web side to call the resources of the local computer in this way?

 

To know the problem:

When our site is accessed with https, if you use http to request local resources instead of https, some browsers will report a Mixed Content error,
but this problem has been solved in the new version of Google and Firefox, refer to : https://bugzilla.mozilla.org/show_bug.cgi?id=903966 The


other one has a secret, I don't tell the average person
you know that when you log in to QQ locally, and then open the QQ website, why does he Can you automatically know the QQ you are currently logged in to?

That's right, he also used this scheme to communicate with QQ, so as to know which QQ you have logged in to, so as to have this fast login function

thinking expansion:
this kind of case visit can only be initiated by the Web, and the local computer will accept the request. Only one-way communication is supported,
so is there any solution to support two-way communication? (Web to local, local to Web)
If anyone knows the answer. You can express your thoughts under this blog post.

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325247510&siteId=291194637