VAPT Report Builder

Section 01

Report setup

Cover page details, logos and document control. These appear on the title page and header of every page.

Engagement

Report title

Assessment type

Client / organisation *

Document ref no.

Version

Report date

Testing start date

Testing end date

Classification

Logos

Client logo (appears top-right of cover + header)

Your company logo (appears top-left of cover)

Click to upload your logo

Your company / tester name

Document control

Prepared by

Reviewed / approved by

Contact email

Distribution list

Section 02

Executive summary

The non-technical overview for leadership. Severity counts and the overall risk rating are calculated automatically from your findings.

Overall risk rating

Rating (auto — override if needed)

Summary narrative

Executive summary text

Section 03

Scope & methodology

What was tested, how, and against which standards. Sensible defaults are pre-filled — edit as needed.

In-scope assets

Add asset (URL, IP, app name) then Enter

Testing approach

Testing method

Environment

Methodology narrative

Standards & frameworks

Tools used

Add tool then Enter

Quick add:

Section 04

Findings

Add one entry per vulnerability. Findings are auto-numbered and sorted by severity in the report. Attach screenshots as evidence.

`; const blob=new Blob(['\ufeff'+doc],{type:'application/msword'}); dl(blob,(sanitize(state.clientName)||'VAPT')+'-Report.doc'); toast('Word file downloaded. Word may warn the format differs — that is expected; choose Yes to open.'); }catch(e){toast('Word export failed: '+(e&&e.message||e));} } function saveJSON(){ const clean={...state};clean.findings=state.findings.map(f=>{const{_open,...r}=f;return r;}); const blob=new Blob([JSON.stringify(clean,null,2)],{type:'application/json'}); dl(blob,(sanitize(state.clientName)||'VAPT')+'-draft.json'); toast('Draft saved as JSON — reload it anytime'); } function loadJSON(input){ const file=input.files[0];if(!file)return; const r=new FileReader(); if(state.findings.length&&!confirm('Load this draft? It will replace the report currently open.')){input.value='';return;} r.onerror=()=>{toast('Could not read that file');input.value='';}; r.onload=e=>{ try{ const d=JSON.parse(e.target.result); if(!adopt(d)){toast('That file is not a report draft');return;} save(); toast('Draft loaded'); }catch(err){ toast('Could not read that file — is it a .json draft?'); } finally{ input.value=''; } }; r.readAsText(file); } /* ---------------- helpers ---------------- */ function esc(t){return(t==null?'':String(t)).replace(/&/g,'&').replace(//g,'>');} /* Attribute context: quotes MUST go too. Without this, an imported draft could break out of src="…" or out of the JS string inside an inline handler. */ function escA(t){return esc(t).replace(/"/g,'"').replace(/'/g,''').replace(/`/g,'`');} /* Only ever render images we know are inline raster data. Blocks javascript:, data:text/html, and remote trackers arriving via an imported draft. */ const IMG_RE=/^data:image\/(png|jpe?g|gif|webp|svg\+xml);base64,[A-Za-z0-9+/=\s]+$/i; function safeImg(src){return typeof src==='string'&&IMG_RE.test(src.trim());} function sanitize(t){return(t||'').replace(/[^a-z0-9]+/gi,'-').replace(/^-|-$/g,'').slice(0,40);} function uid(){return'f'+Math.random().toString(36).slice(2,9);} function dl(blob,name){const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(a.href),1000);} let toastT;function toast(m){const t=document.getElementById('toast');t.textContent=m;t.classList.add('show');clearTimeout(toastT);toastT=setTimeout(()=>t.classList.remove('show'),2200);} function refreshAll(){ bindFields();labelFields();wireDropZones();renderChips('asset');renderChips('tool');renderStandards();renderFindings();renderNav();renderSumStrip(); renderLogo('clientLogo');renderLogo('vendorLogo'); document.querySelectorAll('[data-f]').forEach(el=>{const f=el.dataset.f;if(state[f]!==undefined)el.value=state[f];}); } /* ---------------- accessibility & drag-drop ---------------- The file had 36 elements and not one `for=`, so every control was announced as unlabelled. Rather than hand-edit each one, pair each .field's label with the control that follows it and generate the ids. Runs again after every findings re-render so dynamic fields are covered too. */ let lblSeq=0; function labelFields(){ document.querySelectorAll('.field > label').forEach(l=>{ if(l.htmlFor)return; let el=l.nextElementSibling; while(el&&!/^(INPUT|SELECT|TEXTAREA|BUTTON)$/.test(el.tagName))el=el.nextElementSibling; if(!el)return; if(el.tagName==='BUTTON'){ if(!el.getAttribute('aria-label'))el.setAttribute('aria-label',l.textContent.trim()); return; } if(!el.id)el.id='fld'+(++lblSeq); l.htmlFor=el.id; }); } function wireDropZones(){ [['clientLogoDrop','clientLogo'],['vendorLogoDrop','vendorLogo']].forEach(([dropId,key])=>{ const d=document.getElementById(dropId); if(!d||d.__wired)return; d.__wired=true; ['dragenter','dragover'].forEach(ev=>d.addEventListener(ev,e=>{e.preventDefault();d.style.borderColor='var(--accent)';})); ['dragleave','drop'].forEach(ev=>d.addEventListener(ev,e=>{e.preventDefault();d.style.borderColor='';})); d.addEventListener('drop',e=>{ const f=e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files[0]; if(f)loadLogo({files:[f],value:''},key); }); }); } /* ---------------- autosave ---------------- Everything used to live in memory only: one refresh and hours of consultant work were gone, with no warning. Now the draft is written to localStorage on every edit (debounced) and restored on load. Screenshots can be large, so a quota failure degrades to "text only" rather than losing the whole draft. */ const LS_KEY='vapt-report-builder-draft-v1'; let dirty=false, saveT; function serialise(withEvidence){ const c={...state}; c.findings=state.findings.map(f=>{const{_open,...r}=f;return withEvidence?r:{...r,evidence:[]};}); if(!withEvidence){c.clientLogo='';c.vendorLogo='';} return JSON.stringify(c); } function save(){ clearTimeout(saveT); saveT=setTimeout(()=>{ try{ localStorage.setItem(LS_KEY,serialise(true)); dirty=false; } catch(e){ try{ localStorage.setItem(LS_KEY,serialise(false)); dirty=false; toast('Autosaved without screenshots — browser storage is full'); } catch(e2){ dirty=true; } } },600); } function restore(){ let raw=null; try{ raw=localStorage.getItem(LS_KEY); }catch(e){ return false; } if(!raw)return false; try{ const d=JSON.parse(raw); if(!adopt(d))return false; toast('Restored your last draft'); return true; } catch(e){ return false; } } function clearDraft(){ if(!confirm('Start a new report? Your current draft will be cleared from this browser.'))return; try{ localStorage.removeItem(LS_KEY); }catch(e){} location.reload(); } /* Validate into a FRESH object. Object.assign(state,d) used to mutate state before validating, and reached the __proto__ setter on a hostile file. */ function adopt(d){ if(!d||typeof d!=='object'||Array.isArray(d))return false; const defaults=JSON.parse(DEFAULTS); const next={...defaults}; Object.keys(defaults).forEach(k=>{ if(k==='__proto__'||k==='constructor'||k==='prototype')return; if(!Object.prototype.hasOwnProperty.call(d,k))return; const v=d[k], want=Array.isArray(defaults[k])?'array':typeof defaults[k]; if(want==='array'){ if(Array.isArray(v)) next[k]=v; } else if(typeof v===want) next[k]=v; }); next.findings=(Array.isArray(d.findings)?d.findings:[]).filter(f=>f&&typeof f==='object').map(f=>({ id:uid(), /* never trust an imported id */ title:String(f.title||''), severity:sevKey(f.severity), cvss:String(f.cvss||''), cvssVector:String(f.cvssVector||''), category:String(f.category||''), asset:String(f.asset||''), status:String(f.status||'Open'), description:String(f.description||''), impact:String(f.impact||''), steps:String(f.steps||''), remediation:String(f.remediation||''), references:String(f.references||''), evidence:(Array.isArray(f.evidence)?f.evidence:[]).filter(e=>e&&safeImg(e.data)) .map(e=>({data:e.data,name:String(e.name||'').slice(0,120)})) })); if(!safeImg(next.clientLogo))next.clientLogo=''; if(!safeImg(next.vendorLogo))next.vendorLogo=''; Object.keys(state).forEach(k=>{delete state[k];}); Object.assign(state,next); refreshAll(); return true; } window.addEventListener('beforeunload',e=>{ if(dirty){ e.preventDefault(); e.returnValue=''; } }); /* ---------------- init ---------------- */ if(!restore()){ renderNav();bindFields();renderChips('asset');renderChips('tool');renderStandards();renderFindings();renderSumStrip(); } labelFields();wireDropZones();