IronBank.vue

<template>
  <div class="iron-bank">
    <PageHeader
      title="Iron Bank"
      description="Iron Bank is Platform One's authorized, hardened, and approved container repository that supports the end to end lifecycle needed for modern software development."
      buttonText="Visit the Website"
      buttonUrl="https://ironbank.dso.mil"
      buttonTarget="_blank"
      :logoSource="ibLogo"
    />
    <v-container class="px-md-8 px-auto">
      <v-container class="px-md-16">
        <h2 class="my-3 mx-md-16 mx-auto">
          Why Iron Bank?
        </h2>
        <div class="row text-left px-xl-16">
          <div class="col-md-6 mb-n10 mb-md-0">
            <ul>
              <li>
                Automates, secures, and accelerates the approval process of
                commercial and open source containers to be used within the DoD
                with DoD-wide reciprocity
              </li>
              <li>
                Brings accredited software to the DoD using processes and
                procedures that are faster and more efficient than other methods
              </li>
              <li>Provides continuous monitoring of approved images</li>
              <li>
                Maintains continuously updated containers so that developers
                have access to the latest tools
              </li>
              <li>
                Provides a toolbox of commonly used and secured capabilities for
                mission apps
              </li>
            </ul>
          </div>
          <div class="col-md-6">
            <ul>
              <li>
                Provides end-to-end management of container justifications for
                known vulnerabilities and container approval process via
                Vulnerability Assessment Tool (VAT)
              </li>
              <li>Assists vendors with the hardening process of containers</li>
              <li>
                The
                <a
                  href="https://ironbank.dso.mil/ironbank/repomap"
                  target="_blank"
                  >Iron Bank</a
                >
                website offers a view of all approved applications and provides
                any necessary details in regards to the application
              </li>
              <li>
                <a href="https://registry1.dso.mil" target="_blank"
                  >Registry One</a
                >
                is a fully compliant Open Container Initiative registry. All
                containers found under the Iron Bank project are guaranteed to
                be approved
              </li>
              <li>
                <a href="https://repo1.dso.mil/dsop" target="_blank"
                  >Repo One</a
                >
                is the central repository for the source code to create hardened
                and evaluated containers for the DoD
              </li>
            </ul>
          </div>
        </div>
      </v-container>

      <div class="row justify-center mt-14">
        <div
          class="col-md-10 white--text pa-md-12"
          style="border-radius:10px; height:100%;width:100%;background-color: #031726 !important;"
        >
          <div class="row">
            <div class="col-md-7 text-left pr-md-16 pa-12 pa-md-0">
              <h2 class="ma-auto px-0 pb-10 white--text">
                Process Highlights
              </h2>
              <p>
                The Iron Bank approval process centralizes and standardizes
                application hardening throughout the DoD. This information is
                stored in Repo One.
              </p>
              <div class="row">
                <div class="col-6 col-md-3" style="font-size:14px;">
                  <img
                    class="img-fluid mt-2 mb-3"
                    src="@/assets/images/iron-bank/rescan-icon.png"
                    alt="earth icon"
                  />
                  <p>
                    Every 12 hours applications are built and scanned again for
                    findings
                  </p>
                </div>
                <div class="col-6 col-md-3" style="font-size:14px;">
                  <img
                    class="img-fluid mb-2"
                    src="@/assets/images/iron-bank/continuous-update.png"
                    alt="continuous update icon"
                  />
                  <p>
                    Applications are continuously updated to the latest version
                  </p>
                </div>
                <div class="col-6 col-md-3" style="font-size:14px;">
                  <img
                    class="img-fluid mb-2"
                    src="@/assets/images/iron-bank/earth.png"
                    alt="earth icon"
                  />
                  <p>
                    Body of evidence that is public facing and readily available
                    for use
                  </p>
                </div>
                <div class="col-6 col-md-3" style="font-size:14px;">
                  <img
                    class="img-fluid mb-2"
                    src="@/assets/images/iron-bank/lock-check.png"
                    alt="lock check icon"
                  />
                  <p>
                    DISA STIGs, CIS benchmarks, and best practices applied
                  </p>
                </div>
              </div>
              <div :class="$vuetify.breakpoint.smAndDown ? 'text-center' : ''">
                <v-btn
                  :class="
                    $vuetify.breakpoint.smAndDown
                      ? 'my-3 my-md-6 mx-3'
                      : 'my-6 mr-6'
                  "
                  color="primary"
                  href="https://ironbank.dso.mil/ironbank/repomap"
                  target="_blank"
                >
                  Explore Iron Bank
                </v-btn>
                <v-btn
                  :class="
                    $vuetify.breakpoint.smAndDown
                      ? 'my-3  mx-3 black--text'
                      : 'my-6 black--text'
                  "
                  color="light"
                  href="https://repo1.dso.mil/dsop"
                  target="_blank"
                >
                  Repo One
                </v-btn>
              </div>
            </div>
            <div
              class="col-md-5 text-left pl-md-16 pa-12 pa-md-0"
              :style="
                $vuetify.breakpoint.mdAndUp
                  ? 'border-left: solid white 1px'
                  : ''
              "
            >
              <h2 class="ma-auto px-0 pb-10 white--text">
                How Do We Do It?
              </h2>
              <p>
                We work with the open source community and commercial vendors to
                centralize a hardened and approved version of an application
                that is easily accessible to the entire DoD. By leveraging our
                Certificate to Field (CtF) process, the DoD community can
                quickly and easily deploy applications at unprecedented speed.
              </p>
              <v-btn
                class="my-6"
                color="primary"
                href="https://registry1.dso.mil"
                target="_blank"
              >
                Registry One
              </v-btn>
            </div>
          </div>
        </div>
      </div>

      <v-container class="px-md-8 px-auto mt-10">
        <v-container class="px-lg-16">
          <h2 class="my-3 mx-lg-16 mx-auto">
            How Do I Contribute Containers to Iron Bank to be Hardened?
          </h2>
          <div class="row justify-center">
            <div class="col-12 col-xl-8">
              <p>
                Before contributing a container, you should first make sure that
                the application you are contributing is not already in the Iron
                Bank.
                <span style="font-weight:600">Launch Repo One</span> to
                research. If the container image does not exist, requests can be
                made with the Iron Bank Container Hardening team for
                accreditation. Please complete the
                <span style="font-weight:600">Container Hardening Request</span
                >.
              </p>
            </div>
          </div>
          <v-btn
            class="my-3 mx-10"
            color="primary"
            href="https://repo1.dso.mil/dsop"
            target="_blank"
          >
            Launch Repo One
          </v-btn>
          <v-btn
            class="my-3 mx-10"
            color="primary"
            href="https://forms.gle/jchZ9cbywsLoTnCY8"
            target="_blank"
          >
            Container Hardening Request
          </v-btn>
        </v-container>
      </v-container>

      <div class="row justify-center">
        <div class="image-wrapper" @click="() => showImg(0)">
          <img
            class="img-fluid"
            src="@/assets/images/iron-bank/IBVS_diagram.png"
            alt="Iron Bank Diagram"
          />
        </div>
      </div>
      <div class="mx-auto mb-10">
        <DownloadButton
          text="Iron Bank Diagram"
          :internalFilePath="ibvsDiagram"
        />
      </div>

      <v-container class="px-md-8 px-auto">
        <v-container class="px-lg-16">
          <h2 class="my-3 mx-lg-16">
            Pulling Hardened Containers From Registry One
          </h2>
          <div class="row justify-center">
            <div class="col-12 col-xl-8">
              <p>
                All containers under the Iron Bank project are officially
                approved. See the following diagram on how to manually pull
                containers from Registry One. Automated pull capabilities coming
                soon.
              </p>
            </div>
          </div>
          <v-btn
            class="my-6 mx-auto"
            color="primary"
            href="https://registry1.dso.mil"
            target="_blank"
          >
            Launch Registry One
          </v-btn>
        </v-container>
      </v-container>
      <div class="row justify-center" v-if="$vuetify.breakpoint.mdAndUp">
        <div class="image-wrapper" @click="() => showImg(1)">
          <img
            class="img-fluid"
            src="@/assets/images/iron-bank/IBVS_registry1_process.png"
            alt="Iron Bank Registry One Process"
          />
        </div>
      </div>
      <div class="mt-16" v-if="$vuetify.breakpoint.smAndDown">
        <IBCollapsiblesDownloadSteps />
      </div>

      <div class="mx-auto mt-4 mb-10">
        <DownloadButton
          text="Pulling Containers"
          :internalFilePath="ibvsRegistryProcess"
        />
      </div>

      <v-container class="px-md-8 px-auto mt-10">
        <v-container class="px-lg-16 text-center">
          <h2 class="my-3 mx-lg-16 mx-auto">
            How Do I Use A Hardened Container at a Multi-Security Level?
          </h2>
          <div class="row justify-center">
            <div class="col-12 col-xl-8">
              <p>
                Applications are typically approved at multiple Impact Levels
                (IL). Each organization is welcome to accept reciprocity with
                our approvals, but may choose to do additional assessments such
                as an Intelligence Review. We are working on automatically
                transferring images from lower classification levels to higher
                classifications for immediate use.
              </p>
            </div>
          </div>
        </v-container>
      </v-container>

      <v-container class="px-md-8 px-auto">
        <v-container class="px-lg-16 text-center">
          <h2 class="my-3 mx-lg-16 mx-auto">
            The Iron Bank Pipeline
          </h2>
          <div class="row justify-center">
            <div class="col-12 col-xl-8">
              <p>
                Every container must pass each phase of the Iron Bank pipeline
                to be available on Iron Bank and Registry One. Passing these six
                phases results in a container being signed and accredited.
              </p>
            </div>
          </div>
          <v-btn
            class="my-6 mx-auto"
            color="primary"
            href="https://repo1.dso.mil/ironbank-tools/ironbank-pipeline/-/blob/master/README.md"
            target="_blank"
          >
            Learn More
          </v-btn>
        </v-container>
      </v-container>
      <div class="row justify-center" v-if="$vuetify.breakpoint.mdAndUp">
        <div class="image-wrapper" @click="() => showImg(2)">
          <img
            class="img-fluid"
            src="@/assets/images/iron-bank/IBVS_pipeline.png"
            alt="Iron Bank Pipeline"
          />
        </div>
      </div>
      <div class="mt-16" v-if="$vuetify.breakpoint.smAndDown">
        <IBCollapsiblesPipeline />
      </div>

      <div class="mx-auto mt-4 mb-10">
        <DownloadButton
          text="Iron Bank Pipeline"
          :internalFilePath="ibvsPipeline"
        />
      </div>

      <v-container class="px-md-8 px-auto">
        <v-container class="px-md-16">
          <h2 class="my-3 mx-md-16 mx-auto">
            Onboarding
          </h2>
          <div class="row justify-center">
            <div class="col-12 col-xl-8">
              <p>
                Interested in submitting a container to be hardened and
                published on Iron Bank and Registry One? Check out the
                Contributor Onboarding Guide and see how to successfully scan
                and harden your container(s) through the
                <Tooltip
                  text="DevSecOps"
                  tooltip="Development, Security, and Operations"
                />
                Platform.
              </p>
            </div>
          </div>
          <v-btn
            class="my-6 mx-auto"
            color="primary"
            href="https://repo1.dso.mil/dsop/dccscr/-/tree/master/contributor-onboarding"
            target="_blank"
          >
            Onboarding Guide
          </v-btn>
        </v-container>
      </v-container>
    </v-container>

    <Wave :bottom="false">
      <div class="container">
        <div class="row justify-content-center px-8">
          <div class="col-md-6">
            <div>
              <h2 class="mx-auto">
                Have More Questions?
              </h2>
            </div>
            <p class="mx-auto">
              Check out our FAQ page.
            </p>
          </div>
        </div>
        <div>
          <v-btn
            class="mx-auto mt-6"
            color="primary"
            href="https://confluence.il2.dso.mil/cq/questions.action?spaceKey=P1"
            target="_blank"
            >FAQ</v-btn
          >
        </div>
      </div>
    </Wave>

    <vue-easy-lightbox
      escDisabled
      moveDisabled
      :visible="lightbox.visible"
      :imgs="lightbox.imgs"
      :index="lightbox.index"
      @hide="handleHide"
    ></vue-easy-lightbox>
  </div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import Wave from "@/components/Wave";
