TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-02 20:00:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
GoEdgeLab
2024-05-06 20:25:36 +08:00
parent a573eb5608
commit 5fb2990735
11 changed files with 293 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/views/@default/@layout.css
View File

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

2
web/views/@default/@layout.less
View File

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

73
web/views/@default/servers/components/waf/createSetPopup.html
View File

@@ -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>

12
web/views/@default/servers/components/waf/createSetPopup.js
View File

@@ -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()
})
}
}
})

10
web/views/@default/servers/components/waf/setCodePopup.html Normal file
View File

@@ -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>

5
web/views/@default/servers/components/waf/setCodePopup.js Normal file
View File

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

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

@@ -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>

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

@@ -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()
}
})