<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Chinmaya Tripathi</title>
    <description>The latest articles on DEV Community by Chinmaya Tripathi (@chinmaytrpth2).</description>
    <link>https://dev.to/chinmaytrpth2</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F379152%2F5fc39eed-6181-42ec-8c2f-670fe4f0f259.jpeg</url>
      <title>DEV Community: Chinmaya Tripathi</title>
      <link>https://dev.to/chinmaytrpth2</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/chinmaytrpth2"/>
    <language>en</language>
    <item>
      <title>🚀Supercharging Docusaurus with MSW: Mock APIs for Live, Interactive Docs</title>
      <dc:creator>Chinmaya Tripathi</dc:creator>
      <pubDate>Sun, 21 Sep 2025 22:16:04 +0000</pubDate>
      <link>https://dev.to/chinmaytrpth2/supercharging-docusaurus-with-msw-mock-apis-for-live-interactive-docs-54ie</link>
      <guid>https://dev.to/chinmaytrpth2/supercharging-docusaurus-with-msw-mock-apis-for-live-interactive-docs-54ie</guid>
      <description>&lt;p&gt;When you’re building documentation for an API or product that depends on backend data, you face a familiar challenge: how do you make your examples feel real without relying on a fragile staging environment or exposing production endpoints?&lt;/p&gt;

&lt;p&gt;This post is not just a set of code snippets — it’s a deep-dive tutorial and understanding guide for using 🛠 Mock Service Worker (MSW) with 📚 Docusaurus. By the end, you’ll know not only how to set it up.&lt;/p&gt;

&lt;p&gt;💡** Why Documentation Needs Realistic API Responses**&lt;/p&gt;

&lt;p&gt;Have you ever followed an API tutorial, clicked “Run”, and immediately hit an error? ❌ Maybe the staging server was down. Maybe you didn’t have the right auth token. Maybe the data just looked… boring.&lt;/p&gt;

&lt;p&gt;Your readers feel this too.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;By mocking your APIs, you:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;✨ &lt;strong&gt;Guarantee Consistency&lt;/strong&gt;: The data in your examples always matches the docs.&lt;/p&gt;

&lt;p&gt;🧪 &lt;strong&gt;Provide a Safe Sandbox:&lt;/strong&gt; Readers can experiment with code samples without breaking anything.&lt;/p&gt;

&lt;p&gt;⚡ &lt;strong&gt;Lower the Barrier to Entry:&lt;/strong&gt; No auth keys, VPNs, or setup steps needed — just run npm start.&lt;/p&gt;

&lt;p&gt;✈️ &lt;strong&gt;Enable Offline Work:&lt;/strong&gt; Contributors can work from a plane, train, or anywhere without internet.&lt;/p&gt;

&lt;p&gt;MSW intercepts requests at the network layer (Service Worker), which means your frontend doesn’t know the difference between real and fake APIs — perfect for interactive docs.&lt;/p&gt;




&lt;h2&gt;
  
  
  🏗 Step 1: Installing MSW — The Foundation
&lt;/h2&gt;

&lt;p&gt;First, install MSW as a development dependency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install msw --save-dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This adds the core tooling you’ll need to spin up a Service Worker in development.&lt;/p&gt;




&lt;h2&gt;
  
  
  🗂 Step 2: Designing Your Mock Architecture
&lt;/h2&gt;

&lt;p&gt;Before writing code, think about the architecture:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Handlers:&lt;/strong&gt; Define each endpoint you want to mock.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Browser Worker:&lt;/strong&gt; Bootstraps MSW in the browser.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Node Server (Optional):&lt;/strong&gt; Lets you reuse the same mocks in tests.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Create a folder structure like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my-docusaurus-app/
├── src/
│   ├── mocks/
│   │   ├── handlers.js  ← endpoint definitions
│   │   └── browser.js   ← bootstraps MSW
│   └── theme/
│       └── Root.js      ← starts MSW in dev mode
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This structure makes it clear to future contributors where the mocking logic lives.&lt;/p&gt;




&lt;h2&gt;
  
  
  ✍️Step 3: Writing Your First Handler
&lt;/h2&gt;

&lt;p&gt;Think of a handler as an &lt;strong&gt;API contract in miniature&lt;/strong&gt; — it specifies which HTTP verb, which endpoint, and what response should come back.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// src/mocks/handlers.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;rest&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;msw&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handlers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="nx"&gt;rest&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/info&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;res&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello from MSW! This is a stable, predictable response.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
      &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}),&lt;/span&gt;
  &lt;span class="nx"&gt;rest&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/login&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;res&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;token&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`fake-jwt-token-for-&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This makes it easy to reproduce login flows or fetch requests without a live backend.&lt;/p&gt;




&lt;h2&gt;
  
  
  🌐Step 4: Bootstrapping MSW in the Browser
&lt;/h2&gt;

&lt;p&gt;Create &lt;code&gt;src/mocks/browser.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;setupWorker&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;msw&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;handlers&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./handlers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;worker&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setupWorker&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;handlers&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This file ties together all handlers and creates a single Service Worker entry point.&lt;/p&gt;




&lt;h2&gt;
  
  
  🏃 Step 5: Starting the Worker in Docusaurus
&lt;/h2&gt;

&lt;p&gt;We want MSW to run automatically when the docs load in dev mode. Docusaurus provides a way to wrap the entire app via &lt;code&gt;Root.js&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// src/theme/Root.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useEffect&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Root&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;children&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NODE_ENV&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;development&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../mocks/browser&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(({&lt;/span&gt; &lt;span class="nx"&gt;worker&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;worker&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;onUnhandledRequest&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;bypass&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;children&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Why &lt;code&gt;onUnhandledRequest: 'bypass'&lt;/code&gt;? It ensures requests that aren’t mocked still hit the real API, which is useful if you’re mocking only part of your backend.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎨Step 6: Making the Docs Interactive
&lt;/h2&gt;

&lt;p&gt;Here’s an example React component that fetches data from our mocked endpoint:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;ExampleComponent&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setData&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/info&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
      &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;setData&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#f8f8f8&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1rem&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;borderRadius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;8px&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h4&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Mocked API Response&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h4&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;pre&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;pre&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This creates a live component right in your documentation, so readers can see actual responses as they would appear in a real app.&lt;/p&gt;




&lt;h2&gt;
  
  
  🏗Handling Deployment on GitLab Pages (Dynamic URLs)
&lt;/h2&gt;

&lt;p&gt;One challenge I faced after integrating MSW was deploying the docs on &lt;strong&gt;GitLab Pages&lt;/strong&gt;. Each pipeline run generated a &lt;strong&gt;dynamic URL&lt;/strong&gt; like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://myproject.gitlab.io/-/jobs/235345/artifacts/public/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By default, MSW looks for &lt;code&gt;mockServiceWorker.js&lt;/code&gt; at the root (&lt;code&gt;/mockServiceWorker.js&lt;/code&gt;). On GitLab Pages with dynamic URLs, this broke because the Service Worker lived at:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://myproject.gitlab.io/-/jobs/235345/artifacts/mockServiceWorker.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;which is dynamic for each pipeline.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Fix
&lt;/h3&gt;

&lt;p&gt;When calling &lt;code&gt;worker.start()&lt;/code&gt;, you can pass a &lt;code&gt;serviceWorker.url&lt;/code&gt; option to tell MSW exactly where to find the file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;worker&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;serviceWorker&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pathname&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\/&lt;/span&gt;&lt;span class="sr"&gt;index&lt;/span&gt;&lt;span class="se"&gt;\.&lt;/span&gt;&lt;span class="sr"&gt;html$/&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="s2"&gt;/mockServiceWorker.js`&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This dynamically computes the correct URL based on the current page’s path, ensuring MSW is always found regardless of the pipeline run.&lt;/p&gt;

