{% extends 'core/Vulnerable and Outdated Components/VulnerableOutdated.html' %}
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
{% block inside-content %}
    <div class="bg-white nav-item flex-grow bg-opacity-20 backdrop-filter backdrop-blur-md w-4/5 problems-container">
         <h1 class="text-center text-white font-bold pb-5">Preventing Vulnerable and Outdated Components</h1>

         <p class="text-white pb-3">
            Now that we know how to find our dependencies, finding vulnerabilities in them shouldn't be an issue. First,
             you should remove all the dependencies, components, and unnecessary files you are not using. Once you have done that, let's
             look at what we have left. For help, we can use tools like <a href="https://nvd.nist.gov/vuln/search" class="font-bold underline">NIST</a>,
             <a href="https://cve.mitre.org/cve/search_cve_list.html" class="font-bold underline">MITRE</a>, or for NPM packages
             <a href="https://snyk.io/advisor/" class="font-bold underline">snyk</a> and <a href="https://security.snyk.io/vuln" class="font-bold underline">snyk Vulnerability DB</a>, to search for
             vulnerabilities in our libraries. As for the version of your dependencies, you can either check them manually or use
             tools for dependency checking like <a href="https://www.npmjs.com/package/check-outdated" class="font-bold underline">check-outdated</a> or
             <a href="https://owasp.org/www-project-dependency-check/" class="font-bold underline">OWASP Dependency-Check</a>.
             You can use tools that will do the updating for you, like
             <a href="https://github.com/adamchainz/django-upgrade" class="font-bold underline">adamchainz/django-upgrade
             </a>.<br>
             Overall, you should be very careful with your dependencies to not open unwanted back doors for pesky attackers.
        </p>

        <p class="text-white pb-3">
            Now let's use one of the tools as an example with this project. We will use the <a href="https://www.npmjs.com/package/check-outdated" class="font-bold underline">check-outdated</a>
            library.
        </p>

        <div class="flex flex-grow pb-3">
            <pre><code class="cmd rounded-lg">npx check-outdated --ignore-pre-releases --ignore-dev-dependencies --ignore-packages package1,package2
 --columns name,type,current,latest,changes
</code></pre>
            <br>
        </div>

        <p class="text-white pb-3">
            With results being:
        </p>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/dependency_check.png" alt=""/>
        </div>

        <p class="text-white pb-3 pt-3">
            The project has one outdated dependency. Let's check if we can use the older version or if we have to update
            it immediately. For this package, we can use <a href="https://snyk.io/advisor/" class="font-bold underline">snyk</a>
            and <a href="https://security.snyk.io/vuln" class="font-bold underline">snyk Vulnerability DB</a>.
            First, we can check if the package is still receiving support or is generally active and used. And then if
            the version we are using has any potential risks.
        </p>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/package_health.png" alt=""/>
        </div>
        <br>
        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/package_other.png" alt=""/>
        </div>

        <p class="text-white pb-3 pt-3">
            As we can see, the Flowbite package is rising in popularity and still receiving support. Now let's check,
            most importantly, if it has any vulnerabilities.
        </p>

        <div class="bg-gray-900 flex-grow m-auto pt-5 pb-5 px-4 rounded-xl" style="background-color: #2b2b2b">
            <img class="rounded-xl" src="/static/img/package_vulnerability.png" alt=""/>
        </div>

        <p class="text-white pb-3 pt-3">
            Those are some great news! Our package is not only popular but also safe. If updating packages is difficult
            for your project, dependencies like these are not a big issue. However, when there is an opportunity to
            update them, do so immediately.
            <BR>
            Always be careful with your packages and update them regularly.
        </p>

    </div>
{% endblock %}
</html>