[{"data":1,"prerenderedAt":175},["ShallowReactive",2],{"portfolio-en-websec-assistant":3},{"id":4,"title":5,"body":6,"client":159,"date":160,"description":161,"extension":162,"featured":163,"meta":164,"navigation":163,"order":165,"path":166,"seo":167,"stem":168,"tags":169,"thumbnail":173,"__hash__":174},"portfolio_en\u002Fportfolio\u002Fen\u002Fwebsec-assistant.md","WebSec Assistant — Security-awareness browser extension",{"type":7,"value":8,"toc":152},"minimark",[9,14,27,30,33,37,104,108],[10,11,13],"h2",{"id":12},"overview","Overview",[15,16,17,18,22,23,26],"p",{},"WebSec Assistant is a Firefox extension built to raise everyday security awareness inside an organisation. Rather than training users once a year and hoping it sticks, the extension rides along with their browsing and does two things at once: it ",[19,20,21],"strong",{},"protects"," them in the moment — blocking known-bad domains, flagging weak passwords, warning on phishing-prone sites — and ",[19,24,25],{},"teaches"," them in small, context-aware doses, opening topic-specific guides with quizzes and optional audio narration exactly when a risky situation comes up, so the explanation lands while the context is still fresh.",[15,28,29],{},"Each organisation gets its own allow\u002Fdeny rules against a company-scoped backend, so the same extension can be rolled out across different tenants without rebuilding anything.",[15,31,32],{},"The project was featured by IVA (Kungl. Ingenjörsvetenskapsakademien) as a research initiative with commercial and societal potential.",[10,34,36],{"id":35},"what-the-system-does","What the system does",[38,39,40,52,58,68,74,80,86,92,98],"ul",{},[41,42,43,46,47,51],"li",{},[19,44,45],{},"Domain blocking"," — Known-bad URLs are intercepted via the WebExtension ",[48,49,50],"code",{},"webRequest"," API and redirected to a categorised warning page (malware, phishing, spam, or fake news). Dangerous categories require an explicit action to continue",[41,53,54,57],{},[19,55,56],{},"Per-session bypass"," — Users can whitelist a domain for the current tab only, or permanently, straight from the warning page — or jump directly into the matching learning guide",[41,59,60,63,64,67],{},[19,61,62],{},"Password strength tooltip"," — When a password field gets focus, an in-page tooltip powered by ",[48,65,66],{},"zxcvbn"," rates the password on a five-level scale with a colour-coded bar, and can inject the tested value back into the form",[41,69,70,73],{},[19,71,72],{},"Phishing popup on webmail"," — On common webmail domains, a reminder of phishing red flags appears when users are most likely to need it",[41,75,76,79],{},[19,77,78],{},"External-link warning"," — New-tab navigations to external destinations can be flagged so users aren't silently redirected somewhere unexpected",[41,81,82,85],{},[19,83,84],{},"Interactive topic guides"," — Password, phishing, scamming and fake-news guides are delivered as short slide decks with multi-choice quizzes, live visual feedback, Howler-based audio narration and a completion screen",[41,87,88,91],{},[19,89,90],{},"Manual blocklist refresh"," — One-click sync with the organisation's backend, plus a visible timestamp of the last successful update",[41,93,94,97],{},[19,95,96],{},"Bilingual UI"," — Full English and Swedish translations, including extension-store metadata",[41,99,100,103],{},[19,101,102],{},"Configurable"," — Each protection feature (password tooltip, domain blocking, external-link warning, phishing popup) toggles independently",[10,105,107],{"id":106},"tech-stack","Tech stack",[38,109,110,126,132,142],{},[41,111,112,115,116,118,119,118,122,125],{},[19,113,114],{},"Extension:"," Vue, WebExtension APIs (",[48,117,50],{},", ",[48,120,121],{},"storage",[48,123,124],{},"tabs","), Shadow DOM styling (host-page CSS can't leak in), zxcvbn (password scoring), Howler (per-slide audio)",[41,127,128,131],{},[19,129,130],{},"Architecture:"," Long-running background script owns blocklist + whitelist state and talks to the backend; content script renders UI inside Shadow DOM; popup, guide and warning are three separate Vue entry points",[41,133,134,137,138,141],{},[19,135,136],{},"Backend:"," Company-scoped REST API at ",[48,139,140],{},"ubarso.xenolith.se"," for per-tenant blocklist configuration",[41,143,144,147,148,151],{},[19,145,146],{},"Manifest V2",", Firefox-first (Gecko add-on id ",[48,149,150],{},"websecassistant@xenolith.se",")",{"title":153,"searchDepth":154,"depth":154,"links":155},"",2,[156,157,158],{"id":12,"depth":154,"text":13},{"id":35,"depth":154,"text":36},{"id":106,"depth":154,"text":107},"Xenolith AB (research project)","2019-06-01","Firefox extension that protects users from phishing, weak passwords, and scams — and teaches them why, with interactive topic guides and quizzes.","md",true,{},12,"\u002Fportfolio\u002Fen\u002Fwebsec-assistant",{"title":5,"description":161},"portfolio\u002Fen\u002Fwebsec-assistant",[170,171,172],"cybersecurity","vue","gamification","\u002Fimages\u002Fportfolio\u002Fwebsec-assistant-hero.jpg","hNz6_tDIprZcmiDw35tuCcBzZoI8nLv02cn0wydzvRg",1776248145147]