&lt;p&gt;This small tweak made the GitLab Pages deployment &lt;strong&gt;reliable and future-proof&lt;/strong&gt;, so every pipeline produced a fully functional, interactive documentation site.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 7: Common Pitfalls and How to Avoid Them
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;CORS Errors:&lt;/strong&gt; Make sure your mocked URL exactly matches what &lt;code&gt;fetch&lt;/code&gt; is requesting (including domain).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Worker Not Starting:&lt;/strong&gt; Forgetting to import &lt;code&gt;browser.js&lt;/code&gt; in &lt;code&gt;Root.js&lt;/code&gt; means MSW never runs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Production Builds Breaking:&lt;/strong&gt; Guard MSW startup with &lt;code&gt;NODE_ENV&lt;/code&gt; so it only runs locally.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dynamic Paths on CI/CD:&lt;/strong&gt; Use &lt;code&gt;serviceWorker.url&lt;/code&gt; to point MSW to the correct location in CI/CD deployments.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Beyond Development: Using MSW in Tests
&lt;/h2&gt;

&lt;p&gt;One of MSW’s superpowers is that you can reuse these mocks in integration tests:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;setupServer&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;msw/node&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;handlers&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./handlers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setupServer&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;handlers&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;beforeAll&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nf"&gt;afterEach&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resetHandlers&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="nf"&gt;afterAll&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;close&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now your tests, your local dev environment, and your documentation all speak the same language.&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Mocking APIs in your Docusaurus site isn’t just a gimmick, it’s a professional touch that sets great documentation apart. By using MSW, you get production-like responses without production-like headaches. Your users learn faster, and your team spends less time troubleshooting docs.&lt;/p&gt;

</description>
      <category>api</category>
      <category>javascript</category>
      <category>docusaurus</category>
      <category>msw</category>
    </item>
    <item>
      <title>ViteJS vs. Webpack: The Ultimate Showdown</title>
      <dc:creator>Chinmaya Tripathi</dc:creator>
      <pubDate>Thu, 05 Sep 2024 04:11:52 +0000</pubDate>
      <link>https://dev.to/chinmaytrpth2/vitejs-vs-webpack-the-ultimate-showdown-42e4</link>
      <guid>https://dev.to/chinmaytrpth2/vitejs-vs-webpack-the-ultimate-showdown-42e4</guid>
      <description>&lt;p&gt;There’s been a lot of buzz about who’s the reigning champion—ViteJS or Webpack. It’s the ultimate face-off, raising questions about which tool is the better choice and how development might change depending on your pick. With so many questions and often unclear answers, this blog aims to clear the air. We’ll dive into how Vite, the new hero on the block, stacks up against the classic, tried-and-true Webpack, and explore why it might just be the game-changer you’ve been looking for.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Old Mighty Webpack:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhi570610vgrfgutwgdo1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhi570610vgrfgutwgdo1.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Webpack has long been the go-to bundler for JavaScript applications, renowned for its versatility and power. It’s like the Swiss Army knife of bundlers, offering advanced features like code splitting to optimize loading times by breaking apps into bite-sized chunks. With its robust plugin system, Webpack supports a vast array of customizations, handling everything from asset management to intricate build processes. Its detailed configuration options allow for precise control, making it the dependable choice for large-scale and enterprise-level projects.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://webpack.js.org/guides/getting-started/" rel="noopener noreferrer"&gt;Webpack Docs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;And Here Comes Our New Guy - Vite&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb5k2njn8r6n1oxhx7l5j.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb5k2njn8r6n1oxhx7l5j.jpg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Enter Vite, the fresh contender that’s shaking up the development scene with its speed and simplicity. Vite is like the new kid who shows up at the party and instantly becomes everyone’s favorite. It boasts lightning-fast development server start-ups and near-instant hot module replacement (HMR), thanks to its use of native ES modules and esbuild for pre-bundling. Its modern approach simplifies configuration, offering a seamless experience with less overhead. For production builds, Vite calls in Rollup for optimized, efficient output. With its focus on developer experience, Vite is quickly becoming the go-to for modern, fast-paced projects.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://vitejs.dev/guide/" rel="noopener noreferrer"&gt;Vite Docs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;IMO choosing between ViteJS and Webpack is a bit like deciding whether to use a jetpack or a trusty old backpack for your next adventure. The jetpack (ViteJS) will get you there faster and make you look like a superhero. The backpack (Webpack) might not be as flashy, but it’s reliable and can carry all the gear you need for the journey.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;_So let’s have it _&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb253myxsdeps9inudzou.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb253myxsdeps9inudzou.gif" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ViteJS vs. Webpack: The Ultimate Face-Off&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Development Speed:&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;ViteJS&lt;/em&gt;&lt;/strong&gt;: Imagine having a superpower that lets you skip the waiting time—ViteJS is that superpower. It’s designed to be lightning-fast during development. By using native ES modules, it serves your files instantly, making server start-ups and hot module replacement (HMR) feel like magic. Blink, and your changes are live!&lt;br&gt;
