在网站WAF中，可以导出和导入规则集代码，优化修改规则集交互

internal/web/actions/default/servers/components/waf/createSetPopup.go

@@ -73,12 +73,19 @@ func (this *CreateSetPopupAction) RunGet(params struct {
 func (this *CreateSetPopupAction) RunPost(params struct {
 	GroupId int64
 
-	Name        string
+	Name string
+
+	FormType string
+
+	// normal
 	RulesJSON   []byte
 	Connector   string
 	ActionsJSON []byte
 	IgnoreLocal bool
 
+	// code
+	Code string
+
 	Must *actions.Must
 }) {
 	groupConfig, err := dao.SharedHTTPFirewallRuleGroupDAO.FindRuleGroupConfig(this.AdminContext(), params.GroupId)
@@ -88,53 +95,105 @@ func (this *CreateSetPopupAction) RunPost(params struct {
 	}
 	if groupConfig == nil {
 		this.Fail("找不到分组，Id：" + strconv.FormatInt(params.GroupId, 10))
+		return
 	}
 
 	params.Must.
 		Field("name", params.Name).
 		Require("请输入规则集名称")
 
-	if len(params.RulesJSON) == 0 {
-		this.Fail("请添加至少一个规则")
-	}
-	rules := []*firewallconfigs.HTTPFirewallRule{}
-	err = json.Unmarshal(params.RulesJSON, &rules)
-	if err != nil {
-		this.ErrorPage(err)
-		return
-	}
-	if len(rules) == 0 {
-		this.Fail("请添加至少一个规则")
-	}
-
-	var actionConfigs = []*firewallconfigs.HTTPFirewallActionConfig{}
-	if len(params.ActionsJSON) > 0 {
-		err = json.Unmarshal(params.ActionsJSON, &actionConfigs)
+	var setConfigJSON []byte
+	if params.FormType == "normal" {
+		if len(params.RulesJSON) == 0 {
+			this.Fail("请添加至少一个规则")
+			return
+		}
+		var rules = []*firewallconfigs.HTTPFirewallRule{}
+		err = json.Unmarshal(params.RulesJSON, &rules)
 		if err != nil {
 			this.ErrorPage(err)
 			return
 		}
-	}
-	if len(actionConfigs) == 0 {
-		this.Fail("请添加至少一个动作")
-	}
+		if len(rules) == 0 {
+			this.Fail("请添加至少一个规则")
+			return
+		}
 
-	setConfig := &firewallconfigs.HTTPFirewallRuleSet{
-		Id:          0,
-		IsOn:        true,
-		Name:        params.Name,
-		Code:        "",
-		Description: "",
-		Connector:   params.Connector,
-		RuleRefs:    nil,
-		Rules:       rules,
-		Actions:     actionConfigs,
-		IgnoreLocal: params.IgnoreLocal,
-	}
+		var actionConfigs = []*firewallconfigs.HTTPFirewallActionConfig{}
+		if len(params.ActionsJSON) > 0 {
+			err = json.Unmarshal(params.ActionsJSON, &actionConfigs)
+			if err != nil {
+				this.ErrorPage(err)
+				return
+			}
+		}
+		if len(actionConfigs) == 0 {
+			this.Fail("请添加至少一个动作")
+			return
+		}
 
-	setConfigJSON, err := json.Marshal(setConfig)
-	if err != nil {
-		this.ErrorPage(err)
+		var setConfig = &firewallconfigs.HTTPFirewallRuleSet{
+			Id:          0,
+			IsOn:        true,
+			Name:        params.Name,
+			Code:        "",
+			Description: "",
+			Connector:   params.Connector,
+			RuleRefs:    nil,
+			Rules:       rules,
+			Actions:     actionConfigs,
+			IgnoreLocal: params.IgnoreLocal,
+		}
+
+		setConfigJSON, err = json.Marshal(setConfig)
+		if err != nil {
+			this.ErrorPage(err)
+			return
+		}
+	} else if params.FormType == "code" {
+		var codeJSON = []byte(params.Code)
+		if len(codeJSON) == 0 {
+			this.FailField("code", "请输入规则集代码")
+			return
+		}
+
+		var setConfig = &firewallconfigs.HTTPFirewallRuleSet{}
+		err = json.Unmarshal(codeJSON, setConfig)
+		if err != nil {
+			this.FailField("code", "解析规则集代码失败："+err.Error())
+			return
+		}
+
+		if len(setConfig.Rules) == 0 {
+			this.FailField("code", "规则集代码中必须包含至少一个规则")
+			return
+		}
+
+		if len(setConfig.Actions) == 0 {
+			this.FailField("code", "规则集代码中必须包含至少一个动作")
+			return
+		}
+
+		setConfig.Name = params.Name
+		setConfig.IsOn = true
+
+		// 重置ID
+		setConfig.Id = 0
+
+		setConfig.RuleRefs = nil
+		for _, rule := range setConfig.Rules {
+			rule.Id = 0
+		}
+
+		err = setConfig.Init()
+		if err != nil {
+			this.FailField("code", "校验规则集代码失败："+err.Error())
+			return
+		}
+
+		setConfigJSON, err = json.Marshal(setConfig)
+	} else {
+		this.Fail("错误的参数'formType': " + params.FormType)
 		return
 	}
 
@@ -154,6 +213,7 @@ func (this *CreateSetPopupAction) RunPost(params struct {
 		this.ErrorPage(err)
 		return
 	}
+
 	_, err = this.RPC().HTTPFirewallRuleGroupRPC().UpdateHTTPFirewallRuleGroupSets(this.AdminContext(), &pb.UpdateHTTPFirewallRuleGroupSetsRequest{
 		FirewallRuleGroupId:  params.GroupId,
 		FirewallRuleSetsJSON: setRefsJSON,
@@ -163,5 +223,7 @@ func (this *CreateSetPopupAction) RunPost(params struct {
 		return
 	}
 
+	this.Data["setId"] = createUpdateResp.FirewallRuleSetId
+
 	this.Success()
 }

internal/web/actions/default/servers/components/waf/init.go

@@ -39,6 +39,7 @@ func init() {
 			Post("/updateSetOn", new(UpdateSetOnAction)).
 			Post("/deleteSet", new(DeleteSetAction)).
 			GetPost("/updateSetPopup", new(UpdateSetPopupAction)).
+			Get("/setCodePopup", new(SetCodePopupAction)).
 			Post("/count", new(CountAction)).
 			Get("/selectPopup", new(SelectPopupAction)).
 			Post("/testRegexp", new(TestRegexpAction)).

internal/web/actions/default/servers/components/waf/setCodePopup.go

@@ -0,0 +1,57 @@
+// Copyright 2024 GoEdge CDN goedge.cdn@gmail.com. All rights reserved. Official site: https://goedge.cn .
+
+package waf
+
+import (
+	"encoding/json"
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/TeaOSLab/EdgeCommon/pkg/serverconfigs/firewallconfigs"
+)
+
+type SetCodePopupAction struct {
+	actionutils.ParentAction
+}
+
+func (this *SetCodePopupAction) Init() {
+	this.Nav("", "", "")
+}
+
+func (this *SetCodePopupAction) RunGet(params struct {
+	SetId int64
+}) {
+	setResp, err := this.RPC().HTTPFirewallRuleSetRPC().FindEnabledHTTPFirewallRuleSetConfig(this.AdminContext(), &pb.FindEnabledHTTPFirewallRuleSetConfigRequest{FirewallRuleSetId: params.SetId})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	if len(setResp.FirewallRuleSetJSON) == 0 {
+		this.NotFound("httpFirewallRuleSet", params.SetId)
+		return
+	}
+
+	var ruleSet = &firewallconfigs.HTTPFirewallRuleSet{}
+	err = json.Unmarshal(setResp.FirewallRuleSetJSON, ruleSet)
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+	ruleSet.RuleRefs = nil
+	ruleSet.Id = 0
+	for _, rule := range ruleSet.Rules {
+		rule.Id = 0
+	}
+
+	this.Data["setName"] = ruleSet.Name
+
+	codeJSON, err := json.MarshalIndent(ruleSet, "", "  ")
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Data["code"] = string(codeJSON)
+
+	this.Show()
+}

web/views/@default/@layout.css

@@ -280,7 +280,7 @@ p.margin {
   width: 9em;
 }
 .op.four {
-  width: 10em;
+  width: 12em;
 }
 /** 主菜单 **/
 .main-menu {

web/views/@default/@layout.less

@@ -127,7 +127,7 @@ div.margin, p.margin {
 }
 
 .op.four {
-	width: 10em;
+	width: 12em;
 }
 
 /** 主菜单 **/

web/views/@default/servers/components/waf/createSetPopup.html

@@ -6,42 +6,57 @@
 
 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
 	<input type="hidden" name="groupId" :value="groupId"/>
+    <input type="hidden" name="formType" :value="useCode ? 'code' : 'normal'"/>
 	<table class="ui table definition selectable">
 		<tr>
 			<td class="title">规则集名称 *</td>
 			<td>
 				<input type="text" name="name" maxlength="100" ref="focus"/>
-                <p class="comment">可以用来描述当前规则集用途。</p>
+                <p class="comment">可以用来描述当前规则集用途。<a href="" @click.prevent="switchToCode"><span v-if="!useCode">[使用代码]</span><span v-else>[切换到常规表单]</span></a></p>
 			</td>
 		</tr>
-		<tr>
-			<td>规则 *</td>
-			<td>
-				<http-firewall-rules-box :v-rules="rules" :v-type="type"></http-firewall-rules-box>
-			</td>
-		</tr>
-		<tr v-show="rules.length > 1">
-			<td>规则之间的关系 *</td>
-			<td>
-				<select class="ui dropdown" name="connector" style="width:10em" @change="changeConnector()" v-model="selectedConnector">
-					<option v-for="connector in connectors" :value="connector.value">{{connector.name}}</option>
-				</select>
-				<p class="comment">{{selectedConnectorDescription}}</p>
-			</td>
-		</tr>
-        <tr>
-            <td>执行动作 *</td>
-            <td>
-                <http-firewall-actions-box :v-actions="actions" :v-firewall-policy="firewallPolicy"  :v-group-type="type"></http-firewall-actions-box>
-            </td>
-        </tr>
-        <tr>
-            <td>忽略局域网IP</td>
-            <td>
-                <checkbox name="ignoreLocal"></checkbox>
-                <p class="comment">选中后表示如果请求来自局域网IP，则直接跳过当前规则集。</p>
-            </td>
-        </tr>
+
+        <!-- usual form -->
+        <tbody v-show="!useCode">
+            <tr>
+                <td>规则 *</td>
+                <td>
+                    <http-firewall-rules-box :v-rules="rules" :v-type="type"></http-firewall-rules-box>
+                </td>
+            </tr>
+            <tr v-show="rules.length > 1">
+                <td>规则之间的关系 *</td>
+                <td>
+                    <select class="ui dropdown" name="connector" style="width:10em" @change="changeConnector()" v-model="selectedConnector">
+                        <option v-for="connector in connectors" :value="connector.value">{{connector.name}}</option>
+                    </select>
+                    <p class="comment">{{selectedConnectorDescription}}</p>
+                </td>
+            </tr>
+            <tr>
+                <td>执行动作 *</td>
+                <td>
+                    <http-firewall-actions-box :v-actions="actions" :v-firewall-policy="firewallPolicy"  :v-group-type="type"></http-firewall-actions-box>
+                </td>
+            </tr>
+            <tr>
+                <td>忽略局域网IP</td>
+                <td>
+                    <checkbox name="ignoreLocal"></checkbox>
+                    <p class="comment">选中后表示如果请求来自局域网IP，则直接跳过当前规则集。</p>
+                </td>
+            </tr>
+        </tbody>
+
+        <!-- code form -->
+        <tbody v-show="useCode">
+            <tr>
+                <td>规则集代码 *</td>
+                <td>
+                    <textarea name="code" ref="codeInput" placeholder="{ ... 规则集代码  ... }" rows="20"></textarea>
+                </td>
+            </tr>
+        </tbody>
 	</table>
 	<submit-btn></submit-btn>
 </form>

web/views/@default/servers/components/waf/createSetPopup.js

@@ -40,4 +40,16 @@ Tea.context(function () {
 		}
 		return group.sets
 	}
+
+	// 使用代码
+	this.useCode = false
+	this.switchToCode = function () {
+		this.useCode = !this.useCode
+
+		if (this.useCode) {
+			this.$delay(function () {
+				this.$refs.codeInput.focus()
+			})
+		}
+	}
 })

web/views/@default/servers/components/waf/setCodePopup.html

@@ -0,0 +1,10 @@
+{$layout "layout_popup"}
+
+<h3>规则集 “{{setName}}” 代码</h3>
+
+<form class="ui form" data-tea-action="$">
+    <textarea rows="13">{{code}}</textarea>
+    <p class="comment">你可以将此段代码复制并在创建规则集的时候使用。</p>
+
+    <button class="ui button" type="button" @click.prevent="closePopup">关闭窗口</button>
+</form>

web/views/@default/servers/components/waf/setCodePopup.js

@@ -0,0 +1,5 @@
+Tea.context(function () {
+	this.closePopup = function () {
+		teaweb.closePopup()
+	}
+})

web/views/@default/servers/server/settings/waf/group.html

@@ -26,7 +26,7 @@
 		</tr>
 	</table>
 
-	<h3 style="padding-top:0.8em">规则集<a href="" @click.prevent="createSet(group.id)">[添加规则集]</a> </h3>
+    <h3 style="padding-top:0.8em">规则集<a href="" @click.prevent="createSet(group.id)">[添加规则集]</a></h3>
 	<p class="comment" v-if="sets == null || sets.length == 0">暂时还没有规则。</p>
 	<table class="ui table selectable celled" id="sortable-table" v-if="sets != null && sets.length > 0">
 		<thead>
@@ -34,36 +34,41 @@
 				<th style="width:3em"></th>
 				<th nowrap="">规则集名称</th>
 				<th nowrap="">规则</th>
-				<th nowrap="" class="center one wide">规则关系</th>
+				<th nowrap="" class="center" style="width: 6em">规则关系<tip-icon content="规则关系指的是<strong>单个规则集</strong>中的各个规则之间的关系，如果是“和(AND)”表示所有规则都必须满足条件，如果是“或(OR)”表示任一规则满足条件即可。<br/><br/>多个规则集之间没有任何关系，满足任一个规则集即停止向下匹配。"></tip-icon></th>
 				<th nowrap="">动作</th>
-				<th class="three op">操作</th>
+				<th class="four op">操作</th>
 			</tr>
 		</thead>
 		<tbody v-for="set in sets" :data-set-id="set.id">
-		<tr>
-			<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
-            <td nowrap=""><a :name="'set' + set.id"></a><a href="" @click.prevent="updateSet(set.id)"><span :class="{disabled:!set.isOn}">{{set.name}}</span> <i class="icon expand small"></i></a>
-				<p style="margin-top:0.5em">
-					<label-on :v-is-on="set.isOn"></label-on>
-				</p>
-			</td>
-			<td class="rules-box">
-				<div v-for="rule in set.rules" style="margin-top: 0.4em;margin-bottom:0.4em">
-                    <http-firewall-rule-label :v-rule="rule"></http-firewall-rule-label>
-				</div>
-				<span class="ui disabled" v-if="set.rules.length == 0">暂时还没有规则</span>
-			</td>
-			<td class="center">
-                <span v-if="set.connector.toUpperCase() == 'OR'">或</span><span v-else>和</span>
-                <span class="small grey">({{set.connector.toUpperCase()}})</span>
-            </td>
-			<td nowrap="">
-                <http-firewall-actions-view :v-actions="set.actions"></http-firewall-actions-view>
-			</td>
-			<td>
-				<a href="" @click.prevent="updateSet(set.id)">修改</a> &nbsp; <a href="" @click.prevent="updateSetOn(set.id, false)" v-if="set.isOn">停用</a><a href="" @click.prevent="updateSetOn(set.id, true)" v-if="!set.isOn">启用</a> &nbsp; <a href="" @click.prevent="deleteSet(set.id)">删除</a>
-			</td>
-		</tr>
+            <tr :class="{warning: highlightedSetId == set.id}">
+                <td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
+                <td nowrap=""><a :name="'set' + set.id"></a><a href="" @click.prevent="updateSet(set.id)"><span :class="{disabled:!set.isOn}">{{set.name}}</span> <i class="icon expand small"></i></a>
+                    <p style="margin-top:0.5em">
+                        <label-on :v-is-on="set.isOn"></label-on>
+                    </p>
+                </td>
+                <td class="rules-box">
+                    <div v-for="rule in set.rules" style="margin-top: 0.4em;margin-bottom:0.4em">
+                        <http-firewall-rule-label :v-rule="rule"></http-firewall-rule-label>
+                    </div>
+                    <span class="ui disabled" v-if="set.rules.length == 0">暂时还没有规则</span>
+                </td>
+                <td class="center">
+                    <span v-if="set.rules != null && set.rules.length > 1">
+                        <span v-if="set.connector.toUpperCase() == 'OR'">或</span><span v-else>和</span>
+                        <span class="small grey">({{set.connector.toUpperCase()}})</span>
+                    </span>
+                    <span v-else class="disabled">-</span>
+                </td>
+                <td nowrap="">
+                    <http-firewall-actions-view :v-actions="set.actions"></http-firewall-actions-view>
+                </td>
+                <td>
+                    <a href="" @click.prevent="updateSet(set.id)">修改</a> &nbsp; <a href="" @click.prevent="updateSetOn(set.id, false)" v-if="set.isOn">停用</a><a href="" @click.prevent="updateSetOn(set.id, true)" v-if="!set.isOn">启用</a> &nbsp;
+                    <a href="" @click.prevent="showSetCode(set.id)">代码</a> &nbsp;
+                    <a href="" @click.prevent="deleteSet(set.id)">删除</a>
+                </td>
+            </tr>
 		</tbody>
 	</table>
 

web/views/@default/servers/server/settings/waf/group.js

@@ -1,4 +1,6 @@
 Tea.context(function () {
+	this.highlightedSetId = 0
+
 	this.$delay(function () {
 		let that = this
 		sortTable(function () {
@@ -17,6 +19,14 @@ Tea.context(function () {
 					teaweb.successToast("排序保存成功")
 				})
 		})
+
+		// 跳转到刚操作成功的记录集
+		let opSetId = localStorage.getItem("goHTTPFirewallRuleSet")
+		if (opSetId != null) {
+			this.highlightedSetId = opSetId
+			localStorage.removeItem("goHTTPFirewallRuleSet")
+			document.querySelector("*[data-set-id='" + opSetId + "']").scrollIntoView({behavior: 'smooth'})
+		}
 	})
 
 	// 更改分组
@@ -33,12 +43,13 @@ Tea.context(function () {
 
 	// 创建规则集
 	this.createSet = function (groupId) {
+		let that = this
 		teaweb.popup("/servers/components/waf/createSetPopup?firewallPolicyId=" + this.firewallPolicyId + "&groupId=" + groupId + "&type=" + this.type, {
 			width: "50em",
 			height: "40em",
-			callback: function () {
+			callback: function (resp) {
 				teaweb.success("保存成功", function () {
-					window.location.reload()
+					that.goSetId(resp.data.setId)
 				})
 			}
 		})
@@ -46,12 +57,13 @@ Tea.context(function () {
 
 	// 修改规则集
 	this.updateSet = function (setId) {
+		let that = this
 		teaweb.popup("/servers/components/waf/updateSetPopup?firewallPolicyId=" + this.firewallPolicyId + "&groupId=" + this.group.id + "&type=" + this.type + "&setId=" + setId, {
 			width: "50em",
 			height: "40em",
 			callback: function () {
 				teaweb.success("保存成功", function () {
-					window.location.reload()
+					that.goSetId(setId)
 				})
 			}
 		})
@@ -59,12 +71,15 @@ Tea.context(function () {
 
 	// 停用|启用规则集
 	this.updateSetOn = function (setId, isOn) {
+		let that = this
 		this.$post("/servers/components/waf/updateSetOn")
 			.params({
 				setId: setId,
 				isOn: isOn ? 1 : 0
 			})
-			.refresh()
+			.success(function () {
+				that.goSetId(setId)
+			})
 	}
 
 	// 删除规则集
@@ -79,4 +94,17 @@ Tea.context(function () {
 				.refresh()
 		})
 	}
+
+	// 显示规则集代码
+	this.showSetCode = function (setId) {
+		teaweb.popup("/servers/components/waf/setCodePopup?setId=" + setId, {
+			height: "26em"
+		})
+	}
+
+	// 跳转到刚操作的记录集ID
+	this.goSetId = function (setId) {
+		localStorage.setItem("goHTTPFirewallRuleSet", setId)
+		teaweb.reload()
+	}
 })