{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/22","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain…","fields":{"slug":"/engineering/css3-accordion/"},"html":"<p>Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain HTML, and CSS with no Javascript at all!</p>\n<h3 id=\"lets-begin\" style=\"position:relative;\"><a href=\"#lets-begin\" aria-label=\"lets begin permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Let's Begin</h3>\n<p>Firstly, let's make some markup with HTML. We are going to create a <code>div</code> and give it a class of <code>accordion</code> like so:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>Next, inside the accordion div, we will create another <code>div</code>, this time without a class.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>Next up, we will create a checkbox or a radio button. We are creating a checkbox or a radio button so that we can make their checked states open or close the accordion. So if you want to be able to open all accordions at the same time, you will use checkbox, otherwise you will use radio buttons. But in this article, I've chosen to use checkbox.\nWe will give the checkbox an <code>id</code> of <code>section1</code> and a <code>class</code> of <code>accordion__input</code>.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">input</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__input&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>Under the checkbox, we are going to create a <code>label</code> for the checkbox. This label will later on become the head of the accordion tab.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">input</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__input&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">label</span><span class=\"mtk1\"> </span><span class=\"mtk12\">for</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__label&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Section #1</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">label</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>Next, we will create a new <code>div</code> and give it a <code>class</code> of <code>accordion__content</code> because it will hold the content of the accordion. In this example, we will make the content of the accordion a paragraph.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">input</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__input&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">label</span><span class=\"mtk1\"> </span><span class=\"mtk12\">for</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__label&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Section #1</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">label</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__content&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>Repeat the <code>div</code> without a class for as many as you want depending on how many accordion tabs you want. In this example, we will use only three of them.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"html\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">input</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__input&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">label</span><span class=\"mtk1\"> </span><span class=\"mtk12\">for</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__label&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Section #1</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">label</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__content&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">input</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__input&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">label</span><span class=\"mtk1\"> </span><span class=\"mtk12\">for</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__label&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Section #1</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">label</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__content&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">input</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;checkbox&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">id</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__input&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">label</span><span class=\"mtk1\"> </span><span class=\"mtk12\">for</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;section1&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__label&quot;</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Section #1</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">label</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk1\"> </span><span class=\"mtk12\">class</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;accordion__content&quot;</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">p</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span></code></pre>\n<p>That's it with the HTML, and it should be looking like this:\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 34.15384615384616%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAtklEQVQoz62P2wqFIBBF/f9vDLpYFiSilRWVzGEPTFgvvZxgsUdzdI0ax5GGYaBt2x6s6/qoY4yf4KyqqoqKoqCmaW7quqayLDnx31pL3nsKITDTNHHKHhLwhTDs+56WZWETAWu8ijyOg87zZK7retT5OqVESmvNNm3bEmoBdkgYi6GYCWImQEQZY7hJGt5NAAf3feeRkG9kH5MojNt1HRvmwFCsnXP8EMaf5/lO7OWJSxX9+fsBLEMYqvWHSfsAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"plain-html\"\n        title=\"plain-html\"\n        src=\"/static/f5ede92648adab5f0693d6501b2db3e4/e5715/plain-html.png\"\n        srcset=\"/static/f5ede92648adab5f0693d6501b2db3e4/a6d36/plain-html.png 650w,\n/static/f5ede92648adab5f0693d6501b2db3e4/e5715/plain-html.png 768w,\n/static/f5ede92648adab5f0693d6501b2db3e4/906b5/plain-html.png 950w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Now let's start playing with the CSS part.\nWe'll begin by styling the <code>div</code> with the class of <code>accordion</code>.\nWe will give it a:</p>\n<ul>\n<li><code>max-width</code> to set a size for it.</li>\n<li><code>box-shadow</code> to provide it with a beautiful shadow.</li>\n<li><code>border-radius</code> to give it nice, rounded corners.</li>\n<li><code>overflow</code> to hide the content of the accordion tab when it is closed.</li>\n<li><code>background-color</code> to set the color of the accordion tabs.</li>\n</ul>\n<p>So now we have: </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"css\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk6\">.accordion</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">max-width</span><span class=\"mtk1\">: </span><span class=\"mtk7\">400px</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">box-shadow</span><span class=\"mtk1\">: </span><span class=\"mtk7\">0</span><span class=\"mtk1\"> </span><span class=\"mtk7\">0</span><span class=\"mtk1\"> </span><span class=\"mtk7\">10px</span><span class=\"mtk1\"> </span><span class=\"mtk11\">rgba</span><span class=\"mtk1\">(</span><span class=\"mtk7\">0</span><span class=\"mtk1\">, </span><span class=\"mtk7\">0</span><span class=\"mtk1\">, </span><span class=\"mtk7\">0</span><span class=\"mtk1\">, </span><span class=\"mtk7\">0.2</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">border-radius</span><span class=\"mtk1\">: </span><span class=\"mtk7\">15px</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">overflow</span><span class=\"mtk1\">: </span><span class=\"mtk8\">hidden</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">background-color</span><span class=\"mtk1\">: </span><span class=\"mtk8\">purple</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Now we will set some padding to the label and content so that there is some space between them and their borders.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"css\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk6\">.accordion__label</span><span class=\"mtk1\">, </span><span class=\"mtk6\">.accordion__content</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">padding</span><span class=\"mtk1\">: </span><span class=\"mtk7\">14px</span><span class=\"mtk1\"> </span><span class=\"mtk7\">20px</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Next, we will style the accordion label and set the following properties:</p>\n<ul>\n<li><code>display: block</code> to make the label take the full width of the accordion.</li>\n<li><code>color: white</code> to make the text of the label white.</li>\n<li><code>font-weight: bold</code> to make the text of the label bold.</li>\n<li><code>cursor: pointer</code> to make the cursor pointer when it hovers on the label. It is important to make the user know that the label can be clicked.</li>\n<li><code>transition: background-color 0.1s</code></li>\n<li><code>position: relative</code></li>\n</ul>\n<p>So it looks like this when combined:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"css\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk6\">.accordion__label</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">display</span><span class=\"mtk1\">: </span><span class=\"mtk8\">block</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">color</span><span class=\"mtk1\">: </span><span class=\"mtk8\">white</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">font-weight</span><span class=\"mtk1\">: </span><span class=\"mtk8\">bold</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">cursor</span><span class=\"mtk1\">: </span><span class=\"mtk8\">pointer</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">position</span><span class=\"mtk1\">: </span><span class=\"mtk8\">relative</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">transition</span><span class=\"mtk1\">: background-color </span><span class=\"mtk7\">0.1s</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Now, we will make the color of the label darker when the user hovers on it. This is also to make the user know that he/she has placed the cursor on something that can be clicked.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"css\" data-index=\"9\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk6\">.accordion__label:hover</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">background-color</span><span class=\"mtk1\">: </span><span class=\"mtk11\">rgba</span><span class=\"mtk1\">(</span><span class=\"mtk7\">0</span><span class=\"mtk1\">, </span><span class=\"mtk7\">0</span><span class=\"mtk1\">, </span><span class=\"mtk7\">0</span><span class=\"mtk1\">, </span><span class=\"mtk7\">0.1</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Next up, we will style the content of the accordion and set the following properties:</p>\n<ul>\n<li><code>background: white</code> to make the background color of the content of the accordion white.</li>\n<li><code>line-height: 1.6</code> to increase the line-height of the text in the content.</li>\n<li><code>font-size: 0.85em</code> to set the font size of the text of the content.</li>\n<li><code>display: none</code> this is the most important property here so that we can hide the content of the accordion tab by default until the label is clicked.</li>\n</ul>\n<p>So when we put it together, we have this:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"css\" data-index=\"10\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk6\">.accordion__content</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">background</span><span class=\"mtk1\">: </span><span class=\"mtk8\">white</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">line-height</span><span class=\"mtk1\">: </span><span class=\"mtk7\">1.6</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">font-size</span><span class=\"mtk1\">: </span><span class=\"mtk7\">0.85em</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">display</span><span class=\"mtk1\">: </span><span class=\"mtk8\">none</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Now we have to hide the checkbox from showing. To do that, we set the <code>display</code> property of it to <code>none</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"css\" data-index=\"11\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk6\">.accordion__input</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">display</span><span class=\"mtk1\">: </span><span class=\"mtk8\">none</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>The next thing to do is to show the accordion tab's content if the label is clicked. To do this, we have to set the <code>display</code> property of it to <code>block</code> when the label is clicked. We can know that the label is clicked using the check-state of the checkbox that we hid earlier.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"css\" data-index=\"12\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk6\">.accordion__input:checked</span><span class=\"mtk1\"> ~ </span><span class=\"mtk6\">.accordion__content</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">display</span><span class=\"mtk1\">: </span><span class=\"mtk8\">block</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Hurray🎉, we now have a lovely and functioning accordion that looks like this\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 432px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAACQklEQVQ4y62S2W8SURjF58+xD8bYuMRoTNxiotEHE33izfXJh9pS2rLU0kKhC3WvRaqxCy3LlKLPmtpo4j/Q6BMwwDBQSAhlkc5yvN8laNREMemd/Obe+917zpy5M8LW5y1EPWGIExGsMWJTItZ9ax0Tn4lB9EawGdpAZacCIWQNwnncgeemp5i+6IXv8iQG9/fBvK8H/V33OsLS1Yvxc2P4VmtA+BjcxHLvImLOKKKOECK2Vaz0L/0XwT6mH42iQYaarmGvmqZpEJrNJsrlMrLZLGRZRk7OQc7KUHIK8koekiRhu7DN16RUitezmSwSiQTX0Hqj0YCu61BVFQLdisUiMpkMh4SFQgHJZBLpdLplxEQkzuVyfNyGamRcKpVgGMavhrQhmUjyhHzMDMlAURRuLKUk5POtxDSnMb0J7SP9z4Sayp9ASZS8wtNJaak1Z2ZkQD2lIZNqtQqDXWTQhtoPQzpDTdWg7qrQdlnfVPmcDljXdA5tpDmvMaGhG39Ae7jh+/l3CNyY47/Owt1XWOp5jZd3XiBwaw7zbW77We/n48Bv0Jr/+iyWzYut3ybsWIX3vIsLHl2dwTPTYzhPOGA7NAD7kUHYD/8Ftu5gDB+1YuqSB7VKDULcE2PFIbjPOOE6NdLitBNuhqsDSDd6chgPr/lQ36mzhPYVjJ8dQ+CmHw+uTGPW9AT3j9kwdMAM60HLv+m2wNY9gIkLbtQp4ddPXyA6I3g7GccbbwyUOOYSO2bdLUIcCePDwgb/YAL2uH0HQmC9N9U4RFMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"css3-accordion\"\n        title=\"css3-accordion\"\n        src=\"/static/74f90102dc9241d2de0f7549be8406b6/0e0c3/css3-accordion.png\"\n        srcset=\"/static/74f90102dc9241d2de0f7549be8406b6/0e0c3/css3-accordion.png 432w\"\n        sizes=\"(max-width: 432px) 100vw, 432px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk6 { color: #D7BA7D; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n</style>","frontmatter":{"date":"October 27, 2020","updated_date":null,"description":"Learn how to make a beautiful accordion with HTML and CSS only","title":"A Simple CSS3 Accordion Tutorial","tags":["CSS","Accordion","UI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b5176ae6be9ad8d90a9631c81c046de2/ee604/cover-accordion.png","srcSet":"/static/b5176ae6be9ad8d90a9631c81c046de2/69585/cover-accordion.png 200w,\n/static/b5176ae6be9ad8d90a9631c81c046de2/497c6/cover-accordion.png 400w,\n/static/b5176ae6be9ad8d90a9631c81c046de2/ee604/cover-accordion.png 800w,\n/static/b5176ae6be9ad8d90a9631c81c046de2/db955/cover-accordion.png 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Isaac Anohene","github":"anohene1","avatar":null}}}},{"node":{"excerpt":"EternalBlue: A retrospective on one of the biggest Windows exploits ever Many stories are floating around on the internet about computer…","fields":{"slug":"/engineering/eternal-blue-retrospective/"},"html":"<h1 id=\"eternalblue-a-retrospective-on-one-of-the-biggest-windows-exploits-ever\" style=\"position:relative;\"><a href=\"#eternalblue-a-retrospective-on-one-of-the-biggest-windows-exploits-ever\" aria-label=\"eternalblue a retrospective on one of the biggest windows exploits ever permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>EternalBlue: A retrospective on one of the biggest Windows exploits ever</h1>\n<p>Many stories are floating around on the internet about computer viruses and worms that made an enormous impact on the world. From legends like the blistering fast SLAMMER worm from 2003 or the I LOVE Bug worm that set the stage for the fishing email notoriety, we see today. But the story behind <strong>EternalBlue</strong> has it all. Leaked straight out of the <strong>NSA's</strong> toolbox, it was a key asset for the well-known <strong>WannaCry</strong> ransomware to wreak havoc on the world. Some will even argue that it led to a full-on \"Cyber War\"...</p>\n<p>Before we start, this story is way too complex to fully cover in a short blog. We are skipping a lot, so go out and read more if you are interested.</p>\n<h2 id=\"the-beginning\" style=\"position:relative;\"><a href=\"#the-beginning\" aria-label=\"the beginning permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The beginning</h2>\n<p>From 2016 to 2017, the InfoSec community was turned upside down by the so-called <strong>\"Shadow Brokers\"</strong>. This unknown, mysterious group was responsible for five major leaks containing classified hacking tools, collected and archived by the NSA. The NSA has an unprecedented catalog of unknown exploits and backdoors due to decades of hoarding. But instead of notifying the software vendor about these vulnerabilities, they keep these to themselves. These exploits are valuable weapons for the NSA to protect the United States of America and its citizens (controversial, but a topic for another day).</p>\n<p>On April 14, 2017, the Shadow Brokers released their fifth leak containing multiple exploits. Infamous EternalBlue was one of them.</p>\n<h2 id=\"so-what-does-eternalblue-do-exactly\" style=\"position:relative;\"><a href=\"#so-what-does-eternalblue-do-exactly\" aria-label=\"so what does eternalblue do exactly permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>So what does EternalBlue do exactly?</h2>\n<p>Great question! EternalBlue takes advantage of a vulnerability seen in Microsoft's implementation of the SMB protocol. SMB stands for Server Message Block. It is primarily used in Windows for shared folders. Like most of these protocols, it makes communication between two nodes on a network possible via request-response messages (gross over-simplification).</p>\n<p>However, Microsoft made a critical error in the way these request messages where handled. By sending a carefully made request to port 445 (which was by default open) containing more data than expected, an attacker was able to set a \"buffer overflow\" in motion. Making the execution of unsigned (and thus malicious) code possible.</p>\n<h2 id=\"ms17-010\" style=\"position:relative;\"><a href=\"#ms17-010\" aria-label=\"ms17 010 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>MS17-010</h2>\n<p>A month before the leak, something remarkable happened. The NSA contacted Microsoft to inform them about EternalBlue, presumably because the NSA knew something was about to go down. Microsoft got to work immediately and mysteriously delayed its Patch Tuesday because of a \"last-minute issue\". They eventually released a security bulletin on March 14, the now infamous: MS17-010. Unfortunately, such a wide-spread piece of software like Windows has a prolonged update adaption rate. This proved, once again, to be true...</p>\n<h2 id=\"wannacry\" style=\"position:relative;\"><a href=\"#wannacry\" aria-label=\"wannacry permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>WannaCry</h2>\n<p>On May 12, 2017, the WannaCry (powered by EternalBlue) ransomware attack took the world by storm, infecting and encrypting 230,000 computers in over 150 countries. Russia, Ukraine, India, and Taiwan where affected the most, according to Kaspersky Lab. Huge factories from Nissan and Renault came to a screeching halt. NHS hospitals in the UK where severely affected by the attack and where locked out of essential medical equipment. Some estimated that economic losses could be in the hundreds of millions. North Korea is the main suspect for the attack. Two North Korean hackers have been expedited. </p>\n<h2 id=\"notpetya\" style=\"position:relative;\"><a href=\"#notpetya\" aria-label=\"notpetya permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>NotPetya</h2>\n<p>Not much later, on June 27, 2017, Ukraine got stomped by another vicious cyberattack. Armed with EternalBlue, the malware called \"NotPetya\" was able to cause significant damage. The attack was mainly targeted towards Ukrainian banks, government bodies, and state-owned organizations. Think of airports, railways, and telecom companies. Even the radiation monitoring system at the Chernobyl Nuclear Power Plant went offline. Because the attack seemed to be aimed at paralyzing the Ukrainian state rather than for monetary motives, Russia is the main suspect. Although Ukrainian authorities and the CIA spoke out, Russia denies any involvement.</p>\n<h2 id=\"present-day\" style=\"position:relative;\"><a href=\"#present-day\" aria-label=\"present day permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Present day</h2>\n<p>Scary stuff, right? Should you still be worried about EternalBlue in 2020? Well, the exploit indeed lives up to its name. According to Trend Micro, in 2019, two years after WannaCry broke loose, 73,763 detections were made of specific malware samples known to use EternalBlue. Luckily, Microsoft's MS17-010 patch has reached most home users. But organizations are notoriously slow with updating their hardware. Therefore, EternalBlue is still a famous attack today.</p>\n<p>But what can you do, you might ask? If we can take one thing from all of this, we should stop using SMB over the internet. EternalBlue is undoubtedly not the last SMB related exploit. Blue's younger brother, SMBleed (CVE-2020-1206), is a new vulnerability and works very similar. It was only patched by Microsoft in June of this year.</p>\n<h3 id=\"used-sources\" style=\"position:relative;\"><a href=\"#used-sources\" aria-label=\"used sources permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Used Sources</h3>\n<p>https<span></span>://arstechnica.com/information-technology/2017/04/nsa-leaking-shadow-brokers-just-dumped-its-most-damaging-release-yet/</p>\n<p>https<span></span>://research.checkpoint.com/2017/eternalblue-everything-know/</p>\n<p>https<span></span>://docs.microsoft.com/nl-nl/security-updates/securitybulletins/2010/ms10-017</p>\n<p>https<span></span>://www.independent.co.uk/news/uk/home-news/nissan-sunderland-cyber-attack-ransomware-nhs-malware-wannacry-car-factory-a7733936.html</p>\n<p>https<span></span>://www.cbsnews.com/news/hospitals-across-britain-hit-by-ransomware-cyberattack/</p>\n<p>https<span></span>://www.bbc.com/news/world-europe-39907965</p>\n<p>https<span></span>://www.bbc.com/news/technology-40706093</p>\n<p>https<span></span>://www.nytimes.com/2017/06/28/world/europe/ukraine-ransomware-cyberbomb-accountants-russia.html</p>\n<p>https<span></span>://www.independent.co.uk/news/world/europe/chernobyl-ukraine-petya-cyber-attack-hack-nuclear-power-plant-danger-latest-a7810941.html</p>\n<p>https<span></span>://www.securityweek.com/smbleed-vulnerability-impacts-windows-smb-protocol</p>\n<p>https<span></span>://www.trendmicro.com/vinfo/us/security/news/vulnerabilities-and-exploits/putting-the-eternal-in-eternalblue-mapping-the-use-of-the-infamous-exploit</p>\n<p>https<span></span>://www.darkreading.com/vulnerabilities---threats/eternalblue-longevity-underscores-patching-problem/d/d-id/1337233</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"October 27, 2020","updated_date":null,"description":"It's been more than three years since EternalBlue; let's do a recap.","title":"EternalBlue: A retrospective on one of the biggest Windows exploits ever","tags":["Cyber Security","Exploits","Virus"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/579582de5b60f995b00553dd02616f3c/ee604/etbluecover.png","srcSet":"/static/579582de5b60f995b00553dd02616f3c/69585/etbluecover.png 200w,\n/static/579582de5b60f995b00553dd02616f3c/497c6/etbluecover.png 400w,\n/static/579582de5b60f995b00553dd02616f3c/ee604/etbluecover.png 800w,\n/static/579582de5b60f995b00553dd02616f3c/f3583/etbluecover.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anonymous","github":null,"avatar":null}}}},{"node":{"excerpt":"A blog lets a person express his/her thoughts, and everyone craves to have his/her blog. Creating a blog is quite simple as of today. Open…","fields":{"slug":"/engineering/setup-blog-in-minutes-with-jekyll/"},"html":"<p>A blog lets a person express his/her thoughts, and everyone craves to have his/her blog. Creating a blog is quite simple as of today. Open-source software such as <a href=\"https://wordpress.com/\">wordpress</a>, <a href=\"https://jekyllrb.com/\">jekyll</a>, <a href=\"https://gohugo.io/\">hugo</a> can help you create &#x26; set up your blog. In this post, we will see about Jekyll and how to host it in Github for free.</p>\n<h2 id=\"create-a-brand-new-jekyll-blog\" style=\"position:relative;\"><a href=\"#create-a-brand-new-jekyll-blog\" aria-label=\"create a brand new jekyll blog permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Create a brand new Jekyll blog</h2>\n<p>Install Jekyll using the instructions provided <a href=\"https://jekyllrb.com/docs/installation/\">here</a>. You mainly need <code>ruby</code>, <code>ruby gems</code>, <code>gcc</code>, <code>make</code> as pre-requisite. Run the below commands to get a new blog up and running.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"sh\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">gem install jekyll bundler</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">jekyll new my-new-blog</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">cd</span><span class=\"mtk1\"> my-new-blog</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">bundle </span><span class=\"mtk11\">exec</span><span class=\"mtk1\"> jekyll serve</span></span></code></pre>\n<p>That's it. You can navigate to <code>http://localhost:8080</code> and see your blog up and running like this</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 64.61538461538461%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAABb0lEQVQ4y6WT/U7CMBTF+xxEFDYG0UTwBfCl4R8CiWPsRYyZMAkI7INtXXfsrRspGKLgkl+a3pt77ml7x7q9Jzx2e7DaHTSaJkzTQKdzD7NlKQyjhbuGAcO0VN4wW2hSzHiAZbVRv22gVrtBvX6Hfv8ZzHGmmNo2XNfFZDLBcDjAcDDAaDRSsdnMgeM4cp0dVmLquBiPx7BlrW2/lNhg0L48z8E5x38+lmUZCBLzP5aY+0tkXCBJOarcOaj5aYyREFEIgc8ghbfaw99kWIdcxar8X2GiLBKiQByF2O4CxGkOqVbGxUWwqqgSLYpC21/psEJPXOrsyOGxSOnwCnfKob6hV0qTBGmaHBoUv9zl2Uehu9tstnh98zBfLOVIyJmUDda7BDwXqlEURYowDNUax/GPZkw/7l6+7jbOsZPQLHKeyVEiwQLr1Qqe947FYgHf9xUkfOqS6darIxJCfO9pfGgeyU0QBPI6Uug/g15LfAH2m784aYqNCwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"A new jekyll blog\"\n        title=\"A new jekyll blog\"\n        src=\"/static/d9fd5e7837bbbb432745462f8c5b8f4a/e5715/new-blog.png\"\n        srcset=\"/static/d9fd5e7837bbbb432745462f8c5b8f4a/a6d36/new-blog.png 650w,\n/static/d9fd5e7837bbbb432745462f8c5b8f4a/e5715/new-blog.png 768w,\n/static/d9fd5e7837bbbb432745462f8c5b8f4a/c68a4/new-blog.png 2402w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h2 id=\"customizing-the-blog\" style=\"position:relative;\"><a href=\"#customizing-the-blog\" aria-label=\"customizing the blog permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Customizing the blog</h2>\n<p>As you see, the blog is a bare minimum, and the default values mentioned in the config file (<code>_config.yml</code>) are used. You can use the <code>_config.yml</code> file to add new plugins, provide metadata about the blog, add your social media profiles, modify themes, etc. </p>\n<h3 id=\"plugins\" style=\"position:relative;\"><a href=\"#plugins\" aria-label=\"plugins permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Plugins</h3>\n<p>Some well-known plugins, to name a few are,</p>\n<ul>\n<li><a href=\"https://github.com/jekyll/jekyll-sitemap\">jekyll-sitemap</a> - Plugin that generates sitemap for the blog</li>\n<li><a href=\"https://github.com/jekyll/jekyll-admin\">jekyll-admin</a> - Plugin that provides an admin console to write the post</li>\n<li><a href=\"https://github.com/jekyll/jekyll-seo-tag\">jekyll-seo-tag</a> - Plugin that adds metadata tags for search engines and social networks to better index and displays your site's content.</li>\n</ul>\n<p>You can know about other useful plugins <a href=\"https://planetjekyll.github.io/plugins/top\">here</a>.</p>\n<h3 id=\"themes\" style=\"position:relative;\"><a href=\"#themes\" aria-label=\"themes permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Themes</h3>\n<p><a href=\"https://github.com/jekyll/minima\">Minima</a> is the default theme for Jekyll. There are many <a href=\"https://jekyll-themes.com/free/\">other</a> themes that you can use too. It is possible to <a href=\"https://github.com/jekyll/minima#customizing-templates\">customize</a> the minima theme by adding your CSS and Html. Adding support for <a href=\"https://github.com/jekyll/minima#enabling-comments-via-disqus\">comments</a> using Disqus is in-built. Also, there is a provision to enable <a href=\"https://github.com/jekyll/minima#enabling-google-analytics\">Google Analytics</a>.</p>\n<h3 id=\"liquid-templating\" style=\"position:relative;\"><a href=\"#liquid-templating\" aria-label=\"liquid templating permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Liquid templating</h3>\n<p>It need not be that all the contents in the blog have to be static. You can add dynamic content using <a href=\"https://shopify.github.io/liquid/\">Liquid</a> templating. Jekyll provides tag and filter options on <a href=\"https://jekyllrb.com/docs/liquid/\">top of liquid</a>.</p>\n<h3 id=\"using-the-custom-domain-name-for-the-blog\" style=\"position:relative;\"><a href=\"#using-the-custom-domain-name-for-the-blog\" aria-label=\"using the custom domain name for the blog permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Using the custom domain name for the blog</h3>\n<p>You can specify your custom domain by adding a file <code>CNAME</code> in the git repo, as mentioned <a href=\"https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/about-custom-domains-and-github-pages\">here</a>.</p>\n<h2 id=\"hosting--deploying-the-blog-with-github-pages\" style=\"position:relative;\"><a href=\"#hosting--deploying-the-blog-with-github-pages\" aria-label=\"hosting  deploying the blog with github pages permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Hosting &#x26; deploying the blog with Github pages</h2>\n<p>Using your GitHub account, create a new repository. Push the contents of the jekyll blog created above to the new repository. Go to the github project settings page, generally available in the url\n<code>https://github.com/&#x3C;github-id>/my-new-blog/settings</code>.\nIn the settings page, under the <code>Github pages</code> section, specify the branch to use for the github source. This can be the <code>main</code> branch or some other branch in the repository.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 36.30769230769231%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAA6klEQVQoz5WR227DIBBE+f8/bFI1L6laBzs294uBKYttmahSpSKNvAvyMHtgnHPc75/4uN0ghAStUkoV9nrrz/2y7/X9KSZdwqQzZqGxLAukUpukhKiiWmndLjvOhBDQda9a/jbUxmLgI7wPcM7BVrlOpp4bY5oBfa3deus8bMhYU3kxZiEEDA8OPk41ocCjmn99Dy3JOD2b0WGi9WlorIf2GTHtOHYkbF1XPOel/RxjbAlpxDWlVh/8/lo9Y0a3vl2uuFzfWzJKpBpD1RgSL0pODKmedQRx7x+nN2Yp5zreBt3UcV5f8//6AVFaIeigKTERAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enable github page for the repo\"\n        title=\"Enable github page for the repo\"\n        src=\"/static/d1f07a436958688349a8293412ee0b7c/e5715/enable-github-pages.png\"\n        srcset=\"/static/d1f07a436958688349a8293412ee0b7c/a6d36/enable-github-pages.png 650w,\n/static/d1f07a436958688349a8293412ee0b7c/e5715/enable-github-pages.png 768w,\n/static/d1f07a436958688349a8293412ee0b7c/cc6fe/enable-github-pages.png 1860w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>As soon as the github page is enabled on a branch, github automatically creates actions to build the jeyll blog on a new commit to the branch.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 29.53846153846154%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAABDElEQVQY03WRzUrDQBSF86ruBO3ad9GFihZEVHDhM4iiiOBONzbNn0k7k0Qy/3O8k7SxFL3wce7MwOHcOxHgIFoG3dXYLu8MyrJCVS38V1mCMe7Dtfcr+n6s/hBNpgkOLmNMzmfYPUuwN02xT+wcJ7h/b9G1HIslx5IxXzcNrLUwxvQa+HUfTKObZ4671wa3LzWunljPNXHxyPCRfaPIUh/PE59lOfKi0J+zuIvjuUizXOR5IbQ2HaU2Y0JKjTD2oFt4i6ZtQzLHOYdS+oEeDp1zp5TuJCh5HBFvK0MXCWXwH0qTSumFkL4TAoSRUkkyVcSm2vXaI20s/iKYhR1RijXe2qHf2FsPMP4OfgDvGci+DTPnPgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Github pages build action\"\n        title=\"Github pages build action\"\n        src=\"/static/85d3aeb0bed3b348eac372f0b940baa4/e5715/github-pages-action.png\"\n        srcset=\"/static/85d3aeb0bed3b348eac372f0b940baa4/a6d36/github-pages-action.png 650w,\n/static/85d3aeb0bed3b348eac372f0b940baa4/e5715/github-pages-action.png 768w,\n/static/85d3aeb0bed3b348eac372f0b940baa4/cc6fe/github-pages-action.png 1860w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h2 id=\"advantages-of-using-jekyll--github-pages\" style=\"position:relative;\"><a href=\"#advantages-of-using-jekyll--github-pages\" aria-label=\"advantages of using jekyll  github pages permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Advantages of using Jekyll &#x26; Github pages</h2>\n<ul>\n<li>Open-source</li>\n<li>Free hosting by Github, though there is some restriction as mentioned <a href=\"https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/about-github-pages#usage-limits\">here</a>. But the restriction would be more than enough for personal websites and for getting started with a blog</li>\n<li>You don't need to be a HTML or CSS expert to get started. The blog posts are written in markdown. One can even use an online markdown editor such as <a href=\"http://dillinger.io/\">Dillinger</a>.</li>\n<li>It is faster as there is no database and the content is mostly static</li>\n<li>You can use your domain name or use the free github.io subdomain</li>\n<li>Free SSL support</li>\n<li>Version control for your blog, out of the box since the blog is on Github. Easy collaboration(new blog posts or site changes) using github pull requests.</li>\n<li>You can use Github actions and even update your site content dynamically. The Jekyll blog need not be dynamic after all. For example, you can run a python script in a github action as a cron and update the pages in your blog daily/hourly</li>\n<li>Plugin ecosystem is awesome. You can add <a href=\"https://jekyllrb.com/docs/plugins/\">plugins</a>, or you can even write your plugins and get additional functionalities to your blog.</li>\n</ul>\n<h2 id=\"when-not-to-use-jekyll\" style=\"position:relative;\"><a href=\"#when-not-to-use-jekyll\" aria-label=\"when not to use jekyll permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>When not to use Jekyll</h2>\n<ul>\n<li>If you are not familiar with git or a person who is not a developer, setting up and customizing jekyll may be a bit tough for you. You can look at WordPress or blogger, where all the things are getting done using UI. </li>\n<li>You don't know much about blogging, and looking for a ready-made solution, jekyll may not be the right fit. </li>\n</ul>\n<p>Let's get started with blogging using Jekyll &#x26; Github pages. Happy blogging!!</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n</style>","frontmatter":{"date":"October 26, 2020","updated_date":null,"description":"Getting started with Jekyll & Github pages","title":"Setup a blog in minutes with Jekyll & Github","tags":["jekyll","blogging","blog","github-pages"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/9fbd82ab49f5445a4a179ab4b9c886ee/ee604/jekyll-github-pages.png","srcSet":"/static/9fbd82ab49f5445a4a179ab4b9c886ee/69585/jekyll-github-pages.png 200w,\n/static/9fbd82ab49f5445a4a179ab4b9c886ee/497c6/jekyll-github-pages.png 400w,\n/static/9fbd82ab49f5445a4a179ab4b9c886ee/ee604/jekyll-github-pages.png 800w,\n/static/9fbd82ab49f5445a4a179ab4b9c886ee/db955/jekyll-github-pages.png 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Malathi T","github":"malathit","avatar":null}}}},{"node":{"excerpt":"Kubernetes is a standard container orchestration open-source platform, that is, for managing applications constructed from several, often…","fields":{"slug":"/engineering/understanding-kubernetes/"},"html":"<p>Kubernetes is a standard container orchestration open-source platform, that is, for managing applications constructed from several, often self-contained runtimes called containers.</p>\n<p>Since the Docker containerization project launched in 2013, <a href=\"/container-security-scanning/\">containers have become increasingly</a> common, but massive distributed containerized apps can become increasingly difficult to coordinate.</p>\n<p>Kubernetes became a central part of the container revolution by making containerized systems significantly more straightforward to handle at scale.</p>\n<p>This blog targets the way modern applications are deployed and consumed. It <a href=\"https://en.wikipedia.org/wiki/Kubernetes\">introduces the</a> importance of Kubernetes, a container Orchestration tool on a basic level, and how it is making Developers more convenient.</p>\n<h3 id=\"what-is-kubernetes\" style=\"position:relative;\"><a href=\"#what-is-kubernetes\" aria-label=\"what is kubernetes permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Kubernetes</h3>\n<p>Kubernetes (also known as k8s) is a container orchestration tool widely used to deploy and update the application without any downtime. It enables auto-scaling of resources in case of an increase/decrease in requests to the server.\nAlso, it provides intelligent management, allocation of resources, and services, which saves a lot of money for us.</p>\n<h3 id=\"benefits-of-kubernetes\" style=\"position:relative;\"><a href=\"#benefits-of-kubernetes\" aria-label=\"benefits of kubernetes permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Benefits of Kubernetes</h3>\n<p>By using Kubernetes, developers can build cloud-native applications with Kubernetes as a runtime framework. Patterns are the tools a developer of Kubernetes requires to construct applications and services based on containers.</p>\n<p><strong>Here are a few benefits of Kubernetes:</strong></p>\n<ul>\n<li>Optimize the resources required to run your enterprise applications, make better use of hardware.</li>\n<li>Monitor and automate deployments and updates of applications.</li>\n<li>Run Stateful Applications, mount, and add room.</li>\n<li>Manage services declaratively, ensuring that the applications deployed always run the way you expected them to run.</li>\n<li>Health-check your apps with auto-placement, auto restart, auto replication, and autoscaling, and self-heal them.</li>\n</ul>\n<h3 id=\"kubernetes-vs-docker\" style=\"position:relative;\"><a href=\"#kubernetes-vs-docker\" aria-label=\"kubernetes vs docker permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Kubernetes vs. Docker</h3>\n<p>Often mistaken as a choice between one or the other, Kubernetes and <a href=\"/production-grade-development-using-docker-compose/\">Docker for running containerized applications</a> are different but complementary technologies.</p>\n<p><a href=\"https://docs.docker.com/get-started/overview/\">Docker</a> lets you put everything you need into a box that can be stored and opened when and where it is required to run your application. It would help if you had a way to handle them once you start boxing up your applications, and that's what Kubernetes does.</p>\n<ol>\n<li>With or without the Docker, Kubernetes can be used.</li>\n<li>The distinction between Docker and Kubernetes refers to the role each plays in your applications' containerization and execution.</li>\n<li>Docker is an open industry standard to package and distribute container applications.</li>\n<li>To deploy, manage, and scale containerized software, Kubernetes uses Docker.</li>\n</ol>\n<h3 id=\"why-do-you-need-kubernetes\" style=\"position:relative;\"><a href=\"#why-do-you-need-kubernetes\" aria-label=\"why do you need kubernetes permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why do you need Kubernetes?</h3>\n<p>Kubernetes will assist you in deploying and managing containerized, legacy, and cloud-native applications, as well as microservice, refactors.</p>\n<p>To meet evolving business demands, the development team needs to build new products and services rapidly. The cloud-native architecture starts with container microservices, allowing faster development and making it easier to transform and optimize existing software.</p>\n<ul>\n<li>With the rise in the number of internet users, it is expected that applications should not have any downtime for maintenance and updates.</li>\n<li>Each organization wants its deployments to scale according to users' needs, i.e., if more user's requests are coming, then more CPU and Memory should be automatically allocated to the deployment; otherwise, the server will crash.</li>\n<li>Furthermore, no one wants to pay more for CPU and Memory on cloud services if there are no such requirements every time. So there should be some intelligent system that effectively allocates and manages the CPU and Memory utilization as per need.</li>\n</ul>\n<p>That is where Kubernetes comes into the picture. It handles all the above requirements effectively and reduces a lot of burden from the developer's shoulders.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 640px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB+ElEQVQoz1WRy4vUQBDG8xd63oN6kQURPHmUBQ+KiIIKevGkAyqCu4K6IIx4UPcwKLiHOJmkk5lMXpuZZJJM59HvbjsRZrX4URRf1Ud3Vxsi9GW4ZIHfAIf5dgtsslzIaKl14jkIzHRXRYGKNeFffYehlBJSIYaFEnbKWiKoIExIoRTyPQFmaVEGZ2m0WumMKVP/hCGFRC0EQXPj2WbvTnr1cTaZNi2sGBco8FvXLqKwrWuCcdc0gv1vpoxz2hyMqv1Hq7ff6tuvir276+22ZjWUSjVxzMfH7cKL0vQsSYIgCMPQH6IsS0MIlm3gpfvr52P4w0affrYXbq1+z2uJa8U4rcraMvG2IpTiISilCKGu63RhcC66Fh6Miov30tEYXn+6vvIwS9cV7xpFSD+YRLip0eDUHkLI+bX7hXFSQHLzRX35QXHtSWVHRGEoMBGctxCyyfduWyVpmmVZHMdJkkipH6ST7M3lZjMHNphZAPie67qOBaut1nESda5ddR2sqgZCvbB+Z5wrIVTvH04+Nc037z+8Pnr35eTk4/jzy8OjX6apdRQFFFgFwkmWx3mebIoozxGjugWzKFtODf2Tcg6U7/YsBnxPeo7WiT3FlindmfKcHQJYynPz06/B5Lg3c8di9pQ553BgaV0MWdd6YMegz6QLlOf9AQERUnCYmUKiAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Kubernetes Features\"\n        title=\"Kubernetes Features\"\n        src=\"/static/5b524143ddc48218845df011bad4e871/6af66/image2.png\"\n        srcset=\"/static/5b524143ddc48218845df011bad4e871/6af66/image2.png 640w\"\n        sizes=\"(max-width: 640px) 100vw, 640px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3 id=\"technical-aspect\" style=\"position:relative;\"><a href=\"#technical-aspect\" aria-label=\"technical aspect permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Technical Aspect</h3>\n<p>Kubernetes was designed as a highly available cluster of computers connected to work as a single unit. This abstraction level allows us to deploy the application without thinking much about the machines on which the application would run. <em>Kubernetes' role is to automate the distribution of application containers on computer clusters efficiently.</em>  </p>\n<p>A typical computer cluster in Kubernetes consists of:</p>\n<ul>\n<li><strong>Node</strong>: Where we run our applications</li>\n<li><strong>Master</strong>: Used to coordinate the cluster.</li>\n</ul>\n<blockquote>\n<p>The Master is responsible for managing the cluster. The master nodes will coordinate all the activities in your cluster, such as scheduling applications, maintaining their desired state, scaling applications, and rolling new updates. Whereas a Node is a VM or a physical computer that is used as a worker machine in a Kubernetes cluster to  actually, run the application </p>\n</blockquote>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 638px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.26959247648903%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAXKNRNiQ+W//xAAcEAABAwUAAAAAAAAAAAAAAAAAAQMUAhESM0P/2gAIAQEAAQUCjpelrJIx0a1n/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEREv/aAAgBAwEBPwGKwyj/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIDEhP/2gAIAQIBAT8BeStGzpR//8QAHBAAAQMFAAAAAAAAAAAAAAAAAAEQERIycYKh/9oACAEBAAY/AoqUmS7guDZv/8QAGxAAAgEFAAAAAAAAAAAAAAAAABFRARAhMbH/2gAIAQEAAT8hXAQIaMGhQ5zTZ//aAAwDAQACAAMAAAAQl8//xAAYEQACAwAAAAAAAAAAAAAAAAAAARFRYf/aAAgBAwEBPxBOWFmB/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIWH/2gAIAQIBAT8QRp1Q6H//xAAdEAEBAAEEAwAAAAAAAAAAAAABEQAQITFhcaHw/9oACAEBAAE/EFV0A2Y299YEmfnubIXsThnIIMb259XRp//Z'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Kubernetes Architecture\"\n        title=\"Kubernetes Architecture\"\n        src=\"/static/1ced09985df47556a5a0c0c0c0fee5ca/8608d/image4.jpg\"\n        srcset=\"/static/1ced09985df47556a5a0c0c0c0fee5ca/8608d/image4.jpg 638w\"\n        sizes=\"(max-width: 638px) 100vw, 638px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><em>A master node contains processes that continuously watch the deployment for any CPU or Memory requirement and smartly allocated it in the form of new pods to auto-scale the application, which handles the vast amount of requests coming to the server.</em></p>\n<p>Most of the current cloud services like Amazon Web Service(AWS), Microsoft Azure, and Google Cloud come with automatic support for Kubernetes to provide ease in deploying and maintaining application containers.</p>\n<p>A Kubernetes cluster can be deployed on either virtual or physical machines. A software named Minikube can be installed on your local machine that creates a VM on your local machine and deploys a simple cluster containing only one node.\nMinikube provides a CLI through which we can execute commands &#x26; simulate a small-scale Kubernetes cluster.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 709px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 112.3076923076923%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAABcSAAAXEgFnn9JSAAAEC0lEQVQ4y3WUS2skVRiG8wP8I7oTdCWCO10JLvUniEtBGFy6ElcKCrqaWSguMgOjYwYGZILJDJMr6XTS3ZXurr5Wd/Wtqrvul1OPX1WlTUKPBw516pz3vOe7vd9WlmXkY5KE9GKPQewXsy9rQ0VMyRiTYKKKtZGGxdkal9+x07jgyLm21DXhC3/G82DGi2DBfjDnZWyzM2pz//AftrUzfqsc8OB4n2fTXnGWY3LsrtypBHbBoW4THsrhq9DiOFpyFNqcJg7PzR7b50fstGs81io8ujhh3x5zEq8KTI7N71TD5Y2Fa5fNOKAduvQTl971HKiAibireRF9FReuD1TuZnmeY/M7VhrdEK4X67ES6z2nnI48HHgZg2GGtcgI3HLPl6/rlHM91hz/WegGGX6sGC1SFk6K68t/mGGvMkYGWHNYLBVxInuuYiX7k3GG5yn8KNtMyqEe8d3vOvd+aPBg16Q3S1mKNQ9rBl/v7fPN4SE7l2WsLvox3+43+OLJET8ed2gMkk3Cs2HAx587vPV+wJffO5h+hLeAn4Yt3qw95h3tL7Z1U1IJ7UnEe7s1trZP+OTgiuH0NYSnA59Pv/J4+6OIez87jN0IR9z8xdB5t/WUD/RnQjgpCJvjkA9farzxZ4XPTlr0zWQzy5VeyE7V4eErl781h8EswV5m7A2XPOqP+cMw2WtLNgReH0Y86Vr8ejXnad+iNYo3Cb08m0aG3hM1SLCTpNyfipftK+jrMJ+VGfUFa/Sh2wJjAFHI3bLJnx1PYSQepSqjIyBb4h+T0vQCfKm/XF4dP5QdqQRf0XXTYq3L1/TT24QZK/Hk7Nzgsj6k1oTLWouaZnNpLeW/QVWCeT4bcdHS0EKfSnfIud6l4sRUrpqcSzhW6XUd5oSxhKCpezSaLnJGS1/R7oTojkttNmYcSTMIVlSFtBsG1GdLGlObrh9TNee0LIeSr4hhuUjE6lRmIiemnTH3pLgj6TCBYilFb4WKmYCcRDpPEstMxGFFLroU7rq8TswqTJjJq0v5WkHKXBRhiRIsiZO1UtiOkr0U28sfEawXi0rU66U3mSuOuiGNecKpqMYNSuB5O6YuhVuV0mgMyvKYCvZEMNoi4UgPJQfZXQsj0WLNiOlK8GujDi3RXNeU7MlFbeGjzQY0FwbaNBSyjJYUsu4suJCi7zg2V0ZKpq5jWDQGqavaOKZpjThsVOm4Ns1RQkeA7ZUnFte5HOm07FBKSnE1iWnbJgf1HLugbiQkcbZOSmlub5xSm0rfi1Iqg5CldJP81Uo3kmwmNJcxl73SZWOqqIr8BoKtGmL1Qm0qJc/wSDqMIZKbWuqmP0p8cvEb0xQ/KLFKjs15iZ2syYrkstlgbzfM/9svBL2BLWn/BQ9neiw2u5MnAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Kubernetes Deployment\"\n        title=\"Kubernetes Deployment\"\n        src=\"/static/c12f6f6850b1659611a58f57b01f6691/4d08a/image1.png\"\n        srcset=\"/static/c12f6f6850b1659611a58f57b01f6691/a6d36/image1.png 650w,\n/static/c12f6f6850b1659611a58f57b01f6691/4d08a/image1.png 709w\"\n        sizes=\"(max-width: 709px) 100vw, 709px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h4 id=\"some-of-the-basic-kubernetes-cli-commands-are\" style=\"position:relative;\"><a href=\"#some-of-the-basic-kubernetes-cli-commands-are\" aria-label=\"some of the basic kubernetes cli commands are permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Some of the basic Kubernetes CLI commands are:</h4>\n<ul>\n<li><strong>kubectl get nodes</strong> - It gets the total number of working nodes available in the k8s cluster.</li>\n<li><strong>kubectl get pods</strong> - It returns the total number of Running pods present in the cluster.</li>\n<li><strong>kubectl create deployment {DEPLOYMENT<em>NAME} --image={IMAGE</em>NAME}</strong>  - It creates a new deployment on given cluster. We need to specify a deployment name to the deployment and the image from which the deployment should be made.</li>\n<li><strong>kubectl logs {POD_NAME}</strong> - It prints the logs for a particular pod specified using pod name. Logs are handy for debugging the application.</li>\n<li><strong>kubectl cluster-info</strong> - It fetches all the metadata related to the cluster. </li>\n<li><strong>kubectl delete pod {POD_NAME}</strong> - It deletes the deployed pods specified using the pod name.</li>\n</ul>\n<h3 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h3>\n<p>There are many benefits of learning Kubernetes as it releases a lot of deployment stress from the developer's shoulders. It helps in auto-scaling, intelligent utilization of available resources, and enables low downtime for maintenance. </p>\n<p>Without k8s, a lot of human effort and money is gone into these things, but with the help of k8s, everything can be automated.</p>\n<p>Since K8s is a vast technology, it is impossible to wrap all things in just one blog. To simplify things, I will be publishing more blogs soon related to <strong>k8s Deployments, ReplicaSets, Services, Ingress Controller, Master and Worker Processes, Kubectl</strong>, etc. Stay connected and keep learning.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"October 26, 2020","updated_date":null,"description":"Learn about the Kubernetes. A container Orchestration tool on a basic level, and how it is making the job of Developers simpler.","title":"What is Kubernetes? - A Basic Guide","tags":["Kubernetes","Deployment","Distributed Systems"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c0eaad61b9cb15dfe35f7a6d2d0f665a/ee604/image3.png","srcSet":"/static/c0eaad61b9cb15dfe35f7a6d2d0f665a/69585/image3.png 200w,\n/static/c0eaad61b9cb15dfe35f7a6d2d0f665a/497c6/image3.png 400w,\n/static/c0eaad61b9cb15dfe35f7a6d2d0f665a/ee604/image3.png 800w,\n/static/c0eaad61b9cb15dfe35f7a6d2d0f665a/f3583/image3.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Prabhat Kumar","github":"prabhatkgupta","avatar":null}}}},{"node":{"excerpt":"Robotic process automation(RPA) process to get the repetitive tasks done through bots and reduce manual efforts. In definitive words, we can…","fields":{"slug":"/engineering/importance-of-rpa/"},"html":"<h4 id=\"robotic-process-automationrpa-process-to-get-the-repetitive-tasks-done-through-bots-and-reduce-manual-efforts\" style=\"position:relative;\"><a href=\"#robotic-process-automationrpa-process-to-get-the-repetitive-tasks-done-through-bots-and-reduce-manual-efforts\" aria-label=\"robotic process automationrpa process to get the repetitive tasks done through bots and reduce manual efforts permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Robotic process automation(RPA) process to get the repetitive tasks done through bots and reduce manual efforts.</h4>\n<p>In definitive words, we can say ** \"Impersonating human activities in a sequential fashion to achieve a designated result without any manual intervention is known as Robotic Process Automation.\"**</p>\n<h2 id=\"why-is-rpa-becoming-an-essential-part-of-every-business\" style=\"position:relative;\"><a href=\"#why-is-rpa-becoming-an-essential-part-of-every-business\" aria-label=\"why is rpa becoming an essential part of every business permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why is RPA becoming an essential part of every business?</h2>\n<p>There are many benefits of robotic process automation, depending on the industries. I have listed a few common benefits across all the business domains and industries. </p>\n<h3 id=\"a-desideratum\" style=\"position:relative;\"><a href=\"#a-desideratum\" aria-label=\"a desideratum permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Desideratum</h3>\n<p>Any business's success depends on how deep they understand the customers, or rather, I should say <strong>targeted customers</strong>. And this is one of the fundamental challenges for companies.</p>\n<p>Intelligent automation through RPA can be implemented to understand user behavior, helping companies in decision making for their targeted customers and growth.</p>\n<h3 id=\"cost-effective\" style=\"position:relative;\"><a href=\"#cost-effective\" aria-label=\"cost effective permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Cost Effective</h3>\n<p>RPA is the most sought after solution in this technology-driven era to reduce the investment being done on manual tasks and get the best of the employees by allowing them to innovate rather than doing monotonous work. Multiple studies say that rolling out RPA, and thoughtful implementation can save approx 30-35% of companies' costs being spent on non-productive and repetitive tasks.</p>\n<h3 id=\"undefeatable-accuracy\" style=\"position:relative;\"><a href=\"#undefeatable-accuracy\" aria-label=\"undefeatable accuracy permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Undefeatable Accuracy</h3>\n<p>A report by ICO (Information Commissioner's office) says that 90% of a data breach between 2017 and 2018 happened due to human error. Human minds have certain limitations. We can't always be attentive 100%. And the moment we lose attention, we become vulnerable to make mistakes.\nBut Robots, once defined/built, can have unlimited attention and can work endlessly without any distractions. And that gives the ability to make no mistakes.</p>\n<h3 id=\"raising-the-bar-on-productivity\" style=\"position:relative;\"><a href=\"#raising-the-bar-on-productivity\" aria-label=\"raising the bar on productivity permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Raising the Bar On Productivity</h3>\n<p>Humans have their limitations, capacity to work. But robots, on the other hand, have no measure of capacity. If developed smartly, they can work for every millisecond. And this gives unlimited possibilities for any company to run their businesses without worrying about productivity.</p>\n<h2 id=\"use-cases-in-different-industriesdomains\" style=\"position:relative;\"><a href=\"#use-cases-in-different-industriesdomains\" aria-label=\"use cases in different industriesdomains permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Use cases in different industries/domains</h2>\n<h3 id=\"rpa-in-business-process-outsourcing\" style=\"position:relative;\"><a href=\"#rpa-in-business-process-outsourcing\" aria-label=\"rpa in business process outsourcing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>RPA in Business Process Outsourcing</h3>\n<p>Business process outsourcing(BPO) always strives for heftiness in productivity with minimal cost. With the efficient use of RPA, the BPO's can eventually reduce a lot of operating expenses and make more effective utilization of their workforce. As robots can work 24/7, productivity can be increased tremendously. Apart from repetitive work automation, the industry also has a lot of back-office work, which is purely rule-based, and the same can be achieved with better security and audits. Report generation, data analysis are the other tasks that can also be done through RPA. Some more examples can be </p>\n<ul>\n<li>Data entry and validation</li>\n<li>Data extraction</li>\n<li>Creating mass emails</li>\n<li>Updating CRMs</li>\n<li>Updating scorecards</li>\n<li>Automated exchange of information</li>\n</ul>\n<h3 id=\"rpa-in-banking\" style=\"position:relative;\"><a href=\"#rpa-in-banking\" aria-label=\"rpa in banking permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>RPA in Banking</h3>\n<p>Most innovations, along with technological advancement, have been seen in the banking sector. As per the reports, the BFSI domain holds the largest share in the year 2019 to apply RPA. </p>\n<p>RPA has a surfeit of applications in banking covering from customer service to compliance nearly everything. The following are a few examples. </p>\n<ul>\n<li>Customer Service</li>\n<li>KYC process</li>\n<li>Mortgage processing</li>\n<li>Reporting</li>\n<li>General ledger</li>\n<li>Fraud detection</li>\n<li>Compliances</li>\n</ul>\n<h3 id=\"rpa-in-medical-industry\" style=\"position:relative;\"><a href=\"#rpa-in-medical-industry\" aria-label=\"rpa in medical industry permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>RPA in Medical Industry</h3>\n<p>The medical industry across the globe has always been a sector that is continuously striving for improvement. Providing the best health care services for a broad range of population is a real challenge in both operational and organizational. There are numerous use-cases in the medical industry where patients and hospitals can leverage the benefits.\nSuch as :</p>\n<ul>\n<li>Scheduling the appointments</li>\n<li>Managing the supply process like claims and billing</li>\n<li>Regulatory compliances optimization</li>\n</ul>\n<h3 id=\"rpa-in-insurance\" style=\"position:relative;\"><a href=\"#rpa-in-insurance\" aria-label=\"rpa in insurance permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>RPA in Insurance</h3>\n<p>Insurance is an industry which deals with vast amounts of data and processes. With the help, RPA insurance providers are now capable of merging front-end and back-end operations resulting in reducing cost and manual intervention.\n<em>Leslie Willcocks</em> professor at LSE, said that * \"In an insurer we studied, there was a particular process where it used to take two days to handle 500 premium advice notes. It now takes 30 minutes\"*\nThis much processing was made by implementing RPA. Apart from the front-end or back-end automation, there can be many other use-cases, for example</p>\n<ul>\n<li>Valuation and structuring of claims</li>\n<li>Regulatory compliances</li>\n<li>Policy cancellation</li>\n<li>New policy issuance</li>\n</ul>\n<h3 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h3>\n<p>There are many more benefits of robotic process automation, depending on the industries.\nA survey by Deloitte says that RPA continues to meet and exceed expectations across multiple dimensions, including :\n92% on Improved Compliance\n90% Improved quality and accuracy\n86% improvement in productivity and\n59% cost reduction.</p>\n<p>They say that <strong><em>with the current pace, RPA will have achieved near-universal adoption within the next five years.</em></strong></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"October 23, 2020","updated_date":null,"description":"It's very important for every business to evolve with technologies, understand their customers needs and and market senitment to sustain and grow.This article will give you some insights that how RPA can help in that with different industries/domain.","title":"Why RPA is important for businesses","tags":["Engineering","RPA","Automation"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/f2993d36b93dfde7b755c69581762a74/14b42/RPA.jpg","srcSet":"/static/f2993d36b93dfde7b755c69581762a74/f836f/RPA.jpg 200w,\n/static/f2993d36b93dfde7b755c69581762a74/2244e/RPA.jpg 400w,\n/static/f2993d36b93dfde7b755c69581762a74/14b42/RPA.jpg 800w,\n/static/f2993d36b93dfde7b755c69581762a74/9a763/RPA.jpg 1050w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vikram Jain","github":null,"avatar":null}}}},{"node":{"excerpt":"Ever since you enter the sphere of ethical Hacking, you usually need to get your hand on most of the Hacking Tools. The more tools you…","fields":{"slug":"/engineering/best-hacking-tools/"},"html":"<p>Ever since you enter the sphere of ethical Hacking, you usually need to get your hand on most of the Hacking Tools. The more tools you recognize, the more your hacking career is getting ready to fly off. Therefore let's discuss some of the necessary hacking tools.\n</p>\n<h3 id=\"1-nmap\" style=\"position:relative;\"><a href=\"#1-nmap\" aria-label=\"1 nmap permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1.) Nmap</h3>\n<p>  <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 650px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 67.23076923076923%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAADBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAFZnBTp28v/xAAYEAEBAQEBAAAAAAAAAAAAAAACAwEAIf/aAAgBAQABBQKlUuNHjy+Z1o+RKowMGf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAAGAwEBAAAAAAAAAAAAAAABAhESIQMiMTJB/9oACAEBAAY/AkxVBKj6KzGezXYbJqohJCo/R6ImvgYh/8QAHRAAAgICAwEAAAAAAAAAAAAAAREAMSFBUXGBkf/aAAgBAQABPyHHNYFZIFmACrSTuMsyRFjyPJgDgmHK5Spv9noUk2TzP//aAAwDAQACAAMAAAAQhA//xAAVEQEBAAAAAAAAAAAAAAAAAAAQIf/aAAgBAwEBPxCn/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAQADAQEAAAAAAAAAAAAAAREhMUEAUf/aAAgBAQABPxA5IDe4wc1AlzWa8ZP6SQWGh2UxjvrcISqYEUGkTefX5s5vooYlFHj8ufGxQ4teHK1zZePoecqhVbT19//Z'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"nmap\"\n        title=\"nmap\"\n        src=\"/static/c794a9c06e422fdfb53122ac843317f3/6aca1/nmap.jpg\"\n        srcset=\"/static/c794a9c06e422fdfb53122ac843317f3/6aca1/nmap.jpg 650w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n</p>\n<p>It is a free and open-source tool that's used for network discovery and security auditing.\nNmap is a powerful tool because it is often used to scan vast networks having thousands of machines. It's a command-line tool. Nmap suite additionally includes a complicated GUI that's referred to as \"ZenMap\".\nIt supports a large variety of OS that is:</p>\n<ul>\n<li>Linux</li>\n<li>Microsoft Windows</li>\n<li>Mac OS X</li>\n<li>FreeBSD</li>\n<li>OpenBSD</li>\n<li>Solaris</li>\n<li>IRIX\n</li>\n</ul>\n<p>It uses raw IP packets to determine </p>\n<ul>\n<li>Hosts that are accessible on the specific networks. </li>\n<li>Services that are offered by hosts, i.e., Application name together with its versions.</li>\n<li>Operating system and its version running on the target system, type of firewall on the target system.</li>\n<li>Scans for the exploitation of the open port, both TCP and UDP protocols.\n</li>\n</ul>\n<p><a href=\"https://nmap.org/download.html\">Nmap download link</a>\n</p>\n<h3 id=\"2-metasploit\" style=\"position:relative;\"><a href=\"#2-metasploit\" aria-label=\"2 metasploit permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2.) Metasploit</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 100%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB80lEQVQ4y2P4TwFgwBT69+//77///vyDcv/8+/f7799//4jTTL7Nv/7+O/rgQ9ehh6nrr/stPO83bXvq4v1dO88dufv815+/ODX/BTssb/NNhqq9zKW7GHK3MxRtZ0iYzBDexZw0mSFtas7yQ2Bl/7BohoiFL7u06drrB++/6088yVC8gyFhkkP3ulefvs89fDVg6lZIiODUHLPyyvFHH4GMB+9/KHcdMmhZ8/LjVyB366UHITN2ENActfLK6Scf33///f33v/vvvj5+/+Xrz19ff/7eceVh0PTtBDSHL7988/XXJRdeRCy/AuR++fHLa9KWbZcfHLn9LGDaNsKar7/+uvbKK4acrReef1139jZDSMf+G08O3yJO87VXX9YANRduv/Ty2/pzdxiieoGaD9166g/RjCeqwhZf3HP77YbrrxkKtrcfeFC46jBDdO+hW8+Wn7wZMHkrzqj6A9Y94+STxDXXQM4u2cVUtpMxZSpD8qTtlx/6Td06/9h1uDIsKQwiXL79jnb/cebqvUyVuxjTp7NlTteqW1a14QTYw//wJU+IZMm22wzFu5grdjGnT2eI6y9dexwtqHBmDIivpp54wlK2gyFpSt+eCxDBf0TmKoj+tZdfrDhzFy2QiMqS8HD5h0MngfwMtPDv33+klSTEAwAV0C1nKenWHwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"metasploit logo\"\n        title=\"metasploit logo\"\n        src=\"/static/61c2e535ebe01c29bc20314368ea17f4/e5715/metasploit_logo.png\"\n        srcset=\"/static/61c2e535ebe01c29bc20314368ea17f4/a6d36/metasploit_logo.png 650w,\n/static/61c2e535ebe01c29bc20314368ea17f4/e5715/metasploit_logo.png 768w,\n/static/61c2e535ebe01c29bc20314368ea17f4/5a190/metasploit_logo.png 800w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n</p>\n<p>It is essentially a Security Assessment and Penetration Testing tool. Metasploit is often used to launch an attack on alternative systems with it.\nIt uses a vulnerable system on that security testing may be conducted to use the failings within the system.\n</p>\n<p>Metasploit may enforce as follows:</p>\n<ul>\n<li>Initially, protocol port scanning is complete to get data concerning the target system.</li>\n<li>Host lists and services running on them may be read and analyzed within the project view. </li>\n<li>Now, the vulnerability scan runs on the target system's information that enlists the failings inside the system.</li>\n<li>This data used for designing the attack on the target system.\n</li>\n</ul>\n<p><a href=\"https://github.com/rapid7/metasploit-framework/wiki/Nightly-Installers\">Metasploit download link</a>\n</p>\n<h3 id=\"3-wireshark\" style=\"position:relative;\"><a href=\"#3-wireshark\" aria-label=\"3 wireshark permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3.) Wireshark</h3>\n<p>  <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 27.692307692307693%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAw0lEQVQY043Ry6qBURjG8eW0y0QZG+z5HpBzaaeESCaInGUgg20XBgYOGXABMlE7F+Em3Jf/yqNM7Lz1a33fWut73rc+Y4xxPHGKfXaZewXQRUHv7hf3H/6tD6Thx5d5s8ISQQzfCCGJGnzwoKT9KIL6Jq41KAkbWEZWa1PqGCl8ijaKCk3hR2ELLHU+RM4G/qKPKsYKaGGAT6yxwh5/6OCihkccsMMVXqOJGsijh4y6bfQjtjirUQUnzBQ2F9t0Yie9AcxPHORxN7WsAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Wireshark Logo\"\n        title=\"Wireshark Logo\"\n        src=\"/static/8a6ee21104c4d5a8a5bd4c385cbf6bea/e5715/Wireshark_Logo.png\"\n        srcset=\"/static/8a6ee21104c4d5a8a5bd4c385cbf6bea/a6d36/Wireshark_Logo.png 650w,\n/static/8a6ee21104c4d5a8a5bd4c385cbf6bea/e5715/Wireshark_Logo.png 768w,\n/static/8a6ee21104c4d5a8a5bd4c385cbf6bea/21b4d/Wireshark_Logo.png 1280w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n</p>\n<p>It is an open-source tool that's used to capture traffic on the network. It's essentially a network protocol analyzer tool.\n</p>\n<p>Wireshark helps in:</p>\n<ul>\n<li>Sniffing for the passwords.</li>\n<li>Identifying the destination and source IP address of the traffic. </li>\n<li>Capturing all the packets over the network.</li>\n<li>Next, we tend to enter the valid John the Ripper command that is used to extract the password from the hash password given as an input.\n</li>\n</ul>\n<p>It additionally captures HTTP packet transmission over the network. Click on \"Follow protocol connection\" within the HTTP packet. Currently, you'll be able to see the username and passwords that are captures over the network.\n</p>\n<p><a href=\"https://www.wireshark.org/#download\">Wireshark download link</a>\n</p>\n<h3 id=\"4-john-the-ripper\" style=\"position:relative;\"><a href=\"#4-john-the-ripper\" aria-label=\"4 john the ripper permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4.) John the Ripper</h3>\n<p>  <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 672px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 106%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAA6cAAAOnAEHlFPdAAAEHklEQVQ4y42UbWhbVRjHz03aJLd5bd7aJG3aJjVvpaWlaT60E4y2hdoNPwyqLF1aZzGwsbUikgqyL2rLPkzcPhQmkwk6wQ/7sg22YZ1zQu3AV+Yc1LcRFGEqvkxl2nbxd643MR+seuG559xz7vN//s//ec4RYosnEo3IQZEvp9N5oKGh4bjb7d6x7e5tDoPBIBKJhGhvbxehUEj861Mul0UkEhF2u70KaLFYLsstRVHK9fX1Jfae6O3rNQ8MDPw/wObmZmlKPB7X1urq6kpyC/tVjnz/nkylgnK/paVF+U9AfhJNTU3S1La2tu2qql5n67YOWrZarYf0343y1d3dvTXg4OCg8Hq9hkAgINPJkO4vMPra5XK+APASKX/a2dkZ6ujokLIYK34zMzN/Taanp8TUVF4UCo+K3GROTO7Oif7+fmV0dFRMTExYAfuywgzwY7Be8Pl8O2o4aCmrqmVrliaTySDFJpVOKvqTDrgpRyp+EbsC2w/IJG2z2WQXaKBHjh75Z0D5E23hw0lW944OuC5HWud5GB6UcwJf0F0MxWJRGI11Qng8bsXpcgq/39/t8XiO8vPh1tbWMU1xo/EbHWyjwtBsNn/b1dX1AFJ8h60VCgXH+Pi4iEajCgGE8Pn9imwTQEL8/CQaHRgaGoruyu2SDXyzBnBd9iGFWKQTFBpd05bxbCWzeII2Gx4eqbYLgA8B/nBjY+Ozkh3jWk3KmgH40q1bP5tsVusJ+U3QzUAw0Etmwu1xG0Q8nhBjY/eLvr4+C5o96HA4DpF62W6zvx8Oh5cJsAqLEpKsAHZVT3uN/iwCtqH35eFqX8ZiMZHPT4n7hofNaDKdTCbzVO0zIl7E6QzH8HxHJPJOMBg8iRzLldNCP/4G4G19Xspms/ZMJkPeHJ97slkN3my2TMLuMVrmCi3xFaDvSa2Yfwjza0hwTZdgs0aGDakt1d+pnf9YPCZ6enrq6bkMDjsBfAVWiy6X6yqMjgF4WjoCuMrpuAT4FwD8UQuoN/3LGitZYUp+F+MKmj0F4ALfe2VqSHAjlUrlaIeb6PsJaV8myA00/EG/fdZJW0pwB8C39zyyx1Q9Pul02pPfnVcReBDAx3H6HC0/htE5Gv2UzW47xdpp5DiJrWCv0mpvQuAN7DmP1/MWhQsIoghEFbOzc0KW3uF03Esx5rDXAN5Pyu8S5DgMJeB1Lo0XkabEjXQO3V5n/3v2zzIuV48aPSdTN1ptVnns0qQ2z40ygfMsuu0j4EdougTQGfbOI80qwfcyn2NcYP1pMhmRhKoPH0aoS+B52C3BoMg8SWrPMJ7A6Uf0W2RvnkBF6TMyMiJYFzDltlE5xp6/L1uiKpi8XKfR5qDX592nqg0C517W98N0jvXmcFtY3pfajUTBJJACoEJR5HEUfwK8pQ4WOEbokQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"John The Ripper\"\n        title=\"John The Ripper\"\n        src=\"/static/3d6d2c1c0b76d4910b177be337c104f2/30d16/John-The-Ripper.png\"\n        srcset=\"/static/3d6d2c1c0b76d4910b177be337c104f2/a6d36/John-The-Ripper.png 650w,\n/static/3d6d2c1c0b76d4910b177be337c104f2/30d16/John-The-Ripper.png 672w\"\n        sizes=\"(max-width: 672px) 100vw, 672px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n</p>\n<p>JTR is free and open-source software that's wide employed by hackers for password cracking. It uses the varied cryptanalytics attacks like \"Dictionary Attack\" and \"Brute-Force Attack\".\nIt additionally comes with the business version moreover, i.e., \"John the Ripper Professional.\" It's a lot of accessible versions providing a lot of practicality in password cracking at the enterprise level.\n</p>\n<p>John the Ripper working:</p>\n<ul>\n<li>Initially get the hashed password that needs to be crack.</li>\n<li>We need to possess a wordlist of expected passwords in our system because it makes the password cracking job easier.</li>\n<li>Next, we tend to enter the valid John the ripper command that is used in extracting the password from the hash password given as an input.\n</li>\n</ul>\n<p>The rate at which the password is going to be cracked depends utterly on the password's strength and offered wordlist. It keeps attempting to break the password continuously till the termination command isn't given.\n</p>\n<p><a href=\"https://www.openwall.com/john/\">John the ripper download link</a>\n</p>\n<h3 id=\"5-burp-suite\" style=\"position:relative;\"><a href=\"#5-burp-suite\" aria-label=\"5 burp suite permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5.) Burp Suite</h3>\n<p>  <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.153846153846146%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAxklEQVQoz82RPQrCQBCFvaCVnZVtavES1h5ArG0CSiKSWETICiZiQhC18QQpgpvdnf1z1EZT2NjkFQPDzJv3wXTsH+q0wyw4M4JbpaySVmsDwkqQQgCAMYZzzhhTOP00a62xHovTcNAvJyNBfLZdwDmly6nar/PQO2R5miSu6wZBQCnFZbz1ZU6z3Ol1y7EDSViHc5FuqDfTBbldL76/iqIojgkhu6b5LexpVen6jqhPeGTGDWNASqRFcsxA8ib2L70S2veqB4pFQTSQFvxpAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"burpsuite\"\n        title=\"burpsuite\"\n        src=\"/static/dfe164b9c930fa6ef13c405b7e5d4e25/e5715/burpsuite.png\"\n        srcset=\"/static/dfe164b9c930fa6ef13c405b7e5d4e25/a6d36/burpsuite.png 650w,\n/static/dfe164b9c930fa6ef13c405b7e5d4e25/e5715/burpsuite.png 768w,\n/static/dfe164b9c930fa6ef13c405b7e5d4e25/690c6/burpsuite.png 1201w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n</p>\n<p>It is an integrated platform that's used for activity a check on net application security.\nIt provides a large variety of tools that are used from initial mapping to exploiting the applications' vulnerabilities. Once the issues are detected, hackers will use it to break into the security of the system.\n</p>\n<p>Burp Suite comes in 3 editions:</p>\n<ol>\n<li>Community Edition: It is available free of charge for downloading.</li>\n<li>Professional Edition: Penetration testers and bug bounty hunters utilize it.</li>\n<li>Enterprise Edition: An organization utilizes it.\n</li>\n</ol>\n<p>Burp Suite features:</p>\n<ul>\n<li>It may be used to launch attacks on internet Applications. It will check and detect Cross-site scripting (XSS) and SQL injection.</li>\n<li>It operates as an internet proxy server that helps permit interception, inspection, and modification of network traffic.\n</li>\n</ul>\n<p><a href=\"https://portswigger.net/burp\">Burp Suite download link</a>\n</p>\n<h3 id=\"6-angry-ip-scanner\" style=\"position:relative;\"><a href=\"#6-angry-ip-scanner\" aria-label=\"6 angry ip scanner permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>6.) Angry IP Scanner</h3>\n<p>  <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.30769230769231%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAED/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgED/9oADAMBAAIQAxAAAAHDKNRUUf/EABgQAAIDAAAAAAAAAAAAAAAAAAEREhMg/9oACAEBAAEFAoitZ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAAHAAAAAAAAAAAAAAAAAAABERIgITH/2gAIAQEABj8CctjSj//EABgQAQEAAwAAAAAAAAAAAAAAAAERECAh/9oACAEBAAE/IS1HqBgSaf/aAAwDAQACAAMAAAAQRO//xAAWEQEBAQAAAAAAAAAAAAAAAAABAEH/2gAIAQMBAT8QR2b/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxAGf//EABsQAAIDAAMAAAAAAAAAAAAAAAERABBBYYHB/9oACAEBAAE/ED11FnN7iP0hYmDyK2v/2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"angryipscanner\"\n        title=\"angryipscanner\"\n        src=\"/static/0d12a4c86f862f017339ca0daef70cb0/212bf/angryipscanner.jpg\"\n        srcset=\"/static/0d12a4c86f862f017339ca0daef70cb0/6aca1/angryipscanner.jpg 650w,\n/static/0d12a4c86f862f017339ca0daef70cb0/212bf/angryipscanner.jpg 768w,\n/static/0d12a4c86f862f017339ca0daef70cb0/72e01/angryipscanner.jpg 1024w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n</p>\n<p>It is one of the quickest IP addresses and port scanner. By exploitation, this hacker will gather data concerning open ports within the target system.\nIt pings every IP address within the target system to see whether it's active or not. Further, it resolves the hostnames and determines the MAC address.\n</p>\n<p>Features:</p>\n<ul>\n<li>It additionally extracts the NetBIOS data, which has services associated with the session layer within the OSI model that are workgroup names and current active users.</li>\n<li>Scanned results may be saved in CSV, TXT, XML, or IP-Port list files.</li>\n<li>It will gather any data concerning scanned IP's because it uses plugins.</li>\n<li>If anyone writes plugins, he will efficiently extend the practicality of Angry IP Scanner.\n</li>\n</ul>\n<p><a href=\"https://angryip.org/download/#windows\">Angry IP Scanner download link</a>\n</p>\n<h3 id=\"7-nikto\" style=\"position:relative;\"><a href=\"#7-nikto\" aria-label=\"7 nikto permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>7.) Nikto</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 743px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 54.15384615384615%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABz0lEQVQoz22STW8TMRCGx/bYa+8mu8l6uwlSoYK0DU3ERlVRKf2iFSICJNQWUo4c2h72QFWpfEggxJkDvwmJf8brpOECknc1sv28M/OOSURWulg1msLFZAwRCa0FM0lJShECpYSJsGRkwz7rgFgHivDprBX5gvHPvctzEkLgBiS0IcUhMBGxAUZSgdRZW7c8Z21SSQOkzr1Ks+pksle/R06BFVmQAeYAC+eghZgQWzerl3CgmmnkF6C6vH+4c1FDrhw+KPpr3Wrd+tL5Iim76GbakQEmjBFTCSJUZacykl//+Pnh1+87D7fGH7+Ojk9XD58tPdruDqvR0QTS/t6yzT2skXECCeQgeAAnOGkubmweXF4///K9XOkPxi+33l08vfq0X1/2dp9sn9W3NzbHn7+NTt6ibIa7zFHbU3AVPaJDIYveSnX0RhlT3h8gf2/34O7jvU5/MHzxCvHoeIIqMBEVN1xexAvlDJawFC111gY75zUC8BI+KVaYRdpCU6aVqzhBgnDTGN1MrS9u4GAs63Rx6Va1HiyVYjZnzJPTzLS9LTvgIff3KEzuBkZy1uGpoP75zrQiM5tKMAn2gplXGl7BPHN4TPN3I/+zhPh38w+ZYixwd1QeTQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"NIKTO Scanner\"\n        title=\"NIKTO Scanner\"\n        src=\"/static/0d5610b2a139d30704372fd637d96bea/f2793/NIKTO-Scanner.png\"\n        srcset=\"/static/0d5610b2a139d30704372fd637d96bea/a6d36/NIKTO-Scanner.png 650w,\n/static/0d5610b2a139d30704372fd637d96bea/f2793/NIKTO-Scanner.png 743w\"\n        sizes=\"(max-width: 743px) 100vw, 743px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n</p>\n<p>It is a web-server assessment tool. It is an open-source platform that performs tests against web servers to seek multiple vulnerable files, misconfigurations, out-of-date servers, and programs on its web server.\nIt depends on HTTP response to seeing whether or not a page or script exists on the target.\n</p>\n<p>Features:</p>\n<ul>\n<li>Provides HTTP proxy support.</li>\n<li>Checks for the out-of-date server parts.</li>\n<li>It will scan multiple ports on the server.</li>\n<li>Guesses credentials for authorization with attempting many alternative ID and password combos.</li>\n<li>Reports for the weird headers.\n</li>\n</ul>\n<p><a href=\"https://github.com/sullo/nikto\">Nikto download link</a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"October 22, 2020","updated_date":null,"description":"Learn about the basic hacking tools.","title":"Best Hacking Tools","tags":["Ethical Hacking","Security","Testing"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/a4a0d680486ac0198559443631be72bc/14b42/cover1.jpg","srcSet":"/static/a4a0d680486ac0198559443631be72bc/f836f/cover1.jpg 200w,\n/static/a4a0d680486ac0198559443631be72bc/2244e/cover1.jpg 400w,\n/static/a4a0d680486ac0198559443631be72bc/14b42/cover1.jpg 800w,\n/static/a4a0d680486ac0198559443631be72bc/47498/cover1.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Akshay Nagle","github":"Akshay-Nagle","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"<p>Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.</p>\n<p><strong>What does it mean for user authentication?</strong></p>\n<p>On one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).</p>\n<p>On the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.</p>\n<p>In this article, we’ll discuss:</p>\n<ul>\n<li>How is user authentication (identity) affected?</li>\n<li>What is Google offering as part of Privacy Sandbox to support various identity use cases when third-party cookies are phased out?</li>\n</ul>\n<h2 id=\"how-is-user-authentication-affected\" style=\"position:relative;\"><a href=\"#how-is-user-authentication-affected\" aria-label=\"how is user authentication affected permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How is User Authentication Affected?</h2>\n<p>Third-party cookie restrictions affect user authentication in three ways, as follows.</p>\n<h3 id=\"external-identity-providers\" style=\"position:relative;\"><a href=\"#external-identity-providers\" aria-label=\"external identity providers permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>External Identity Providers</h3>\n<p>If your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.</p>\n<h3 id=\"web-sso\" style=\"position:relative;\"><a href=\"#web-sso\" aria-label=\"web sso permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Web SSO</h3>\n<p>If you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.</p>\n<p>If you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.</p>\n<p>For example, you have apps at <code>example.com</code>, <code>travel.example.com</code>, <code>stay.example.com</code>, and web SSO is handled by <code>auth.example.com</code>. In this case, third-party cookie restrictions don’t apply.</p>\n<h3 id=\"federated-sso\" style=\"position:relative;\"><a href=\"#federated-sso\" aria-label=\"federated sso permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Federated SSO</h3>\n<p>Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.</p>\n<p>Usually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits. </p>\n<p>For example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.</p>\n<blockquote>\n<p><strong>Note</strong>: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).</p>\n</blockquote>\n<h2 id=\"chromes-alternatives-for-third-party-cookies\" style=\"position:relative;\"><a href=\"#chromes-alternatives-for-third-party-cookies\" aria-label=\"chromes alternatives for third party cookies permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Chrome’s Alternatives for Third-Party Cookies</h2>\n<p>Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.</p>\n<p>Specific to authentication, Google recommends the following:</p>\n<ol>\n<li>Cookies Having Independent Partitioned State (CHIPS)</li>\n<li>Storage Access API</li>\n<li>Related Website Sets</li>\n<li>Federated Credential Management (FedCM) API</li>\n</ol>\n<h3 id=\"cookies-having-independent-partitioned-state-chips\" style=\"position:relative;\"><a href=\"#cookies-having-independent-partitioned-state-chips\" aria-label=\"cookies having independent partitioned state chips permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Cookies Having Independent Partitioned State (CHIPS)</h3>\n<p><a href=\"https://developers.google.com/privacy-sandbox/3pcd/chips\">CHIPS</a> are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.</p>\n<p>For example, a user visits <code>a.com</code> with a map embed from <code>map-example.com</code>, which can set a partitioned cookie that is only accessible on a.com. </p>\n<p>If the user visits <code>b.com</code> with a map embed from <code>map-example.com</code>, it cannot access the partitioned cookie set on <code>a.com</code>. It has to create a separate partitioned cookie specific to <code>b.com</code>, thus blocking cross-site tracking yet allowing limited cross-site functionality.</p>\n<p>You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.</p>\n<p>If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions. </p>\n<p>However, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.</p>\n<h3 id=\"storage-access-api\" style=\"position:relative;\"><a href=\"#storage-access-api\" aria-label=\"storage access api permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Storage Access API</h3>\n<p>With <a href=\"https://developers.google.com/privacy-sandbox/3pcd/storage-access-api\">Storage Access API</a>, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.</p>\n<p>Storage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.</p>\n<p>It is most suitable when loading cross-site resources and interactions, such as:</p>\n<p>Verifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.</p>\n<p>As it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.</p>\n<h3 id=\"related-website-sets\" style=\"position:relative;\"><a href=\"#related-website-sets\" aria-label=\"related website sets permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Related Website Sets</h3>\n<p>With <a href=\"https://developers.google.com/privacy-sandbox/3pcd/related-website-sets\">Related Website Sets</a>, you can declare a <code>primary</code> website and <code>associatedSites</code> for limited purposes to grant third-party cookie access and local storage for a limited number of sites.</p>\n<p>Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: <a href=\"https://github.com/GoogleChrome/related-website-sets\">Related Website Sets</a></p>\n<p>It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.</p>\n<p>It is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.</p>\n<p>The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using <code>resuestStorageAccessFor()</code> API.</p>\n<p>If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.</p>\n<p>Related Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.</p>\n<h3 id=\"federated-credential-management-fedcm-api\" style=\"position:relative;\"><a href=\"#federated-credential-management-fedcm-api\" aria-label=\"federated credential management fedcm api permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Federated Credential Management (FedCM) API</h3>\n<p>FedCM API enables federated SSO without third-party cookies.</p>\n<p>With FedCM API, a user follows these steps for authentication:</p>\n<ol>\n<li>The User navigates to a Service Provider (SP) — aka., Relying Party (RP)</li>\n<li>As the user requests to authenticate, the SP requests the browser through FedCM API to initiate authentication.</li>\n<li>The browser displays a list of available identity providers (supported by the RP), such as social IdPs like Google, Apple, LinkedIn, and Facebook, or other OAuth IdPs like LoginRadius.</li>\n<li>Once the user selects an IdP, the browser communicates with the IdP. Upon valid authentication, the IdP generates a secure token.\nThe browser delivers this secure token to the RP to facilitate user authorization.</li>\n</ol>\n<p>You can access a user demo of FedCM here: <a href=\"https://fedcm-rp-demo.glitch.me/\">FedCM</a>. </p>\n<p>For more information about implementing federated SSO with FedCM API, go through the <a href=\"https://developers.google.com/privacy-sandbox/3pcd/fedcm-developer-guide\">FedCM developer guide</a>.</p>\n<h2 id=\"how-is-loginradius-preparing-for-the-third-party-cookie-phase-out\" style=\"position:relative;\"><a href=\"#how-is-loginradius-preparing-for-the-third-party-cookie-phase-out\" aria-label=\"how is loginradius preparing for the third party cookie phase out permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How is LoginRadius Preparing for the Third-party Cookie Phase-out?</h2>\n<p>Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.</p>\n<p>We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.</p>\n<p>Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.</p>\n<h2 id=\"in-conclusion\" style=\"position:relative;\"><a href=\"#in-conclusion\" aria-label=\"in conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>In Conclusion</h2>\n<p>The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.</p>\n<p>Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.</p>\n<p>From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.</p>\n<h2 id=\"glossary\" style=\"position:relative;\"><a href=\"#glossary\" aria-label=\"glossary permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Glossary</h2>\n<p><strong>Top-level site</strong>: It is the primary site a user has visited.</p>\n<p><strong>First-party cookie</strong>: A cookie set by the top-level site.</p>\n<p><strong>Third-party cookie</strong>: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited <code>a.com</code>, which might use an embed from <code>loginradius.com</code> to facilitate authentication. If <code>loginradius.com</code> sets a cookie when the user visits <code>a.com</code>, it is called a third-party cookie as the user hasn’t directly visited <code>loginradius.com</code>.</p>\n<h2 id=\"references\" style=\"position:relative;\"><a href=\"#references\" aria-label=\"references permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>References</h2>\n<ul>\n<li><a href=\"https://developers.google.com/privacy-sandbox/3pcd/prepare/prepare-for-phaseout\">Changes to Chrome's treatment of third-party cookies</a></li>\n<li><a href=\"https://developers.google.com/privacy-sandbox/3pcd/guides/identity\">Check the impact of the third-party cookie changes on your sign-in workflows</a></li>\n</ul>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":126,"currentPage":22,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}