&lt;strong&gt;&lt;em&gt;Webpack&lt;/em&gt;&lt;/strong&gt;: Think of Webpack as a diligent but slightly slow-moving assistant. It bundles all your code and assets into neat packages even while you're developing, which can slow things down. Its HMR can be a bit sluggish, as it has to rebuild and re-bundle parts of your app to reflect changes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bundling Approach&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;ViteJS&lt;/em&gt;&lt;/strong&gt;: Vite is a minimalist at heart. During development, it skips the bundling hassle and serves unbundled ES modules directly. When it’s time for the big show—production—Vite calls in Rollup for optimized, slick bundles.&lt;br&gt;
&lt;strong&gt;&lt;em&gt;Webpack&lt;/em&gt;&lt;/strong&gt;: Webpack is the ultimate packager, bundling your code and assets for both development and production. It’s flexible and powerful, handling all sorts of bundling needs with its extensive plugin system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Configuration Complexity&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;ViteJS&lt;/em&gt;&lt;/strong&gt;: Vite is the easy-going friend who keeps things simple. Its configuration is straightforward and opinionated, meaning you can get started quickly with minimal setup. It’s like having a streamlined, user-friendly interface for your development environment.&lt;br&gt;
&lt;strong&gt;&lt;em&gt;Webpack&lt;/em&gt;&lt;/strong&gt;: Webpack, on the other hand, is the seasoned expert with a vast array of settings. Its configuration options are as extensive as they are complex, offering flexibility at the cost of a steeper learning curve. If you enjoy tweaking every detail, Webpack has you covered.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hot Module Replacement (HMR)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;ViteJS&lt;/em&gt;&lt;/strong&gt;: Vite’s HMR is like a turbo-charged pit crew—swiftly swapping out the parts that have changed without missing a beat. It only replaces the affected modules, keeping the development experience smooth and efficient.&lt;br&gt;
&lt;strong&gt;&lt;em&gt;Webpack&lt;/em&gt;&lt;/strong&gt;: Webpack’s HMR is hardworking but can be a bit slower, as it needs to rebuild and re-bundle parts of the application. It’s reliable, but it might make you wait a little longer for your changes to appear.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ecosystem and Plugins&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;ViteJS&lt;/em&gt;&lt;/strong&gt;: Vite is the new kid on the block with a growing collection of plugins. It might not have as many options as Webpack yet, but it supports Rollup plugins to extend its functionality. It’s quickly catching up!&lt;br&gt;
&lt;strong&gt;&lt;em&gt;Webpack&lt;/em&gt;&lt;/strong&gt;: Webpack is a seasoned veteran with a vast, mature ecosystem. Its extensive library of plugins and loaders means you can customize and extend it to meet nearly any need. It’s a well-established tool with broad community support.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Build Output&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;ViteJS&lt;/em&gt;&lt;/strong&gt;: Vite’s production builds are like finely tuned race cars—optimized and performance-focused, thanks to Rollup’s powerful bundling. It includes features like tree-shaking to keep the final output lean and mean.&lt;br&gt;
&lt;strong&gt;&lt;em&gt;Webpack&lt;/em&gt;&lt;/strong&gt;: Webpack also delivers top-notch production builds with optimized code splitting and tree-shaking. However, achieving these optimizations can involve a bit more configuration work, making it a powerful but complex tool.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Too much information? Alright, let’s wrap it up before we end up with more comparisons than a buffet menu!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0zgv7eij2p2s2drxmeqp.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0zgv7eij2p2s2drxmeqp.gif" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When choosing between ViteJS and Webpack, it’s clear that each tool has its own superpowers. ViteJS shines with its speed and simplicity, making it a top pick for modern projects that demand a smooth and speedy development experience. It’s perfect for new or smaller applications, especially when using frameworks like React or Vue, and lets you focus more on coding and less on configuration.&lt;/p&gt;

&lt;p&gt;But don’t be fooled—ViteJS isn’t just a shiny new toy. It’s mature enough for production use, and here’s why: It’s got stable releases and a solid track record in real-world projects, ensuring it handles both development and production builds efficiently. Vite’s performance optimizations, thanks to Rollup, deliver optimized, performant output with features like tree-shaking and code splitting. Its growing adoption by numerous projects and companies proves its reliability, while an active community and responsive development team keep it on the cutting edge. Plus, with comprehensive and continuously updated documentation, Vite makes adoption and troubleshooting a breeze.&lt;/p&gt;

&lt;p&gt;On the flip side, Webpack’s extensive ecosystem and flexibility make it the go-to for large-scale and complex projects, or if you’re dealing with legacy code. It’s been around longer and offers a mature, customizable build process that’s ideal for enterprise-level applications.&lt;/p&gt;

&lt;p&gt;So, if you’re gearing up for a modern, agile project, ViteJS is your speedster with a solid pedigree. For complex, established needs, Webpack’s the experienced pro. Choose wisely, and may your build process be as smooth as your code!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>TIME ANALYSIS OF KEYSTROKES AND TIMING ATTACKS ON SSH</title>
      <dc:creator>Chinmaya Tripathi</dc:creator>
      <pubDate>Mon, 14 Nov 2022 19:57:42 +0000</pubDate>
      <link>https://dev.to/chinmaytrpth2/time-analysis-of-keystrokes-and-timing-attacks-on-ssh-2l0l</link>
      <guid>https://dev.to/chinmaytrpth2/time-analysis-of-keystrokes-and-timing-attacks-on-ssh-2l0l</guid>
      <description>&lt;p&gt;&lt;em&gt;DON XIAODONG DON | DAVID WAGNER | XUQUING TIAN&lt;/em&gt;&lt;br&gt;
&lt;strong&gt;TIME ANALYSIS OF KEYSTROKES AND TIMING ATTACKS ON SSH&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;(Summary by CHINMAYA TRIPATHI)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;*&lt;em&gt;RESEARCH AT A GLANCE: *&lt;/em&gt;&lt;br&gt;
&lt;em&gt;SSH provides a secure channel between two hosts. Despite its protective mechanisms, it is open to a lot of security mechanisms. For suppose, the transmitted data packets are padded only by 8-byte boundary, which can reveal the size of data and second the data being sent to the receiver with the user tapping each button on the keyboard. These small minor mistakes could lead to some serious security vulnerability. This paper covers some of the important aspects of transmission of data over SSH. The authors further develop mechanisms, which try to monitor and learn user data by monitoring SSH sessions.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;*&lt;em&gt;INTRODUCTION (Problem statement): *&lt;/em&gt;&lt;br&gt;
Following the vulnerability of rlogin, ftp and telnet, which transfer the data over the network openly be it wireless or ethernet, creating an opportunity to an attacker to access all the data without much hustle. SSH was introduced, which came widely into practise because of its secure data transfer and reliability over any network. &lt;/p&gt;

&lt;p&gt;Although SSH provides good encryption and secure data transfer, this paper highlights some of the techniques which can result in finding some substantial data being transferred over SSH, even though it is called out to be a secure transfer. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;RESEARCH STUDY:&lt;/strong&gt; The paper begins with studying the user's keyboard dynamics, which does reveal the information typed in the set of intervals. Looking more into detail, it revealed 1 bit of information about the content per keystroke of the keyboard. When this sequence was used in a hidden Markov Model named Herbivore (an attacker system), which records the information of a user entering the password over the network, resulted in the conclusion that passwords were chosen into a randomly uniform length of 7-8 chars. This reduced the cost of password cracking by 50 and then they focused on to include some countermeasures to eliminate this vulnerability.  &lt;/p&gt;

