<%- include('partials/header', { title: 'Pentest' }) %>

<!-- Page Header -->

<div class="row mb-3">
    <div class="col-12">
        <h1>Security / Pentest</h1>
    </div>
</div>

<!-- Download Ruleset -->

<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info" role="alert">
            <div><a href="/pentest/ruleset" class="btn btn-link">Download pentest ruleset</a></div>
        </div>
    </div>
</div>

<!-- Main Content -->

<div class="row">
    <div class="col-12">
        <div class="accordion" id="accordionExample">

            <!-- Item 1: Modify Security Headers -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        Modify Security Headers
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>Remove CSP header.
                                    <ul>
                                        <li>Add a <b>Response - Remove Header</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/pentest</i></li>
                                        <li>Set <b>Header Name</b> to <i>Content-Security-Policy</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>Remove legacy iframe header.
                                    <ul>
                                        <li>Add a <b>Response - Remove Header</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/about</i></li>
                                        <li>Set <b>Header Name</b> to <i>Content-Security-Policy</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                        <div class="d-flex justify-content-center">
                            <iframe src="/about" title="iframe test" width="600" height="400"
                            class="border border-success border-3 rounded"></iframe>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 2: Disable/Remove Input Validation -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Disable/Remove Input Validation
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>
                                    Remove maxlenth and required restrictions.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/pentest</i></li>
                                        <li>Set <b>Find</b> to <i>maxlength="10" required</i>.</li>
                                        <li>Leave the <b>Replace</b> field blank.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>
                                    Enable disabled inputs.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/pentest</i></li>
                                        <li>Set <b>Find</b> to <i>"numberInputHelp" disabled</i>.</li>
                                        <li>Set <b>Replace</b> to <i>"numberInputHelp"</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>
                                    Display hidden inputs.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/pentest</i></li>
                                        <li>Set <b>Find</b> to <i>type="hidden"</i>.</li>
                                        <li>Set <b>Replace</b> to <i>type="text"</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                        <form>
                            <div class="mb-3">
                                <label for="name-input" class="form-label">Enter your name:</label>
                                <input type="text" class="form-control" id="name-input" name="name-input" aria-describedby="nameInputHelp" maxlength="10" required />
                            </div>
                            <div class="mb-3">
                                <label for="number-input" class="form-label">Enter a number:</label>
                                <input type="number" class="form-control" id="number-input" name="number-input" aria-describedby="numberInputHelp" disabled />
                            </div>
                            <div class="mb-3">
                                <input type="hidden" id="hidden-input" name="hidden-input" value="SECRET DATA" />
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                        <div class="mt-3">
                            <span id="find-replace-text-output" class="fw-bold"></span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Bottom Nav -->

<div class="row my-3">
    <div class="col-12 d-flex flex-column flex-sm-row justify-content-between gap-2">
        <a href="/work-poc" class="btn btn-link px-0">&lt; Work POC</a>
        <!--<a href="/work-poc" class="btn btn-link px-0 ms-sm-auto">Work POC &gt;</a>-->
    </div>
</div>

<!-- Scripts -->

<script>
    $(async () => {
        console.log('CSP is gone.');
    });
</script>

<%- include('partials/footer') %>
