优化访客IP地址设置

internal/web/actions/default/servers/create.go

@@ -564,9 +564,11 @@ func (this *CreateAction) RunPost(params struct {
 			var remoteAddrConfig = &serverconfigs.HTTPRemoteAddrConfig{
 				IsOn:  true,
 				Value: "${rawRemoteAddr}",
+				Type:  serverconfigs.HTTPRemoteAddrTypeDefault,
 			}
 			if params.RemoteAddrIsOn {
 				remoteAddrConfig.Value = "${remoteAddr}"
+				remoteAddrConfig.Type = serverconfigs.HTTPRemoteAddrTypeProxy
 			}
 			remoteAddrConfigJSON, err := json.Marshal(remoteAddrConfig)
 			if err != nil {

internal/web/actions/default/servers/groups/group/settings/remoteAddr/index.go

@@ -10,6 +10,7 @@ import (
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
 	"github.com/iwind/TeaGo/actions"
+	"regexp"
 	"strings"
 )
 
@@ -54,9 +55,29 @@ func (this *IndexAction) RunPost(params struct {
 	err := json.Unmarshal(params.RemoteAddrJSON, remoteAddrConfig)
 	if err != nil {
 		this.Fail("参数校验失败：" + err.Error())
+		return
 	}
 
 	remoteAddrConfig.Value = strings.TrimSpace(remoteAddrConfig.Value)
+
+	switch remoteAddrConfig.Type {
+	case serverconfigs.HTTPRemoteAddrTypeRequestHeader:
+		if len(remoteAddrConfig.RequestHeaderName) == 0 {
+			this.FailField("requestHeaderName", "请输入请求报头")
+			return
+		}
+		if !regexp.MustCompile(`^[\w-_]+$`).MatchString(remoteAddrConfig.RequestHeaderName) {
+			this.FailField("requestHeaderName", "请求报头中只能含有数字、英文字母、下划线、中划线")
+			return
+		}
+		remoteAddrConfig.Value = "${header." + remoteAddrConfig.RequestHeaderName + "}"
+	case serverconfigs.HTTPRemoteAddrTypeVariable:
+		if len(remoteAddrConfig.Value) == 0 {
+			this.FailField("value", "请输入自定义变量")
+			return
+		}
+	}
+
 	err = remoteAddrConfig.Init()
 	if err != nil {
 		this.Fail("配置校验失败：" + err.Error())

internal/web/actions/default/servers/server/settings/locations/remoteAddr/index.go

@@ -9,6 +9,7 @@ import (
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
 	"github.com/iwind/TeaGo/actions"
+	"regexp"
 	"strings"
 )
 
@@ -46,9 +47,29 @@ func (this *IndexAction) RunPost(params struct {
 	err := json.Unmarshal(params.RemoteAddrJSON, remoteAddrConfig)
 	if err != nil {
 		this.Fail("参数校验失败：" + err.Error())
+		return
 	}
 
 	remoteAddrConfig.Value = strings.TrimSpace(remoteAddrConfig.Value)
+
+	switch remoteAddrConfig.Type {
+	case serverconfigs.HTTPRemoteAddrTypeRequestHeader:
+		if len(remoteAddrConfig.RequestHeaderName) == 0 {
+			this.FailField("requestHeaderName", "请输入请求报头")
+			return
+		}
+		if !regexp.MustCompile(`^[\w-_]+$`).MatchString(remoteAddrConfig.RequestHeaderName) {
+			this.FailField("requestHeaderName", "请求报头中只能含有数字、英文字母、下划线、中划线")
+			return
+		}
+		remoteAddrConfig.Value = "${header." + remoteAddrConfig.RequestHeaderName + "}"
+	case serverconfigs.HTTPRemoteAddrTypeVariable:
+		if len(remoteAddrConfig.Value) == 0 {
+			this.FailField("value", "请输入自定义变量")
+			return
+		}
+	}
+
 	err = remoteAddrConfig.Init()
 	if err != nil {
 		this.Fail("配置校验失败：" + err.Error())

internal/web/actions/default/servers/server/settings/remoteAddr/index.go

@@ -10,6 +10,7 @@ import (
 	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs"
 	"github.com/iwind/TeaGo/actions"
 	"github.com/iwind/TeaGo/types"
+	"regexp"
 	"strings"
 )
 
@@ -63,6 +64,25 @@ func (this *IndexAction) RunPost(params struct {
 	}
 
 	remoteAddrConfig.Value = strings.TrimSpace(remoteAddrConfig.Value)
+
+	switch remoteAddrConfig.Type {
+	case serverconfigs.HTTPRemoteAddrTypeRequestHeader:
+		if len(remoteAddrConfig.RequestHeaderName) == 0 {
+			this.FailField("requestHeaderName", "请输入请求报头")
+			return
+		}
+		if !regexp.MustCompile(`^[\w-_]+$`).MatchString(remoteAddrConfig.RequestHeaderName) {
+			this.FailField("requestHeaderName", "请求报头中只能含有数字、英文字母、下划线、中划线")
+			return
+		}
+		remoteAddrConfig.Value = "${header." + remoteAddrConfig.RequestHeaderName + "}"
+	case serverconfigs.HTTPRemoteAddrTypeVariable:
+		if len(remoteAddrConfig.Value) == 0 {
+			this.FailField("value", "请输入自定义变量")
+			return
+		}
+	}
+
 	err = remoteAddrConfig.Init()
 	if err != nil {
 		this.Fail("配置校验失败：" + err.Error())

web/public/js/components/server/http-remote-addr-config-box.js

@@ -7,13 +7,35 @@ Vue.component("http-remote-addr-config-box", {
 				isPrior: false,
 				isOn: false,
 				value: "${rawRemoteAddr}",
-				isCustomized: false
+				type: "default",
+
+				requestHeaderName: ""
 			}
 		}
 
-		let optionValue = ""
+		// type
-		if (!config.isCustomized && (config.value == "${remoteAddr}" || config.value == "${rawRemoteAddr}")) {
+		if (config.type == null || config.type.length == 0) {
-			optionValue = config.value
+			config.type = "default"
+			switch (config.value) {
+				case "${rawRemoteAddr}":
+					config.type = "default"
+					break
+				case "${remoteAddrValue}":
+					config.type = "default"
+					break
+				case "${remoteAddr}":
+					config.type = "proxy"
+					break
+				default:
+					if (config.value != null && config.value.length > 0) {
+						config.type = "variable"
+					}
+			}
+		}
+
+		// value
+		if (config.value == null || config.value.length == 0) {
+			config.value = "${rawRemoteAddr}"
 		}
 
 		return {
@@ -21,33 +43,70 @@ Vue.component("http-remote-addr-config-box", {
 			options: [
 				{
 					name: "直接获取",
-					description: "用户直接访问边缘节点，即 \"用户 --> 边缘节点\" 模式，这时候可以直接从连接中读取到真实的IP地址。",
+					description: "用户直接访问边缘节点，即 \"用户 --> 边缘节点\" 模式，这时候系统会试图从直接的连接中读取到客户端IP地址。",
-					value: "${rawRemoteAddr}"
+					value: "${rawRemoteAddr}",
+					type: "default"
 				},
 				{
 					name: "从上级代理中获取",
-					description: "用户和边缘节点之间有别的代理服务转发，即 \"用户 --> [第三方代理服务] --> 边缘节点\"，这时候只能从上级代理中获取传递的IP地址。",
+					description: "用户和边缘节点之间有别的代理服务转发，即 \"用户 --> [第三方代理服务] --> 边缘节点\"，这时候只能从上级代理中获取传递的IP地址；上级代理传递的请求报头中必须包含 X-Forwarded-For 或 X-Real-IP 信息。",
-					value: "${remoteAddr}"
+					value: "${remoteAddr}",
+					type: "proxy"
 				},
 				{
-					name: "[自定义]",
+					name: "从请求报头中读取",
+					description: "从自定义请求报头读取客户端IP。",
+					value: "",
+					type: "requestHeader"
+				},
+				{
+					name: "[自定义变量]",
 					description: "通过自定义变量来获取客户端真实的IP地址。",
-					value: ""
+					value: "",
+					type: "variable"
 				}
-			],
+			]
-			optionValue: optionValue
+		}
+	},
+	watch: {
+		"config.requestHeaderName": function (value) {
+			if (this.config.type == "requestHeader"){
+				this.config.value = "${header." + value.trim() + "}"
+			}
 		}
 	},
 	methods: {
 		isOn: function () {
 			return ((!this.vIsLocation && !this.vIsGroup) || this.config.isPrior) && this.config.isOn
 		},
-		changeOptionValue: function () {
+		changeOptionType: function () {
-			if (this.optionValue.length > 0) {
+			let that = this
-				this.config.value = this.optionValue
+
-				this.config.isCustomized = false
+			switch(this.config.type) {
-			} else {
+				case "default":
-				this.config.isCustomized = true
+					this.config.value = "${rawRemoteAddr}"
+					break
+				case "proxy":
+					this.config.value = "${remoteAddr}"
+					break
+				case "requestHeader":
+					this.config.value = ""
+					if (this.requestHeaderName != null && this.requestHeaderName.length > 0) {
+						this.config.value = "${header." + this.requestHeaderName + "}"
+					}
+
+					setTimeout(function () {
+						that.$refs.requestHeaderInput.focus()
+					})
+					break
+				case "variable":
+					this.config.value = "${rawRemoteAddr}"
+
+					setTimeout(function () {
+						that.$refs.variableInput.focus()
+					})
+
+					break
 			}
 		}
 	},
@@ -63,7 +122,7 @@ Vue.component("http-remote-addr-config-box", {
 						<input type="checkbox" value="1" v-model="config.isOn"/>
 						<label></label>
 					</div>
-					<p class="comment">选中后表示使用自定义的请求变量获取客户端IP。</p>
+					<p class="comment">选中后，表示使用自定义的请求变量获取客户端IP。</p>
 				</td>
 			</tr>
 		</tbody>
@@ -71,20 +130,28 @@ Vue.component("http-remote-addr-config-box", {
 			<tr>
 				<td>获取IP方式 *</td>
 				<td>
-					<select class="ui dropdown auto-width" v-model="optionValue" @change="changeOptionValue">
+					<select class="ui dropdown auto-width" v-model="config.type" @change="changeOptionType">
-						<option v-for="option in options" :value="option.value">{{option.name}}</option>
+						<option v-for="option in options" :value="option.type">{{option.name}}</option>
 					</select>
-					<p class="comment" v-for="option in options" v-if="option.value == optionValue && option.description.length > 0">{{option.description}}</p>
+					<p class="comment" v-for="option in options" v-if="option.type == config.type && option.description.length > 0">{{option.description}}</p>
 				</td>
 			</tr>
-			<tr v-show="optionValue.length == 0">
+			
+			<!-- read from request header -->
+			<tr v-show="config.type == 'requestHeader'">
+				<td>请求报头 *</td>
+				<td>
+					<input type="text" name="requestHeaderName" v-model="config.requestHeaderName" maxlength="100" ref="requestHeaderInput"/>
+					<p class="comment">请输入包含有客户端IP的请求报头，需要注意大小写，常见的有<code-label>X-Forwarded-For</code-label>、<code-label>X-Real-IP</code-label>、<code-label>X-Client-IP</code-label>等。</p>
+				</td>
+			</tr>
+			
+			<!-- read from variable -->
+			<tr v-show="config.type == 'variable'">
 				<td>读取IP变量值 *</td>
 				<td>
-					<input type="hidden" v-model="config.value" maxlength="100"/>
+					<input type="text" name="value" v-model="config.value" maxlength="100" ref="variableInput"/>
-					<div v-if="optionValue == ''" style="margin-top: 1em">
+					<p class="comment">通过此变量获取用户的IP地址。具体可用的请求变量列表可参考官方网站文档；比如通过报头传递IP的情形，可以使用<code-label>\${header.你的自定义报头}</code-label>（类似于<code-label>\${header.X-Forwarded-For}</code-label>，需要注意大小写规范）。</p>
-						<input type="text" v-model="config.value" maxlength="100"/>
-						<p class="comment">通过此变量获取用户的IP地址。具体可用的请求变量列表可参考官方网站文档。</p>
-					</div>
 				</td>
 			</tr>
 		</tbody>