&lt;p&gt;It was also brought into account that this vulnerability does not limit to SSH, instead it can result in any encrypted data transfer protocol. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;EAVESDROPPING SSH:&lt;/strong&gt;&lt;br&gt;
The experiment involves listening to the conversation between the client and the server which involves the data sent the client and server simultaneously, reading the packet size, monitoring the intervals the message was being sent and the pattern in bits with which the data would be sent from and to client-server. The way eavesdropping works is the attacker can learn 1-bit of data sent over the server and apply the model trained to determine the data possibility. &lt;/p&gt;

&lt;p&gt;There are some significant attacks implemented to measure the scarcity of the attack and measure upto what extent it can affect and exploit the system. The attacks are based on the Hidden Markov Model and the ‘n’ Viterbi algorithm which help to determine the patterns and the data which can be transmitted over the network.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Traffic-signature attack:&lt;/strong&gt; This attack involves an attacker trying to know the password paradigm with the SU linux command to the server. When the server asks for the password from the user by reading the command (SU). The attacker tries to identify the pattern of bytes returned when this certain command is being typed i.e. SU. The amount of back and forth transfer of data between the server and the client and the time to authentication, and when the user enters the password, there is no transfer of packets to the client results in recognition of password bits transferred to the server. Hence it can be traced.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multi-user attack:&lt;/strong&gt; In this attack, the attacker tries to examine the ‘ls’ command by the user which prints all the contents of the system present directory and helps him examine the status of authenticity of that particular user. Now, when the user tries to login, or for any other command which requires the user for root level access, the server requires a password, and this could be monitored by the attacker.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Nested SSH attack:&lt;/strong&gt; This attack involves attacker monitoring for a connection which is made through the remote system the user is already connected to. While logging into the third system, the user transfers the password twice, that is from his own system to second and from there to third. The attacker gets a chance to verify the pattern of password by reading both the data transfer between A -&amp;gt; B and then B -&amp;gt; C, which results in even quicker pattern recognition, especially when using the designed model to detect the pattern for specific input type.&lt;/p&gt;

&lt;p&gt;The data collected by the attacker is the interval between the two keystrokes. Hence, we focus only on key-press events. The time difference between two key presses is called the latency between the keystrokes and we can use this term inter-keystroke timing to refer to the latency between two keystrokes. &lt;/p&gt;

&lt;p&gt;Further the patterns are read with certain constraints like, auth repetition, bit repetition, latency measurement and other, which lead to a certain prediction about the data the user is transferring/exchanging to the server frequently. This could consist of some valuable data when connecting dots. The calculation depends upon simple timing characteristics, which consist of a user typing two letters with alternative hands, matching combinations like alpha-numeric, only alpha or only numeric. This information when put into the derived models like Gaussian Modeling, can result in some valuable data the attacker can take advantage of. &lt;/p&gt;

&lt;p&gt;In conclusion, when tried on different methods like password inference on a single user and multiple user, they give some substantial information. Organizing the long sequential patterns in the input helps the model to analyze the data. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;COUNTER MEASURES:&lt;/strong&gt; Although the attacker can figure out the pattern of keystrokes, if the echo for empty packets is turned off on server end and for each keystroke, the server returns the dummy packets which will be ignored by the client will reduce the effectiveness of the traffic signature attack, as it prevents enter-keystroke timing information. &lt;/p&gt;

&lt;p&gt;We can also modify the SSH to receive the packet by a random amount of ‘n’ milliseconds between every keystroke. This could eliminate constant monitoring for passwords. Another way is to set a response and client request at a rate of 50 milliseconds. Since the rate is constant, in general the transmission of data will be the same for every exchange of data which will result in original data as well as dummy traffic data sent by the server at a constant rate. Although this packet doesn't help in preventing the size of packets sent for-through client-server, it diminishes the password or sensitive data between the client and server because of the same packet size. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CONCLUSION:&lt;/strong&gt;&lt;br&gt;
The paper concludes with the fact that the weaknesses reveal a surprising amount of information on passwords and other text typed over SSH sessions. The timing information opens up some of the new set of risks, which the authors recommend that developers take care when designing these types of protocols. &lt;br&gt;
The transmitted packets which are sent over the network are padded only to an 8-byte boundary, which reveals the approximate size of the original data. And, in interactive mode, every individual’s keystroke typed is sent to the remote machine in a separate IP packet, which is immediately after the key is pressed, which leaks the inter keystroke timings of what the user is typing, i.e the precise inter-keystroke timings of users’ typing from the arrival times of packets.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;REFERENCES:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://people.eecs.berkeley.edu/%7Edaw/papers/ssh-use01.pdf" rel="noopener noreferrer"&gt;https://people.eecs.berkeley.edu/~daw/papers/ssh-use01.pdf&lt;/a&gt;&lt;br&gt;
&lt;a href="https://sites.cs.ucsb.edu/%7Ebultan/courses/595-F16/Week2.PDF" rel="noopener noreferrer"&gt;https://sites.cs.ucsb.edu/~bultan/courses/595-F16/Week2.PDF&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>ROBUST DEFENSES FOR CROSS-SITE REQUEST FORGERY</title>
      <dc:creator>Chinmaya Tripathi</dc:creator>
      <pubDate>Mon, 14 Nov 2022 19:52:09 +0000</pubDate>
      <link>https://dev.to/chinmaytrpth2/robust-defenses-for-cross-site-request-forgery-24e1</link>
      <guid>https://dev.to/chinmaytrpth2/robust-defenses-for-cross-site-request-forgery-24e1</guid>
      <description>&lt;p&gt;&lt;em&gt;ADAM BARTH | COLLIN JACKSON | JOHN C. MITCHELL&lt;/em&gt;&lt;br&gt;
