演示一个数据渲染的方式

[wuzhi-dev]

演示一个数据渲染的方式

[wuzhi-dev]

输入内容：

{
  "code": 200,
  "msg": "扫描完成",
  "data": {
    "reports": [
      {
        "src_ip": "192.168.164.1",
        "reason": "检测到 XSS 攻击",
        "website": "http://192.168.164.30/vul/xss/xss_reflected_get.php?message=<script>alert(123)</script>&submit=submit",
        "event_id": "775ec8eb717441a19a7a542f779a1f43",
        "timestamp": "2024-01-02 22:20:49"
      },
      {
        "src_ip": "192.168.164.2",
        "reason": "检测到 SQL攻击",
        "website": "http://192.168.164.30/vul/sql/get.php?id=1%20and%201",
        "event_id": "61d61f2d5e9d40ff84e3ac163b12763c",
        "timestamp": "2024-01-02 22:17:09"
      },
      {
        "src_ip": "192.168.164.3",
        "reason": "检测到 XSS 攻击",
        "website": "http://192.168.164.30/vul/xss/xss_reflected_get.php?message=<script>alert(123)</script>&submit=submit",
        "event_id": "b4ee275c3baf42c69be25196d67df7ea",
        "timestamp": "2024-01-02 22:16:50"
      }
    ]
  }
}

渲染模板：

<div class="ant-table ant-table-default ant-table-bordered">
    <div class="ant-table-content">
        <div class="ant-table-body">
            <table>
                <thead class="ant-table-thead">
                    <tr>
                        <th>
                            <span class="ant-table-header-column">
                                <div>
                                    <span class="ant-table-column-title">timestamp</span>
                                    <span class="ant-table-column-sorter"></span>
                                </div>
                            </span>
                        </th>
                      <!--
                        <th>
                            <span class="ant-table-header-column">
                                <div>
                                    <span class="ant-table-column-title">event_id</span>
                                    <span class="ant-table-column-sorter"></span>
                                </div>
                            </span>
                        </th>
                        -->
                        <th>
                            <span class="ant-table-header-column">
                                <div>
                                    <span class="ant-table-column-title">src_ip</span>
                                    <span class="ant-table-column-sorter"></span>
                                </div>
                            </span>
                        </th>
                        <th>
                            <span class="ant-table-header-column">
                                <div>
                                    <span class="ant-table-column-title">reason</span>
                                    <span class="ant-table-column-sorter"></span>
                                </div>
                            </span>
                        </th>
                        <th>
                            <span class="ant-table-header-column">
                                <div>
                                    <span class="ant-table-column-title">URL</span>
                                    <span class="ant-table-column-sorter"></span>
                                </div>
                            </span>
                        </th>
                    </tr>
                </thead>
                <tbody class="ant-table-tbody">
                    {{each action_results action_result}}
                    {{each action_result.data.reports report}}

                    <tr class="ant-table-row">
                        <td>{{report.timestamp}}</td>
                        <!-- <td>{{report.event_id}}</td> -->
                        <td>{{report.src_ip}}</td>
                        <td>{{report.reason}}</td>
                        <td>{{report.website}}</td>
                    </tr>
                    {{/each}}
                  {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</div>

调试方法：
https://<OctoMation_SERVER>/app

演示效果：

[wuzhi-dev]

可以用来演示测试数据的APP
shakespeare-action-python-demo_data.zip