Optimize external_ui url #2386

xiaozhuai · 2022-05-16T08:25:45Z

优化yacd和dashboard的url，都使用clash来提供服务
* yacd的url改为${external-controller}/ui/yacd
* dashboard的url改为${external-controller}/ui/dashboard

为什么要改url，由于我的luci可以外网访问，且使用https协议。
之前的yacd是使用uhttpd提供服务的，即https协议，而clash的api服务为http协议，
此时在新版的Chrome浏览器触发Mixed Content安全问题而被禁止api请求。
即无法在https页面调用http接口。

具体修改如下：

删去/etc/init.d/openclash中启动时创建yacd目录的symbol link
移动目录/usr/share/openclash/yacd和/usr/share/openclash/dashboard到/usr/share/openclash/ui目录下
修改默认配置/usr/share/openclash/res/default.yaml和配置脚本/usr/share/openclash/yml_change.sh中的external-ui为/usr/share/openclash/ui
修改status.htm以使用新的url
增加了dashboard_forward_ssl选项，用以控制外网转发端口是否启用了SSL

这么改完之后，还有一个好处，可以统一对9090端口进行反向代理，增加https支持。
这样一来，在外部控制中增加一个公网访问是否开启了SSL选项即可

实际上还存在另外一个同样的问题，即通过websocket协议获取流量和连接信息的api。见下述代码片段

OpenClash/luci-app-openclash/luasrc/view/openclash/status.htm

Lines 304 to 314 in 6b111db

    
           function ws_open() { 
        
           	ws_t = new WebSocket(luci_protocol+"/traffic?token="+status.dase); 
        
           	ws_c = new WebSocket(luci_protocol+"/connections?token="+status.dase); 
        
           	ws_t.onmessage = ws_tmessage; 
        
           	ws_c.onmessage = ws_cmessage; 
        
           	ws_t.onerror = ws_terror; 
        
           	ws_t.onopen = function (event) { 
        
           		ws_connect = true; 
        
           		ws_error = false; 
        
           	}; 
        
           };

在我的使用场景下，会尝试使用wss协议连接clash的接口，很明显clash的api提供的是ws服务，而无法提供wss。

但也无法简单的修改协议为ws，改为ws同样会遇到Mixed Content问题。

但是实际使用时发现并不影响，应该是走了另外一个toolbar_show接口。

因此在想这个websocket连接的代码是否可以去掉，看起来并没有用。

* Optimize external_ui url * Add dashboard_forward_ssl option * Add translation for dashboard_forward_ssl option * fix translation * Fix dashboard url when forward_domain is empty * Fix dashboard url description

Curious-r · 2023-03-30T16:54:05Z

请问这个修改在nginx作为web服务器的环境下有测试过吗？
#2913
这个问题似乎不是孤例。我们都是用luci-nginx-ssl的环境并且为luci部署了域名访问和有效证书。
但在这个环境下，勾选了dashboard_forward_ssl之后，通过域名访问面板反而失败了。

xiaozhuai · 2023-03-31T06:12:32Z

请问这个修改在nginx作为web服务器的环境下有测试过吗？
#2913
这个问题似乎不是孤例。我们都是用luci-nginx-ssl的环境并且为luci部署了域名访问和有效证书。
但在这个环境下，勾选了dashboard_forward_ssl之后，通过域名访问面板反而失败了。

这个pr并不能自动支持https，而是当你配置了https反向代理之后(例如使用nginx配置了https反向代理)，可以通过这个选项，则控制台才能跳转到正确的地址。不是说勾了就启用https了，而是勾了之后链接就变成https了。

Curious-r · 2023-03-31T06:22:24Z

您指的是反代哪个路径啊？我们的luci本身是配置了https的，但dashboard的链接带上https之后就不能正常访问了。需要说明的是，我们的固件是用nginx代替了uhttpd，不是用nginx反代uhttpd。所以想问一下，您的uhttpd用例除了为luci配置https以外，还做了什么额外的配置吗？ Curious<https://curious.host>

…