&lt;strong&gt;ROBUST DEFENSES FOR CROSS-SITE REQUEST FORGERY&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;(Summary by CHINMAYA TRIPATHI)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;RESEARCH AT A GLANCE:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;This paper points to a new method in CSRF attack: Login CSRF, which would redirect users to an honest webpage but as an attacker. It has put in a decent amount of attention to the use of the ORIGIN flag in HTTPS header, which works effectively to defend against such CSRF attacks as it eliminates the security issues by browser as well as provides a good reference from where the request is coming.&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;INTRODUCTION (Problem statement):&lt;/strong&gt; Cross-Site Request Forgery (CSRF) is an attack which forces an end user to do unwanted actions on a web application in which they’re currently authenticated. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CSRF in-depth:&lt;/strong&gt; The paper divides the CSRF threat model in two parts - &lt;br&gt;
&lt;strong&gt;1)&lt;/strong&gt; &lt;strong&gt;&lt;em&gt;In-Scope Threats which include&lt;/em&gt;&lt;/strong&gt; -  Forum posters where an attacker can post malicious data on the website with the help of a post (an image, hyperlink etc.), Web attacker where an attacker owning a domain instructs the user’s browser to issue a cross-site request using GET/POST methods. And, Network attacker where the DNS server is compromised and attacker controls over the user's network. &lt;br&gt;
&lt;strong&gt;2)&lt;/strong&gt; &lt;strong&gt;&lt;em&gt;Out-Scope Threats which include&lt;/em&gt;&lt;/strong&gt; - XSS where an attacker inject a malicious script into site’s vulnerable/critical section, Malware where the attacker run’s a malicious software on user machine, DNS Rebounding where an attacker obtains network connectivity by binding an IP address to a server of attacker, Certificate Errors, where false certificates are provided to bypass browser security and Phishing where an attacker steals user’s credential using a fake login page or similar.  &lt;/p&gt;

&lt;p&gt;Until now, the discussions on CSRF focus more on server-side state mutation rather than focusing on browser-side state. And here comes in the Login CSRF vulnerability which takes advantage of this scope of exploit and disrupts the scope of user’s session integrity. The paper presents all the critical points associated with this vulnerability by giving a detailed explanation of how it could be dangerous with examples of some widely used online platforms like PayPal and iGoogle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Are there any defense mechanisms?&lt;/strong&gt;&lt;br&gt;
There are three widely used defense mechanisms against CSRF attacks: Validating a secret token which includes validating a secret token which is secretly received by users’ sessions. HTTP Referer header, which includes accepting the requests only from trusted sources. And, XMLHttpRequest, which includes setting a custom header via XMLHttpRequest and validating that the header is present before processing state-modifying requests.&lt;/p&gt;

&lt;p&gt;Although all three mechanisms have their own pros and cons, the HTTP Referer validation is a good CSRF defense, but is hampered by the suppression of the Referer header. To evaluate this defense, an experiment was conducted which concluded that although the Referer header is suppressed often over HTTP, it is rarely suppressed over HTTPS, letting current sites prevent CSRF by using HTTPS and strict Referer validation. And later, it was proposed, that to create a robust CSRF defense, browsers should include an “Origin” header with POST requests which let sites defend against CSRF by deploying a few simple web application firewall rules which provides security benefits of the Referer header while addressing the privacy concerns which lead to the widespread suppression of the Referer header.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;RESEARCH (experiment):&lt;/strong&gt;&lt;br&gt;
The objective of this research experiment was to conduct how often and under what circumstances the referrer field is blocked or suppressed by the browser. There were two machines in the lab serving advertisements on numerous channels. Randomly selecting the server when clicking on ads, it generated GET and POST requests and hit the two servers respectively. When permitted by the browser’s security policy, the advertisement generates same-domain requests to the primary server and cross-domain requests to the secondary server. The incoming request was logged by the server along with monitoring header fields like referer and user-agent, HMAC, etc which were sufficient to distinguish the request made by which user. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Observations:&lt;/strong&gt; When observed, the referer field was suppressed by the HTTP more often than HTTPS. Examining both the type of requests that is same domain and cross-site domain, it drew to a conclusion that referer field was suppressed by the HTTP more often than HTTPS because network proxies are able to remove the header from HTTP traffic but unable to do so from HTTPS traffic. It was also observed that document.referer is suppressed by the browser as referer is suppressed by the network. This could be due to its not being supported in many of the tested browsers. &lt;/p&gt;

&lt;p&gt;It was noticed that the referer field was suppressed by the browser due to privacy concerts because when a browser sends referer in header, it shows all the information about the website the request is coming from. There is more evidence of field suppressing for a cross-site request as compared to same site request. This shows the same request when done from two different ways have different impacts. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt; The researchers drew two conclusions based on their experiment. The CSRF attacks can be defended when using a referer in the header along with HTTPS requests. HTTP requests cannot omit to block requests that do not have a referer header in their request, so use HTTPS instead.&lt;/p&gt;

&lt;p&gt;The privacy of each user surfing the web is important, hence all the modern web browsers should implement strict referer validation in incoming requests. Usage of custom HTTP headers can also be an effective way to prevent CSRF attacks because the browser prevents sites from sending custom HTTP headers to another site, but allows sites to send custom HTTP headers to themselves using XMLHttpRequest.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PROPOSAL:&lt;/strong&gt; Following these experiments, evolved a new proposal where a different attribute was proposed to be added into the header that is “ORIGIN”. While making a POST request, the ORIGIN header respects the privacy concerns of browsers, hence not widely suppressed. It includes limited information required by browsers to verify whether the request is genuine or not, eliminating extra fields like path or query portions of the URL. This request is only sent for POST requests not other (GET) requests which result in saving a lot of information getting leaked while making any request. This approach comes with certain conditions which include elimination of all requests whose ORIGIN flag is null or have an undesired value, hence an attacker can’t  make a supporting browser a non-supporting browser. &lt;/p&gt;

&lt;p&gt;In addition to this, a browser should implement DNS rebinding and shouldn't opt into cross-site scripting requests from untrusted origins. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CONCLUSION:&lt;/strong&gt; Concluding the research, it was brought into the attention that CSRF is a widely exploited vulnerability and all the browsers should implement a defense mechanism against this attack. The implementation was categorized in three major categories - &lt;br&gt;
Login CSRF: Requesting to implement strict referer validation while performing any request over HTTPs requests. The site should reject a request if it doesn't have any referer header to defend against any malicious request.&lt;br&gt;
&lt;strong&gt;HTTPS:&lt;/strong&gt; Crucial sites like banking should limit cross-site requests only till their landing pages, and strictly follow the referer header validation to prevent CSRF attacks.&lt;br&gt;
Third-Party content: Site’s including hyperlinks or video players should implement token validation correctly with the help of secure frameworks and bind the token with a user's session, if the framework lacks, they should not accept the request and block them. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;REFERENCES:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://owasp.org/www-community/attacks/csrf" rel="noopener noreferrer"&gt;https://owasp.org/www-community/attacks/csrf&lt;/a&gt;&lt;br&gt;
&lt;a href="https://seclab.stanford.edu/websec/csrf/csrf.pdf" rel="noopener noreferrer"&gt;https://seclab.stanford.edu/websec/csrf/csrf.pdf&lt;/a&gt;&lt;/p&gt;

