https://fe-interview.pangcy.cn/tags/xss%E9%98%B2%E6%8A%A4/Recent content in XSS防护 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-47/Tue, 04 Mar 2025 07:00:27 +0000https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-47/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考查候选人以下能力维度：</p> <ol> <li><strong>安全防护意识</strong>：对XSS攻击原理及前端安全防护的认知深度</li> <li><strong>框架原理理解</strong>：对Vue模板编译机制及指令工作原理的掌握程度</li> <li><strong>工程化思维</strong>：对防御性编程和代码健壮性的实践能力</li> <li><strong>技术方案设计</strong>：针对特定场景提出合理替代方案的架构能力</li> </ol> <p>具体技术评估点：</p> <ul> <li>XSS攻击的触发条件与注入路径</li> <li>Vue模板编译中的HTML转义机制</li> <li>内容安全策略（CSP）的配置应用</li> <li>第三方净化库的选用与集成</li> <li>框架设计边界与安全责任的划分</li> </ul> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点优先级">关键知识点优先级 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>XSS防御机制 &gt; 模板编译原理 &gt; 框架设计哲学</p> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li> <p><strong>XSS风险根源</strong>：</p> <ul> <li><code>v-html</code>底层使用<code>innerHTML</code>直接注入原始HTML</li> <li>恶意载荷可通过<code>&lt;script&gt;</code>执行或事件属性触发（如<code>onerror=&quot;alert(1)&quot;</code>）</li> <li>攻击向量包括用户输入、第三方接口数据等不可信源</li> </ul> </li> <li> <p><strong>Vue模板保护机制</strong>：</p> <div class="prism-codeblock "> <pre id="753c9d3" class="language-javascript "> <code>// 普通插值自动HTML转义 {{ userInput }} =&gt; 转义为文本节点 // v-html跳过转义直接解析 &lt;div v-html=&#34;rawHTML&#34;&gt;&lt;/div&gt; =&gt; 创建为DOM元素</code> </pre> </div> </li> <li> <p><strong>框架设计考量</strong>：</p> <ul> <li>HTML净化需要上下文感知（如白名单规则差异）</li> <li>安全策略可能随业务场景变化（CMS系统 vs 代码编辑器）</li> <li>保持框架核心体积最小化原则</li> </ul> </li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>误认为前端渲染可完全避免XSS（忽略DOM型XSS）</li> <li>混淆客户端净化与服务器端验证的职责边界</li> <li>过度依赖黑名单过滤导致防护失效（如未处理<code>&lt;svg onload&gt;</code>）</li> </ul> <hr> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p><strong>安全漏洞</strong>：</p> <ol> <li>未过滤的HTML注入导致脚本执行</li> <li>事件处理器属性携带恶意代码</li> <li>资源加载劫持（如<code>&lt;img src=x onerror&gt;</code>）</li> </ol> <p><strong>替代方案</strong>：</p> <ol> <li> <p><strong>模板插值</strong>：自动HTML实体编码</p> <div class="prism-codeblock "> <pre id="82c664c" class="language-vue "> <code>&lt;div&gt;{{ untrustedContent }}&lt;/div&gt; // 自动转义&lt; &gt; &amp;等字符</code> </pre> </div> </li> <li> <p><strong>组件封装</strong>：使用渲染函数控制内容</p>https://fe-interview.pangcy.cn/docs/network/network-21/Tue, 04 Mar 2025 09:31:00 +0000https://fe-interview.pangcy.cn/docs/network/network-21/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考核候选人的<strong>Web安全防御体系设计能力</strong>，涉及三个核心维度：</p> <ol> <li><strong>XSS攻击类型辨析</strong>：区分反射型、存储型、DOM型XSS的攻击原理与威胁场景</li> <li><strong>CSP策略机制</strong>：理解内容安全策略的白名单控制原理及部署方式</li> <li><strong>纵深防御思维</strong>：掌握输入过滤与输出编码的协同防御模式及其互补关系</li> </ol> <p>具体技术评估点包括：</p> <ul> <li>XSS三类型攻击载荷的存储位置与触发方式差异</li> <li>CSP指令集对脚本加载源的限制机制（script-src/unsafe-inline控制）</li> <li>不同上下文环境（HTML/JS/CSS）的输出编码策略选择</li> <li>CSP nonce/hash在安全执行内联脚本中的应用</li> <li>防御方案如何兼顾功能可用性与安全性</li> </ul> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>CSP白名单 &gt; XSS类型差异 &gt; 输出编码策略 &gt; 输入验证</p> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p><strong>XSS类型本质差异</strong>：</p> <ul> <li>反射型XSS：恶意脚本通过URL参数注入，服务端未过滤直接返回页面</li> <li>存储型XSS：攻击载荷持久化存储于服务器（如评论系统），页面渲染时触发</li> <li>DOM型XSS：完全客户端执行，通过修改DOM树触发（如location.hash）</li> </ul> <p><strong>CSP白名单机制</strong>：</p> <div class="prism-codeblock "> <pre id="199edd7" class="language-nginx "> <code># Nginx配置示例 Content-Security-Policy: default-src &#39;self&#39;; script-src &#39;self&#39; https://trusted.cdn.com; style-src &#39;none&#39;; object-src &#39;none&#39;; report-uri /csp-report;</code> </pre> </div> <ul> <li><code>script-src</code>限制脚本加载源，禁用<code>unsafe-inline</code>可阻止内联脚本</li> <li>通过<code>nonce-{随机值}</code>或<code>sha256-{哈希值}</code>允许特定内联脚本</li> <li>违规行为通过report-uri上报监控系统</li> </ul> <p><strong>联合防御方案</strong>：</p> <ol> <li>输入过滤：服务端对用户输入进行合法性校验（如正则过滤&lt;&gt;&rsquo;&ldquo;等危险字符）</li> <li>输出编码：根据输出位置采用不同编码策略（HTML实体编码、JavaScript Unicode转义）</li> <li>CSP兜底：防止前两层防御失效时的脚本执行</li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>仅依赖输入过滤而忽略输出编码（无法防御编码绕过场景）</li> <li>错误配置<code>default-src 'self'</code>却未限制object-src导致插件漏洞</li> <li>未处理JSONP端点导致CSP白名单被绕过</li> </ul> <hr> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>三种XSS的核心差异在于攻击载荷的存储位置与触发方式：</p> <ul> <li><strong>反射型</strong>通过URL参数注入，非持久化，需要诱导点击</li> <li><strong>存储型</strong>将恶意代码保存在服务端，持续影响所有访问者</li> <li><strong>DOM型</strong>完全在客户端解析执行，不经过服务端</li> </ul> <p>CSP通过白名单机制控制资源加载：</p> <ol> <li>设置HTTP响应头的<code>Content-Security-Policy</code>字段</li> <li>使用<code>script-src</code>指令限制脚本来源，禁止内联脚本（除非使用nonce或hash）</li> <li>通过<code>connect-src</code>限制AJAX请求源，防止数据泄露</li> </ol> <p>联合防御方案需多层级配合：</p>