WEB_REMOTE_DOMAIN How to use

[kiralikbeyin]

in general.h

// Defining a WEB_REMOTE_DOMAIN will enable Cross-Origin Resource Sharing (CORS) // so you will be able to login to this device from another domain. This will allow // you to manage all ESPurna devices in your local network from a unique installation // of the web UI. This installation could be in a local server (a Raspberry Pi, for instance) // or in the Internet. Since the WebUI is just one compressed file with HTML, CSS and JS // there are no special requirements. Any static web server will do (NGinx, Apache, Lighttpd,...). // The only requirement is that the resource must be available under this domain.

define WEB_REMOTE_DOMAIN "http://192.168.0.43:4000"

https://github.com/xoseperez/espurna/wiki/WebInterface nothing found about WEB_REMOTE_DOMAIN

I am serving index.html from http://192.168.0.43:4000 -> Failed to load resource: the server responded with a status of 404 (Not Found) -> http://192.168.0.43:4000/auth

What to do now?

[mcspr]

I think you want to change WEB_PORT from 80 to 4000

WEB_REMOTE_DOMAIN is used for Access-Control-Allow-Origin header value

[kiralikbeyin]

No i want to host on my rpi if success i will host on my web domain...

[mcspr]

Hm. You'll need to proxy /auth and /ws paths then (404 error) html assumes you are using it from the device and does js connect("192.168.0.43:4000") which triggers other things based on that ip. Unless it shows invalid origin errors, header change you did is correct. Sorry about missing that you serve file directly.

[xoseperez]

This is a feature in beta-stage. It will let you host the web interface outside the device, saving some previous space and hopefully allowing to manage different devices from a unique location. For CORS to work a non-empty (or "*") domain name must be provided, this will be where the web interface will be hosted.

You will then load the page from that domain and use the connect method to connect to the local device. If the domain matches that in WEB_REMOTE_DOMAIN the CORS rules will let you access and manage the device. There is a work-in-progress to add a discovery feature so you can scan your local network for ESPuna devices.

Please note that this is by no means a threat since all communications are done locally between your computer and your device, the remote domain only serves a static page with all the required contents.

[kiralikbeyin]

WEB_REMOTE_DOMAIN sounds good but i didin like beta stage :)

You will then load the page from that domain and use the connect method to connect to the local device.

So we nede a static ip? Open port or dns like duckdns?

+I think current index.html need changes if there will be more than 1 device - show all devices?

• Is it possible to use with more than 1 user?

I changed custom.js in html dir and forced to see what happens

function connectToURL(url) {
console.log(url);
  //  initUrls("url");

    $.ajax({
        'method': 'GET',
        'crossDomain': true,
        'url': "http://192.168.0.66",
        'xhrFields': { 'withCredentials': true }
    }).done(function(data) {
        if (websock) { websock.close(); }
        websock = new WebSocket("ws://192.168.0.66/ws");
        websock.onmessage = function(evt) {
            var data = getJson(evt.data.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t"));
            if (data) {
                processData(data);
            }
        };
    }).fail(function() {
        // Nothing to do, reload page and retry
    });

}

function connect(host) {
    if (!host.startsWith("http:") && !host.startsWith("https:")) {
        host = "http://" + host;
    }
    //connectToURL(new URL(host));
    connectToURL("http://192.168.0.66");
}

function connectToCurrentURL() {
  connectToURL("http://192.168.0.66");
//  connectToURL(new URL(window.location));
}

Serve files from 192.168.0.43:4000, add a file name only "auth" which contains "OK", device ip is 192.168.0.66. Before making and change disable WS AUTH.

[mcspr]

@kiralikbeyin It would be sufficient to replace initUrls part with initUrls("http://192.168.0.66"). That way all requests will go there, no need to create auth file in web-server. 192.168.0.66/auth XHR will happen and trigger login/password box.

As @xoseperez mentioned, CORS headers will be compared by the browser. The change you made to the define is correct - it will be compared to the current address string, http://192.168.0.43:4000 in your case, or whatever domain you create to use with that. It would still require hard coding web server location, thus the * suggestion.

To handle multiple devices, you can also do this:

initUrls("http://".concat(new URL(window.location).searchParams.get("host")))

That way device can be supplied by the host search param

http://192.168.0.43:4000/?host=192.168.0.66
http://192.168.0.43:4000/?host=192.168.0.67
http://192.168.0.43:4000/?host=192.168.0.68
...etc

[xoseperez]

I was playing with this like a month ago and as I mentioned, it's not ready for "production" yet. I found that "*" wouldn't work for CORS, it has to be an IP or domain name. I don't think it needs the port but I have not test it.

[mcspr]

@xoseperez About port: https://tools.ietf.org/html/rfc6454#section-7.1 It does include it, browser just normalizes this string in some cases like http://some.domain:80 to just http://some.domain

And you are right, browser will reject handling response with wildcarded access-control-allow-origin when using http auth (or cookies) :/

localhost/:1 Failed to load http://test.domain:8080/somefile: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access.

On the topic of test itself... I had this in bookmarks homie-esp8266-setup / homie-esp8266. Although the idea of that is to have initial configuration, not day-to-day web ui.

[kiralikbeyin]

@mcspr Do you have screenshots or video of homie ui?

[mcspr]

@kiralikbeyin http://setup.homie-esp8266.marvinroger.fr/ is the live version. requires loading it up and switching wifi to homie access-point

[kiralikbeyin]

So what is next..? There must be a end user web ui which google didnt find @marvinroger

[mcspr]

MQTT + any domotics system ui?... There is homie-server specifically for homie but it is not maintained anymore.

[kiralikbeyin]

OK

I am using framework7 but now trying to find HomeKit ui as a html webpage for phonegap. https://developer.apple.com/design/human-interface-guidelines/homekit/overview/introduction/

If anyone knows where can i find HomeKit theme please share.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue will be auto-closed because there hasn't been any activity for two months. Feel free to open a new one if you still experience this problem.

[cracautanu]

I think it would be a good idea to add a field in the web interface for allowed CORS domains