</description>
      <category>cybersecurity</category>
      <category>researchpaper</category>
      <category>summary</category>
      <category>security</category>
    </item>
    <item>
      <title>REFLECTIONS ON TRUSTING TRUST</title>
      <dc:creator>Chinmaya Tripathi</dc:creator>
      <pubDate>Thu, 10 Nov 2022 21:08:44 +0000</pubDate>
      <link>https://dev.to/chinmaytrpth2/reflections-on-trusting-trust-p23</link>
      <guid>https://dev.to/chinmaytrpth2/reflections-on-trusting-trust-p23</guid>
      <description>&lt;p&gt;&lt;em&gt;&lt;strong&gt;KEN THOMPSON’S&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
REFLECTIONS ON TRUSTING TRUST&lt;br&gt;
&lt;em&gt;(Summary by CHINMAYA TRIPATHI)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;INTRODUCTION (Problem statement):&lt;/strong&gt;&lt;br&gt;
Ken Thompson’s reflections on trusting trust is one the most crucial papers in the history of computer science, which unearths one of the most important problems one could ever encounter in software vulnerability. It emphasizes over a fact that how important it is to trust a code written by any other programmer. Ken starts his statement with the following lines - &lt;/p&gt;

&lt;p&gt;To what extent should one trust a statement that a program is free of Trojan horses? Perhaps it is more important to trust the people who wrote the software. &lt;/p&gt;

&lt;p&gt;About the author:  Kenneth Lane Thompson is an American pioneer of computer science. Thompson worked at Bell Labs for most of his career where he designed and implemented the original Unix operating system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;RESEARCH STORY (Approach and methodology):&lt;/strong&gt;&lt;br&gt;
Getting started with his research paper, Ken unearths the trust factor when it comes to using someone else’s code. The beginning of his research starts with Ken talking about one of his programming exercises he got started with, where he later discovered how easy it is to introduce Trojan horses in software and later emphasizes on how important it is to emerge the need for new laws and new social rules for these kinds of weaknesses, in the computer system.&lt;/p&gt;

&lt;p&gt;The way he articulates his research covering each point at a time and later combining all of them to conclude his finding is exemplary, he describes an attack on computer systems at the level of the C compiler. He breaks down the attack into three critical stages:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1:&lt;/strong&gt;  This step tells about the programming exercise where he was supposed to create the shortest self-producing program i.e to write a source program that, when compiled and executed, will produce an exact copy of the source as its output. Which means that the output of the execution, of the compiled code, is equal to the source code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2:&lt;/strong&gt;  Here he points out, since the compiler to compile this code is also written in C language, this could lead to some problems like character escaping, which means it could print some characters which aren't supposed to get printed in the output. He gives an example of &lt;br&gt;
“ Hello World \n”, where \n represents a new line. This is pointed out as an ideal C compiler which interprets the character escape sequence. &lt;/p&gt;

&lt;p&gt;The point he tries to emphasize here is that if a C program contains a trojan horse, all the compilers built on the top of the program will result in defective one and could be used in an evil way to satisfy a hidden (evil) purpose. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3:&lt;/strong&gt;  In this step, we tweak the code to deliberately miscompile the program when a particular pattern is matched calling it a trojan horse. The bug planted in the compiler would match to the login mechanism of a UNIX system, which would recognize every password valid for every other account in the system. This could result in a security breach since we are able to login into any system which uses the login command compiled by our compiler. &lt;/p&gt;

&lt;p&gt;Although, the abstract idea of stage 3 is understandable, yet using an example of logging in into the system by showing the exploit (evil code) or its working would have put some great detail on what Ken wants to conclude.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;FINDINGS:&lt;/strong&gt;&lt;br&gt;
Now, if we combine all the three steps, we could create a powerful attack because since our C compiler would produce the same malicious features to the source code before compilation,  because of the fact that it recompiles itself, this could be undetectable. This could turn into a trojan horse.&lt;/p&gt;

&lt;p&gt;It’s really surprising to find that such subtle frictions (which are the building blocks) of any software could be vulnerable. It’s something which is neglected by all the developers as well as research scientists in the name of truthfulness (that the code has been written by someone professional and genuine who works at a multinational corporation) but this is the fact that Ken wants to magnify and how overstated this is.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MORAL (Conclusion):&lt;/strong&gt;&lt;br&gt;
At first, his methodology may seem a little confusing, it’s a little difficult to grasp his motive with respect to the title and the articulation of the paper, but in the end, when connect the dots and get the whole idea in the conclusion, where he finally, he concludes his research on moral grounds emphasizing that you cannot trust the code written by any other programmer unless you write the code yourself. He also phrases this line - Perhaps it is more important to trust the people who wrote the software, which somewhere or the other proves his earlier discovery of a vulnerability. He also criticized the role of media and movies encouraging the young ones to practice hacking, thinking it as a ‘cool’ and ‘genius’ thing. He adds, “​​The press must learn that misguided use of a computer is no more amazing than drunk driving of an automobile”. He also tells how big tech giants enforce strict hacking policy because the bigger the company, the easier it is to get the access. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;REFERENCES:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://en.wikipedia.org/wiki/Ken_Thompson" rel="noopener noreferrer"&gt;https://en.wikipedia.org/wiki/Ken_Thompson&lt;/a&gt;&lt;/p&gt;

</description>
      <category>paperreview</category>
      <category>security</category>
    </item>
    <item>
      <title>Blockchain - Overview</title>
      <dc:creator>Chinmaya Tripathi</dc:creator>
      <pubDate>Mon, 24 Jan 2022 17:46:53 +0000</pubDate>
      <link>https://dev.to/chinmaytrpth2/blockchain-overview-12n5</link>
      <guid>https://dev.to/chinmaytrpth2/blockchain-overview-12n5</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F904jzywy3m2ajpnrk3ga.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F904jzywy3m2ajpnrk3ga.jpg" alt="Image description" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;After a ton of research, reading blogs and referring documentation, I've tried to summarize the concept of blockchain by giving an overview about what exactly it is, covering all the important foundational information one needs to get started with it.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  So what is blockchain?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdc5inlza77gbg39zowfw.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdc5inlza77gbg39zowfw.jpeg" alt="Image description" width="759" height="257"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Well in simple words, it’s basically a distributed immutable digital ledger of transactions that is duplicated across the entire network of computer systems (nodes). &lt;/p&gt;

&lt;p&gt;In terms of blockchain, a single transaction or record is called a block[]. Which holds all the information with respect  to that transaction. Forming a chain of such blocks(transactions) is called a blockchain. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So Why should we study blockchain?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frl7qh6r0bf558afz7gge.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frl7qh6r0bf558afz7gge.gif" alt="Image description" width="220" height="161"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Because it’s the future, it eliminates the concept of centralized data and helps in the verification and traceability of multistep transactions. Building decentralized applications is the way, which are safer and more secure.&lt;/p&gt;