________________________________ From: xiaozhuai, Weihang Ding ***@***.***> Sent: Friday, March 31, 2023 2:12:42 PM To: vernesong/OpenClash ***@***.***> Cc: Curious ***@***.***>; Comment ***@***.***> Subject: Re: [vernesong/OpenClash] Optimize external_ui url (PR #2386) 请问这个修改在nginx作为web服务器的环境下有测试过吗？ #2913<#2913> 这个问题似乎不是孤例。我们都是用luci-nginx-ssl的环境并且为luci部署了域名访问和有效证书。但在这个环境下，勾选了dashboard_forward_ssl之后，通过域名访问面板反而失败了。这个pr并不能自动支持https，而是当你配置了https反向代理之后(例如使用nginx配置了https反向代理)，可以通过这个选项，则控制台才能跳转到正确的地址。不是说勾了就启用https了，而是勾了之后链接就变成https了。 ― Reply to this email directly, view it on GitHub<#2386 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AEWR25UVE4PX7RZXEZINBD3W6ZYVVANCNFSM5WAVMSHQ>. You are receiving this because you commented.Message ID: ***@***.***>

xiaozhuai · 2023-03-31T06:24:13Z

和uhttpd没有关系，dashboard的服务是由clash提供的，所以你配置uhttpd支持了https并不表示dashboard就支持https了。

Curious-r · 2023-03-31T06:34:59Z

这么改完之后，还有一个好处，可以统一对9090端口进行反向代理，增加https支持。
我好像明白了，原来是需要额外为dashboard提供一个反代的意思。
上边用例和后面的说明被我理解成一件事了。
希望这个选项的说明里能加上相关描述，比如“本选项只适用于为面板额外配置了反向代理并开启了ssl的情况”

xiaozhuai · 2023-03-31T06:36:59Z

这个我理解，所以我想知道勾选这个选项后，到底在什么情况下才能正常工作？

比如说你的clash dashboard的端口是9090，http协议，只能内网访问
现在你需要外网访问dashboard，且出于安全考虑，需要支持https。
那么首先你使用比如nginx这类应用反向代理9090端口，比如是9091吧，且监听0.0.0.0，且在nginx这里配置了证书，那么9091端口支持https，且是暴露到公网的。
此时你在openclash的控制台里点击按钮跳转dashboard时，发现还是跳转的http的地址。因为openclash是不知道你做了一层反向代理的。
这时，你在配置管理页面映射端口为9091，且勾选管理页面公网SSL访问
那么点击openclash的控制台按钮的时候就能跳转到正确的https的地址

xiaozhuai · 2023-03-31T06:40:01Z

希望这个选项的说明里能加上相关描述，比如“本选项只适用于为面板配置了反向代理并开启了ssl的情况”

这个功能是面向高级用户的。普通用户保持默认设置即可。普通用户也搞不明白应该怎么做，所以我认为没必要详细说明。

Curious-r · 2023-03-31T06:42:00Z

这个我理解，所以我想知道勾选这个选项后，到底在什么情况下才能正常工作？ Curioushttps://curious.host
…
________________________________ From: xiaozhuai, Weihang Ding @.> Sent: Friday, March 31, 2023 2:24:23 PM To: vernesong/OpenClash _@**._> Cc: Curious _@.>; Comment @._> Subject: Re: [vernesong/OpenClash] Optimize external_ui url (PR #2386) 和uhttpd没有关系，dashboard的服务是由clash提供的，所以你配置uhttpd支持了https并不表示dashboard就支持https了。 ― Reply to this email directly, view it on GitHub<#2386 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEWR25SKZJADSLC43MSLEVDW6Z2BPANCNFSM5WAVMSHQ. You are receiving this because you commented.Message ID: _@_.*>

比如说你的clash dashboard的端口是9090，http协议，只能内网访问现在你需要外网访问dashboard，且处于安全考虑，需要支持https。那么首先你使用比如nginx这类应用反向代理6800端口，比如是9091吧，且监听0.0.0.0，且在nginx这里配置了证书，那么9091端口支持https，且是暴露到公网的。此时你在openclash的控制台里点击按钮跳转dashboard时，发现还是跳转的http的地址。因为openclash是不知道你做了一层反向代理的。这时，你在配置管理页面映射端口为9091，且勾选管理页面公网SSL访问 那么点击openclash的控制台按钮的时候就能调整到正确的https的地址

了解了，谢谢。

Se7enMuting · 2023-07-06T18:20:31Z

提一句：Yacd和Dashboard这两个面板要通过nginx反代ssl，都需要通过WebSocket的配置方式

Journalist-HK · 2023-07-18T19:29:57Z

提一句：Yacd和Dashboard这两个面板要通过nginx反代ssl，都需要通过WebSocket的配置方式

我设置了反代，开了 openclash 里面的 ssl 选项，但是只能且换节点不能看到日志和连接信息。请教一下应该怎么配置 Nginx。

server {
        server_name clashapi.domian.com;
        listen 9443 ssl;
        listen [::]:9443 ssl;
        ssl_certificate /path/fullchain.pem;
        ssl_certificate_key /path/privkey.pem;

        location / {
                proxy_pass http://localhost:9090/;

                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

Se7enMuting · 2023-07-20T10:45:12Z

提一句：Yacd和Dashboard这两个面板要通过nginx反代ssl，都需要通过WebSocket的配置方式

我设置了反代，开了 openclash 里面的 ssl 选项，但是只能且换节点不能看到日志和连接信息。请教一下应该怎么配置 Nginx。
server {
        server_name clashapi.domian.com;
        listen 9443 ssl;
        listen [::]:9443 ssl;
        ssl_certificate /path/fullchain.pem;
        ssl_certificate_key /path/privkey.pem;

        location / {
                proxy_pass http://localhost:9090/;

                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

https://github.com/Dreamacro/clash-dashboard/issues/132

zangquanrong · 2024-01-23T20:21:38Z

提一句：Yacd和Dashboard这两个面板要通过nginx反代ssl，都需要通过WebSocket的配置方式

我设置了反代，开了 openclash 里面的 ssl 选项，但是只能且换节点不能看到日志和连接信息。请教一下应该怎么配置 Nginx。
server {
        server_name clashapi.domian.com;
        listen 9443 ssl;
        listen [::]:9443 ssl;
        ssl_certificate /path/fullchain.pem;
        ssl_certificate_key /path/privkey.pem;

        location / {
                proxy_pass http://localhost:9090/;

                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}
https://github.com/Dreamacro/clash-dashboard/issues/132

这个页面失效了，请问这个问题是通过什么方法解决的呢？

Journalist-HK · 2024-01-24T05:56:48Z

https://github.com/Dreamacro/clash-dashboard/issues/132

这个页面失效了，请问这个问题是通过什么方法解决的呢？

https://tutorials.tinkink.net/zh-hans/nginx/nginx-websocket-reverse-proxy.html

zangquanrong · 2024-01-24T06:39:05Z

https://github.com/Dreamacro/clash-dashboard/issues/132

这个页面失效了，请问这个问题是通过什么方法解决的呢？

https://tutorials.tinkink.net/zh-hans/nginx/nginx-websocket-reverse-proxy.html

搞定，感谢

xiaozhuai added 6 commits May 15, 2022 22:51

Optimize external_ui url

394f5c8

Add dashboard_forward_ssl option

b1dc083

Add translation for dashboard_forward_ssl option

a37f0d9

fix translation

ac8a342

Fix dashboard url when forward_domain is empty

579655d

Fix dashboard url description

c4c8946

vernesong merged commit 6f6ae3c into vernesong:dev May 16, 2022

xiaozhuai mentioned this pull request Mar 31, 2023

启用SSL远程管理控制面板无法打开 #2913

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optimize external_ui url #2386

Optimize external_ui url #2386

xiaozhuai commented May 16, 2022

Curious-r commented Mar 30, 2023

xiaozhuai commented Mar 31, 2023

Curious-r commented Mar 31, 2023 via email

xiaozhuai commented Mar 31, 2023

Curious-r commented Mar 31, 2023 •

edited

Loading

xiaozhuai commented Mar 31, 2023 •

edited

Loading

xiaozhuai commented Mar 31, 2023

Curious-r commented Mar 31, 2023

Se7enMuting commented Jul 6, 2023

Journalist-HK commented Jul 18, 2023

Se7enMuting commented Jul 20, 2023

zangquanrong commented Jan 23, 2024

Journalist-HK commented Jan 24, 2024

zangquanrong commented Jan 24, 2024

	function ws_open() {
	ws_t = new WebSocket(luci_protocol+"/traffic?token="+status.dase);
	ws_c = new WebSocket(luci_protocol+"/connections?token="+status.dase);
	ws_t.onmessage = ws_tmessage;
	ws_c.onmessage = ws_cmessage;
	ws_t.onerror = ws_terror;
	ws_t.onopen = function (event) {
	ws_connect = true;
	ws_error = false;
	};
	};

Optimize external_ui url #2386

Optimize external_ui url #2386

Conversation

xiaozhuai commented May 16, 2022

Curious-r commented Mar 30, 2023

xiaozhuai commented Mar 31, 2023

Curious-r commented Mar 31, 2023 via email

xiaozhuai commented Mar 31, 2023

Curious-r commented Mar 31, 2023 • edited Loading

xiaozhuai commented Mar 31, 2023 • edited Loading

xiaozhuai commented Mar 31, 2023

Curious-r commented Mar 31, 2023

Se7enMuting commented Jul 6, 2023

Journalist-HK commented Jul 18, 2023

Se7enMuting commented Jul 20, 2023

zangquanrong commented Jan 23, 2024

Journalist-HK commented Jan 24, 2024

zangquanrong commented Jan 24, 2024

Curious-r commented Mar 31, 2023 •

edited

Loading

xiaozhuai commented Mar 31, 2023 •

edited

Loading