import VueEasyLightbox from "vue-easy-lightbox";
import IBLogo from "@/assets/images/logos/Iron_Bank_Logo_LIGHT.png";
import IBVSDiagram from "@/assets/images/iron-bank/IBVS_diagram.png";
import IBVSRegistryProcess from "@/assets/images/iron-bank/IBVS_registry1_process.png";
import IBVSPipeline from "@/assets/images/iron-bank/IBVS_pipeline.png";
import DownloadButton from "@/components/Base/DownloadButton";
import IBCollapsiblesPipeline from "@/components/IBCollapsiblesPipeline";
import IBCollapsiblesDownloadSteps from "@/components/IBCollapsiblesDownloadSteps";
import Tooltip from "@/components/Base/Tooltip";

export default {
  name: "IronBank",
  components: {
    PageHeader,
    Wave,
    VueEasyLightbox,
    DownloadButton,
    IBCollapsiblesPipeline,
    IBCollapsiblesDownloadSteps,
    Tooltip,
  },
  methods: {
    showImg(index) {
      this.lightbox.index = index;
      this.lightbox.visible = true;
    },
    handleHide() {
      this.lightbox.visible = false;
    },
    getImageUrl(filename) {
      return require(`@/assets/images/${filename}`);
    },
  },
  data: function() {
    return {
      ibLogo: IBLogo,
      ibvsDiagram: IBVSDiagram,
      ibvsRegistryProcess: IBVSRegistryProcess,
      ibvsPipeline: IBVSPipeline,
      // lightbox state
      lightbox: {
        visible: false,
        index: 0, // default: 0
        imgs: [
          require("@/assets/images/iron-bank/IBVS_diagram.png"),
          require("@/assets/images/iron-bank/IBVS_registry1_process.png"),
          require("@/assets/images/iron-bank/IBVS_pipeline.png"),
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.iron-bank {
  li {
    margin: 15px 0;
  }
  // lightbox stuff
  .vel-modal {
    .vel-img {
      background-color: #ffffff;
    }
    .vel-toolbar {
      .toobar-btn.toolbar-btn__rotate {
        display: none;
      }
    }
  }
}
</style>