&lt;p&gt;In short build a sense of trust in making a transaction. (I'll explain the concept of immutability further, but for now understand it this way that once a transaction has been made, nobody can alter it).&lt;/p&gt;

&lt;h3&gt;
  
  
  How does blockchain work?
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;It's an immutable ledger&lt;/em&gt; - All the nodes are connected in a distributed peer to peer system. So suppose, if an attacker tries to mutate the data of an existing block (change some information in a blockchain), it will be immediately corrected by other nodes connected to the network. &lt;/p&gt;

&lt;p&gt;When a block is added or changed in a blockchain, a message is broadcast to all other nodes connected in the network. Each node match the consistency of the information with their blockchain, if something is wrong, the victim node is immediately notified and the state is corrected.  &lt;/p&gt;

&lt;p&gt;The concept of correcting an incorrect blockchain consist of majority of the nodes having same state from the one which is different, because it's present in a distributed immutable environment. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Diving deeper - Let's see how a single block looks in blockchain...&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A block consists of - &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A Block number&lt;/li&gt;
&lt;li&gt;Data &lt;/li&gt;
&lt;li&gt;Previous hash&lt;/li&gt;
&lt;li&gt;Hash &lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: First block is called the genesis block.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The Algorithm used is &lt;strong&gt;SHA 256&lt;/strong&gt;  which Encrypts the data into a 64 hexadecimal char of 4 bits each, which is equal to 256 bits.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;And how the blocks are connected?&lt;/em&gt;&lt;/strong&gt; &lt;br&gt;
So, its something like Block1 -&amp;gt; Block2 -&amp;gt; Block3 -&amp;gt; Each block contains prev hash value of block and its own hash. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn4kkn7nlwonxwqezwfw4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn4kkn7nlwonxwqezwfw4.png" alt="Image description" width="800" height="384"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: Data cannot be decrypted once encrypted. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  What is a distributed P2P network?
&lt;/h3&gt;

&lt;p&gt;Thousands (even more) of node connected to each other in a network, where each node contains a copy of the blockchain. Whenever a node adds a transaction, it transmits a  message to all the other nodes connected and everyone adds that transaction to their chain(if course they verify whether the transaction is valid or not, but we'll talk about it later), maintaining the consistency of the network. &lt;/p&gt;

&lt;p&gt;The advantage of having a distributed p2p network is that it eliminates data tampering. Suppose A’s data gets changed, it gets notified by all the other nodes connected to it about data tampering and since the majority of connected nodes have different data as compared to what A has now, it correct its mutated data and balances the integrity again. This scenario is also called the &lt;strong&gt;byzantine fault tolerance&lt;/strong&gt; problem. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F171d19nq98v4nv72v8u9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F171d19nq98v4nv72v8u9.png" alt="Image description" width="640" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Consensus protocol - &amp;gt; which prevents attacks on blockchain and also validate each transaction addition.
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;POW(Proof of work)&lt;/strong&gt; -&amp;gt; This is something which comes into play when a blockchain miner mines a particular transaction to add it into their blockchain. Miners have to solve a math problem and then a block is mined. &lt;/p&gt;

&lt;p&gt;So suppose, a transaction is added to a blockchain in a node. When a miner solves a math problem and adds that transaction to the chain, they are rewarded, solving a problem and adding it into the blockchain is not at all an easy job, so they show their proof of work before adding the transaction to the blockchain and every other node runs an algorithm to verify that the added transaction is valid or not. Once verified, all the other nodes in the network add that block to their chains. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Curious question - What if two nodes add two transaction simultaneously? Which one will be added first?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So, if two nodes transact a two blocks simultaneously at the same time, then the entire network waits until one of the adjacent nodes or the main node(from where the initial transaction blocks were added) add one more block to them increasing their length. In such case the all the other nodes have to accept the that particular nodes added block and add it to their blockchain, discarding their initial node (which is also called the orphan node). &lt;/p&gt;

&lt;p&gt;That’s why we follow a six-step confirmation approach to have a successful transaction. &lt;/p&gt;




&lt;p&gt;Finally, I would like to conclude by emphasizing to research more about this technology which could revolutionize the concept of application security and transaction transparency. Not only this, blockchain has much more to offer, it can be an effective addition to some vital sectors like government, supply chain, healthcare, cyber security and many more...&lt;/p&gt;

</description>
      <category>blockchain</category>
      <category>concept</category>
      <category>motivation</category>
      <category>introduction</category>
    </item>
    <item>
      <title>Getting started with Penetration Testing!</title>
      <dc:creator>Chinmaya Tripathi</dc:creator>
      <pubDate>Fri, 12 Jun 2020 18:14:25 +0000</pubDate>
      <link>https://dev.to/chinmaytrpth2/getting-started-with-penetration-testing-212</link>
      <guid>https://dev.to/chinmaytrpth2/getting-started-with-penetration-testing-212</guid>
      <description>&lt;p&gt;&lt;em&gt;I've always been fascinated by the science behind hacking, the art of exploitation, cracking something, thinking about how it all works. Finding a vulnerability and then exploiting it isn't as easy as it looks like in the videos. Trying to write my first ever blog, I thought of starting it with writing about the field I love the most.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Introduction
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hVNuRhiT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cyberprime.net/wp-content/uploads/2019/03/pentest_icon.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hVNuRhiT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cyberprime.net/wp-content/uploads/2019/03/pentest_icon.png" title="Logo NMAP" alt="NMAP" width="418" height="265"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Penetration testing often called as 'pen testing' has been the most important and rapid growing sectors of cyber security field. With growing data there is growing demand for security to protect it as well and this is where the role of an Ethical hacker comes into play. Pen testing is done by an hacker to crack and find out the vulnerability inside any system, the idea is to get the security professionals act like attackers and crack the system down to find its vulnerability and further help the organization to strengthen it in order to protect it from any real offensive attack. &lt;/p&gt;

&lt;h3&gt;
  
  
  2. Hacking with Ethics -
&lt;/h3&gt;

&lt;p&gt;We know there are good as well as bad people in any field, you as an ethical hacker would do everything by taking the permission from the organization, under the law, though our intention should be to crack the organization's security yet only to strengthen it more, not to use it for any false purposes and this is what differentiates us from the bad one's. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--adnZ73Ok--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://miro.medium.com/max/1050/0%2AdKYJh1XCm9HjXiSH.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--adnZ73Ok--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://miro.medium.com/max/1050/0%2AdKYJh1XCm9HjXiSH.jpg" title="Logo NMAP" alt="NMAP" width="800" height="500"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Alright! Enough about the banal theory, lets get started..&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Prerequisites -
&lt;/h3&gt;

&lt;p&gt;If I'd have to really talk about the requirements in detail, I'd probably have to write another blog for it, but I would like to be as simple and precise telling you the most basic requirements needed for getting started with penetration testing.&lt;/p&gt;

&lt;p&gt;1) &lt;strong&gt;Networking basics&lt;/strong&gt; - You don't have to know everything but basics are very important like - &lt;code&gt;IP&lt;/code&gt;, &lt;code&gt;MAC&lt;/code&gt; Addresses, the OSI Model, specially the &lt;code&gt;TCP&lt;/code&gt;, &lt;code&gt;UDP&lt;/code&gt; and &lt;code&gt;three-way handshake&lt;/code&gt; protocol. Common ports and their protocols and subnetting. File transfer protocols like &lt;code&gt;ftp&lt;/code&gt; and &lt;code&gt;ssh&lt;/code&gt; Having this much knowledge for starters is enough to dive into this field.&lt;/p&gt;

&lt;p&gt;2) &lt;strong&gt;Linux&lt;/strong&gt; - You would probably be setting up your testing lab using either &lt;code&gt;kali linux&lt;/code&gt; or &lt;code&gt;parrot&lt;/code&gt;, these distros have inbuilt tools which are really helpful in carrying out the attacks. Ofcourse you can go ahead and make your own tool and scripts but for starters this is where almost every other newbie starts its journey, you would get your work done and focus more about the methodology behind pen testing rather than worrying about coding the tools and programs to run attacks. Get familiar with basic linux commands like navigating file systems, network commands, starting and stopping services, users and privileges.    &lt;/p&gt;

