diff --git a/frontend/src/views/website/website/config/safety/index.vue b/frontend/src/views/website/website/config/safety/index.vue
index c7f8d902b..2901467fd 100644
--- a/frontend/src/views/website/website/config/safety/index.vue
+++ b/frontend/src/views/website/website/config/safety/index.vue
@@ -6,7 +6,9 @@
         <el-tab-pane :label="'IP白名单'" name="ipWhiteList">
             <IpWhiteList :id="id" v-if="index == 'ipWhiteList'"></IpWhiteList>
         </el-tab-pane>
-        <el-tab-pane :label="'黑名单'"></el-tab-pane>
+        <el-tab-pane :label="'IP 黑名单'" name="ipBlockList">
+            <IpBlockList :id="id" v-if="index == 'ipBlockList'"></IpBlockList>
+        </el-tab-pane>
         <el-tab-pane :label="'并发限制'"></el-tab-pane>
         <el-tab-pane :label="'请求限制'"></el-tab-pane>
         <el-tab-pane :label="'禁止爬虫'"></el-tab-pane>
@@ -16,6 +18,7 @@
 import { computed, ref } from 'vue';
 import CCDeny from './ccdeny/index.vue';
 import IpWhiteList from './ip-white-list/index.vue';
+import IpBlockList from './ip-block-list/index.vue';
 
 const props = defineProps({
     id: {
diff --git a/frontend/src/views/website/website/config/safety/ip-block-list/index.vue b/frontend/src/views/website/website/config/safety/ip-block-list/index.vue
new file mode 100644
index 000000000..50f00ecbd
--- /dev/null
+++ b/frontend/src/views/website/website/config/safety/ip-block-list/index.vue
@@ -0,0 +1,137 @@
+<template>
+    <el-row>
+        <el-col :span="10" :offset="2">
+            <ComplexTable :data="data" v-loading="loading">
+                <template #toolbar>
+                    <el-button type="primary" icon="Plus" @click="openCreate">
+                        {{ $t('commons.button.add') }}
+                    </el-button>
+                </template>
+                <el-table-column label="IP" prop="ip">
+                    <template #default="{ row }">
+                        <fu-read-write-switch :data="row.ip" v-model="row.edit" write-trigger="onDblclick">
+                            <el-form-item :error="row.error">
+                                <el-input v-model="row.ip" @blur="row.edit = false" @input="checkIpRule(row)" />
+                            </el-form-item>
+                        </fu-read-write-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('commons.table.operate')">
+                    <template #default="{ $index }">
+                        <el-button link type="primary" @click="removeIp($index)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </ComplexTable>
+            <br />
+            <el-alert :title="$t('website.mustSave')" type="info" :closable="false"></el-alert>
+            <br />
+            <el-button type="primary" :loading="loading" @click="submit">
+                {{ $t('commons.button.save') }}
+            </el-button>
+        </el-col>
+    </el-row>
+</template>
+<script lang="ts" setup>
+import { WebSite } from '@/api/interface/website';
+import { GetWafConfig } from '@/api/modules/website';
+import { computed, onMounted, reactive, ref } from 'vue';
+import ComplexTable from '@/components/complex-table/index.vue';
+import { SaveFileContent } from '@/api/modules/files';
+import { ElMessage } from 'element-plus';
+import i18n from '@/lang';
+import { checkIp } from '@/utils/util';
+
+const props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const id = computed(() => {
+    return props.id;
+});
+
+let loading = ref(false);
+let data = ref([]);
+let req = ref<WebSite.WafReq>({
+    websiteId: 0,
+    key: '',
+    rule: 'ipBlocklist',
+});
+let fileUpdate = reactive({
+    path: '',
+    content: '',
+});
+
+const get = async () => {
+    data.value = [];
+    loading.value = true;
+    const res = await GetWafConfig(req.value);
+    loading.value = false;
+
+    if (res.data.content != '') {
+        const ipList = JSON.parse(res.data.content);
+        ipList.forEach((value) => {
+            data.value.push({
+                ip: value,
+                eidt: false,
+                error: '',
+            });
+        });
+    }
+
+    fileUpdate.path = res.data.filePath;
+};
+
+const removeIp = (index: number) => {
+    data.value.splice(index, 1);
+};
+
+const openCreate = () => {
+    data.value.unshift({ id: '', edit: true, error: '' });
+};
+
+const submit = async () => {
+    let canCommit = true;
+    for (const row of data.value) {
+        console.log(row.ip);
+        console.log(row.error);
+        if (row.ip != '' && row.error != '') {
+            row.edit = true;
+            canCommit = false;
+        }
+    }
+    if (!canCommit) {
+        return;
+    }
+    let ipArray = [];
+    data.value.forEach((row) => {
+        ipArray.push(row.ip);
+    });
+
+    fileUpdate.content = JSON.stringify(ipArray);
+    loading.value = true;
+    SaveFileContent(fileUpdate)
+        .then(() => {
+            ElMessage.success(i18n.global.t('commons.msg.updateSuccess'));
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+const checkIpRule = (row: any) => {
+    if (checkIp(row.ip)) {
+        row.error = i18n.global.t('commons.rule.ip');
+    } else {
+        row.error = '';
+    }
+};
+
+onMounted(() => {
+    req.value.websiteId = id.value;
+    get();
+});
+</script>