前端安全相关面试题

XSS、CSRF、CSP、HTTPS 等前端安全知识

9 个知识点

### 反射型 XSS 恶意脚本通过 URL 参数注入，立即执行。代码解释： - 反射型 XSS 是一次性的，需要用户点击恶意链接 - 服务端未过滤用户输入，直接反射到页面 - 危害：窃取 Cookie、钓鱼、挂马 ### 存储

// ❌ 危险：直接将用户输入插入 DOM
const searchQuery = new URLSearchParams(location.search).get('q');
document.getElementById('result

代码解释： - 转义是最基本的防御手段 - textContent 不会解析 HTML，比 innerHTML 安全 - CSP 可以限制脚本来源，防止内联脚本执行 - HttpOnly Cookie 防止 JavaScript 窃取会

// 1. 转义输出（最重要）
function escapeHtml(text) {
  const map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"':

反射型 XSS：存储型 XSS： DOM 型 XSS：

// 攻击示例
// https://example.com/search?q=<script>alert('XSS')</script>

// 防御：转义输出
function escapeHtml(text) {
  const ma

攻击原理：防御策略：

<!-- 恶意网站 -->
<img src="https://bank.com/transfer?to=attacker&amount=1000" />
<!-- 用户已登录银行网站，请求会自动携带 Cookie -->

攻击示例：防御策略：

<!-- 恶意网站用 iframe 覆盖透明按钮 -->
<iframe src="https://bank.com/transfer" style="opacity:0;position:absolute;"></iframe>
<but

攻击示例：防御策略：

-- 恶意输入：' OR '1'='1
SELECT * FROM users WHERE username = '' OR '1'='1' AND password = ''
-- 绕过密码验证

工作原理：证书类型： | 类型 | 验证级别 | 适用场景 | |------|----------|----------| | DV | 域名验证 | 个人网站 | | OV | 组织验证 | 企业网站 | | EV | 扩展验

1. 客户端发送 Client Hello
2. 服务器返回证书（包含公钥）
3. 客户端验证证书合法性
4. 生成随机数，用公钥加密发送
5. 服务器用私钥解密
6. 双方用随机数生成会话密钥
7. 后续通信使用对称加密

简单请求：预检请求：

// 满足以下条件才是简单请求：
// 1. 方法：GET、HEAD、POST
// 2. Content-Type: text/plain、multipart/form-data、application/x-www-form-urlenc

基本用法：常用指令： | 指令 | 说明 | 示例 | |------|------|------| | default-src | 默认策略 | 'self' | | script-src | 脚本来源 | 'self' 'un

<!-- meta 标签方式 -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' http