&lt;p&gt;3) &lt;strong&gt;Programming and Scripting&lt;/strong&gt; - Most important, though not necessary to be god in it, but yes you should have an intermediate level knowledge about any programming language like &lt;code&gt;python&lt;/code&gt;, &lt;code&gt;golang&lt;/code&gt; or &lt;code&gt;ruby&lt;/code&gt; because mostly all the tools are written using these languages. I've seen many people say its not necessary to know any language but not according to me, as someday or the other you will write your own exploits and make tools, so why not to start learning in advance, you can contribute to the community by helping improve on some existing exploits and tools as well. Also, having some knowledge about bash scripting is very useful in post exploitation.&lt;/p&gt;

&lt;p&gt;4) &lt;strong&gt;Hacking Paradigms&lt;/strong&gt; - Even if theoretical but having a good knowledge about basic hacking paradigms is important, for example &lt;code&gt;enumeration&lt;/code&gt;, &lt;code&gt;privilege escalation&lt;/code&gt;, &lt;code&gt;reverse tcp shell&lt;/code&gt;, &lt;code&gt;local&lt;/code&gt;, &lt;code&gt;remote&lt;/code&gt; exploits, maintaining the &lt;code&gt;session&lt;/code&gt;, &lt;code&gt;covering the tracks&lt;/code&gt;. These are some very common things done while exploitation and should be understood.   &lt;/p&gt;

&lt;h3&gt;
  
  
  4. Tools -
&lt;/h3&gt;

&lt;p&gt;There are a ton, I repeat a ton of tools available to begin with, and its really hard to choose between them. But I would list out some of the most basic tools which you'll use executing any attack. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JgPY1i1i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://thehacktoday.com/wp-content/uploads/2017/10/10-Best-Penetration-Testing-Tools-in-Kali-Linux-3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JgPY1i1i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://thehacktoday.com/wp-content/uploads/2017/10/10-Best-Penetration-Testing-Tools-in-Kali-Linux-3.png" title="Logo NMAP" alt="NMAP" width="800" height="423"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;1)&lt;code&gt;Nmap&lt;/code&gt; : An amazing network scanning tool coming with a lot of different modes to scan a given target. You can use this tool to find out all the open ports on the victims machine and plan out your attack from there. An aggressive nmap scan can even list out the available vulnerabilities and exploit hints available if any.&lt;/p&gt;

&lt;p&gt;2)&lt;code&gt;gobuster&lt;/code&gt;/&lt;code&gt;dirbuster&lt;/code&gt; : Mostly used when targeting a web server, both the tools help you get all the directories of an website, from where you can find and target any vulnerable thread and break into the server&lt;/p&gt;

&lt;p&gt;3)&lt;code&gt;hydra&lt;/code&gt;: One of the most powerful tool for brute-force attack. You can use this tool brute force against any login form and easily crack the admin password if they have not set their password hard enough.&lt;/p&gt;

&lt;p&gt;4)&lt;code&gt;metasploit&lt;/code&gt; : Most powerful and widely used with over 7000+ available exploits, Metasploit makes your job way easier. It helps you by providing an exploit for almost every other vulnerability. It is widely used to gain access in a system.  &lt;/p&gt;

&lt;p&gt;&lt;em&gt;All these tools come inbuilt in Kali Linux&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Online platforms to practice -
&lt;/h3&gt;

&lt;p&gt;For starters, you can signup on some platforms like &lt;a href="https://www.hackthebox.com" rel="noopener noreferrer"&gt;Hack The Box&lt;/a&gt; and &lt;a href="https://www.tryhackme.com" rel="noopener noreferrer"&gt;Try Hack Me&lt;/a&gt;, they have some free as well as paid hackable rooms. They even provide a step by step guide and tutorial to start using the tools used for pen testing. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CbvjnZSk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://media0.giphy.com/media/LmNwrBhejkK9EFP504/200.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CbvjnZSk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://media0.giphy.com/media/LmNwrBhejkK9EFP504/200.gif" title="Logo NMAP" alt="NMAP" width="200" height="200"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;h3&gt;
  
  
  6. Maintaining the flow -
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Research&lt;/strong&gt;, &lt;strong&gt;Research&lt;/strong&gt; and &lt;strong&gt;Research!&lt;/strong&gt; I can't emphasize more over this point. The more you read and research the more you come across amazing hacking techniques and walkthroughs, get to know about new vulnerabilities discovered and their patching technique. The never ending process of unraveling a new exploit and sewing the old one, you have to keep learning new techniques and try improvising them. &lt;/p&gt;

&lt;p&gt;To take your skills to the next level you can go for some certifications such as &lt;strong&gt;OSCP&lt;/strong&gt; and &lt;strong&gt;CEH&lt;/strong&gt; by EC-Counsel.    &lt;/p&gt;

&lt;h3&gt;
  
  
  7. Conclusion -
&lt;/h3&gt;

&lt;p&gt;Above all this is the most important thing which has to be in you and that is the motivation and eagerness to learn and explore more about this field. This is one the most ever changing fields of computer Universe and one needs to keep himself updated about all the new tools and exploits available.  &lt;/p&gt;

</description>
      <category>ethicalhacking</category>
      <category>penetrationtesting</category>
      <category>beginners</category>
      <category>cybersecurity</category>
    </item>
  </channel>
</rss>
