know

安全相关知识

# 1. 安全相关知识

1:SQL 注入、DDos 攻击、DNS 劫持

# 1.1. 1.1 SQL 注入

就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串,最终达到欺骗数据库服务器执行恶意的 SQL 命令,从而达到和服务器进行直接的交互 防御: i)后台进行输入验证,对敏感字符过滤。 ii)使用参数化查询,能避免拼接 SQL,就不要拼接 SQL 语句。

2: XSS,CSRF

3:前端安全知识防止被偷袭

4: https

# 2. xss(跨站脚本攻击) 本质上讲,XSS 是代码注入问题

  1. 反射型
  2. DOM xss
  3. 存储型 xss :

影响:

  1. 利用虚假输入表单骗取用户个人信息
  2. 利用脚本窃取用户的 Cookie 值,被害者在不知情的情况下,帮助攻击者发送恶意请求。
  3. 显示伪造的文章或图片。

防御:

  1. httpOnly: true
  2. 屏蔽尖括号

# 3. csrf:跨站点请求伪造 是 HTTP 问题

利用已通过认证的用户权限更新设定信息等; 利用已通过认证的用户权限购买商品; 利用已通过的用户权限在留言板上发表言论。

防御:

  1. 验证码
  2. 尽量使用 post,少使用 get
  3. 请求来源限制,此种方法成本最低,但是并不能保证 100% 有效
  4. token

# 4. 使用第三方库可能带来的安全风险

  1. 代码注入风险 第三方库可能包含恶意代码,攻击者可通过依赖注入后门、篡改包等方式实现代码执行。

  2. XSS 和 CSRF 漏洞 库中未正确处理用户输入或请求,可能导致跨站脚本攻击(XSS)或跨站请求伪造(CSRF)。

  3. 依赖漏洞 库本身或其依赖存在已知安全漏洞,攻击者可利用这些漏洞进行攻击。

  4. 敏感信息泄露 库可能在日志、错误信息或配置中泄露敏感数据,如 API 密钥、用户信息等。

  5. 供应链攻击 攻击者通过篡改第三方库或其依赖,影响大量下游项目。

  6. 权限提升 某些库可能未经授权访问文件系统、网络等敏感资源,导致权限提升。

  7. 更新滞后 第三方库长期未维护或未及时修复安全问题,易被攻击者利用。

建议:

  • 选择知名、活跃维护的库
  • 定期检查依赖安全性
  • 使用包管理工具的安全审查功能
  • 最小化依赖数量

# 5. 前端防止加载外域脚本的核心方法

  1. 使用 CSP(内容安全策略) 通过设置 Content-Security-Policy 只允许加载指定来源的脚本。

  2. 避免动态插入外部脚本 禁止通过 evalinnerHTMLdocument.write 等方式插入未知来源的脚本。

  3. 校验第三方资源来源 只使用可信域名的第三方脚本,并定期审查其安全性。

  4. 子资源完整性(SRI) 使用 <script> 标签的 integrity 属性校验脚本内容,防止被篡改。

  5. 禁止跨域请求敏感数据 配置 CORS,限制外域访问敏感接口。

  6. 使用 HTTPS

  • 名称和值(Name=Value): 核心键值对,如 sessionId=abc123
  • Expires: 绝对过期时间(GMT),如 Expires=Wed, 21 Oct 2026 07:28:00 GMT
  • Max-Age: 相对过期时间(秒),如 Max-Age=3600(优先于 Expires)
  • Domain: 允许发送 Cookie 的域,如 Domain=.example.com
  • Path: 允许发送 Cookie 的路径前缀,如 Path=/account
  • Secure: 仅在 HTTPS 发送
  • HttpOnly: 禁止 JS 通过 document.cookie 访问,防止 XSS 窃取
  • SameSite: 跨站请求策略
    • Lax(默认,部分跨站允许,如 GET 导航)
    • Strict(完全禁止跨站携带)
    • None(允许跨站;需配合 Secure
  • 可选扩展(部分浏览器支持)
    • Priority: 传输优先级(如 High|Medium|Low
    • Partitioned: 分区 Cookie(CHIPS),如 Partitioned

示例(Set-Cookie):

Set-Cookie: sessionId=abc123; Max-Age=3600; Path=/; Domain=.example.com; Secure; HttpOnly; SameSite=Lax

请求时仅包含“名称=值”对,多个以 ; 分隔,其他属性不随请求发送:

Cookie: sessionId=abc123; theme=dark

# 6.2. 其他说明

  • 会话期 Cookie: 未设置 Expires/Max-Age,随会话结束清除
  • 持久化 Cookie: 设置 Expires 或 Max-Age,直至过期或被清除
  • 大小与数量限制: 单个 Cookie、单域 Cookie 总量均有限制(实现相关)
  • 浏览器存储元数据(如创建时间、上次访问)不属于 Set-Cookie 字段本身

# 7. 如何实现 token 加密(核心方法)

  1. 使用加密算法生成 token

    • 常用如 JWT(JSON Web Token),可用 HMAC 或 RSA 加密签名。
  2. 服务端保存密钥

    • 加密和验证 token 时,密钥只在服务端保存,防止泄露。
  3. token 内容避免敏感信息

    • 不直接在 token 中存储敏感数据,建议只存储用户标识等必要信息。
  4. 传输时使用 HTTPS

    • 保证 token 在网络传输过程中不会被窃取。
  5. 设置有效期与刷新机制

    • token 设置合理过期时间,支持刷新,降低被盗用风险。

# 8. 数字证书简介

数字证书是一种由权威机构(CA,证书颁发机构)签发的电子文件,用于证明公钥的归属和身份合法性。它在网络通信中主要用于加密和身份认证。

# 8.1. 主要内容

  • 持有者信息:如域名、组织名称、邮箱等
  • 公钥:用于加密和验证签名
  • 证书颁发机构信息:CA 的名称及签名
  • 有效期:证书的起止时间
  • 序列号:唯一标识证书
  • 签名算法:如 SHA256、RSA 等

# 8.2. 主要作用

  1. 身份认证:确认服务器或用户身份,防止伪造
  2. 数据加密:配合 SSL/TLS,实现数据传输加密
  3. 数据完整性:防止数据在传输过程中被篡改

# 8.3. 常见类型

  • SSL/TLS 证书:用于网站 HTTPS 加密
  • 代码签名证书:用于软件发布验证
  • 客户端证书:用于用户身份认证

# 8.4. 验证流程

  1. 客户端获取服务器证书
  2. 验证证书是否被 CA 签发及是否有效
  3. 使用证书中的公钥进行加密通信

数字证书是现代互联网安全的基础,保障数据传输的安全与可信。

# 9. 什么是 JWT(JSON Web Token)

  • 定义: 一种开放标准(RFC 7519),用于在各方之间以 JSON 形式安全地传递声明(Claims)的自包含令牌。
  • 结构: Header.Payload.Signature(三段 Base64URL 字符串,用 . 连接)
    • Header: 元数据,如算法 alg、类型 typ
    • Payload: 业务声明,如用户标识、权限、过期等(不可加密,仅编码)
    • Signature: 使用密钥对前两段签名,防篡改

示例:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0IiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNjk5OTk5OTk5LCJleHAiOjE3MDAwMDA1OTksImlzcyI6ImFwaS5leGFtcGxlLmNvbSIsImF1ZCI6ImNsaWVudC0xIn0.
<signature>

# 9.1. 身份验证如何工作(请求-响应流程)

  1. 登录(凭证换令牌)
    • 客户端提交用户名/密码给认证服务
    • 服务端验证通过后生成 JWT:写入必要 claims(如 subiatexpissaud 等),使用密钥(HS256)或私钥(RS256)签名并返回
  2. 携带访问(令牌换资源)
    • 客户端保存 JWT(通常放在内存或受控 Cookie)
    • 访问受保护接口时在请求头带上:Authorization: Bearer <jwt>
  3. 服务端校验(鉴权与放行)
    • 解析 JWT 的三段内容
    • 根据 alg 获取密钥/公钥验证签名(确保未被篡改)
    • 校验标准声明:exp(未过期)、nbfiatissaud
    • 读取业务声明(如 subrole)进行授权控制
    • 校验通过则信任该身份并放行请求

# 9.2. 常见声明(Claims)

  • 注册声明(建议使用)
    • iss: 令牌签发者
    • sub: 令牌主体(通常为用户 ID)
    • aud: 接收方(受众)
    • exp: 过期时间(秒级时间戳)
    • nbf: 生效时间
    • iat: 签发时间
    • jti: 令牌唯一 ID(便于撤销/追踪)
  • 自定义声明
    • role/permissions: 角色或权限
    • 其他业务相关字段(切记不要放敏感信息,如明文密码)

# 9.3. 签名与算法

  • 对称: HS256(HMAC+SHA256,共享密钥,简单但密钥治理要严格)
  • 非对称: RS256(RSA,私钥签名、公钥验签,便于多服务分发公钥)

# 9.4. 刷新与会话管理

  • 短有效期访问令牌(Access Token)+ 长有效期刷新令牌(Refresh Token)
    • 访问令牌过期后,用刷新令牌换新令牌(在专用刷新端点)
    • 刷新令牌应存储更安全(仅后端或受控 Cookie),并可在服务端维护状态用于撤销
  • 撤销策略
    • 黑名单/阻断列表:存储被撤销的 jti 或用户版本号(低频校验或集中网关校验)
    • 版本号(Token Version):用户资料含版本字段,签发时写入;修改密码/登出时版本+1,旧令牌失效
    • 短 TTL:将失效窗口缩小,减轻撤销需求压力

# 9.5. 存储与安全实践

  • 传输层: 只在 HTTPS 下使用(防窃听/中间人)
  • 存储位置:
    • 优先受控 HttpOnly + Secure + SameSite 的 Cookie(防止 XSS 读出和 CSRF)
    • 避免将 JWT 存在 localStorage(容易被 XSS 读取)
  • 校验严格:
    • 强制校验 issaudexpnbfiat,设置合理的时钟偏移容忍
    • 拒绝 alg: none,固定白名单算法
  • 最小化信息: 不放敏感数据;如需机密,使用 JWE(加密)而非仅 JWS(签名)
  • 滚动密钥: 定期轮换密钥/私钥;为旧令牌保留一段过渡期公钥
  • 接口幂等与权限: 令牌仅认证“是谁”,授权还需细粒度权限控制

# 9.6. JWT 的优势与权衡

  • 优势: 自包含、跨域易传递、无状态扩展性强、性能好(无需每次查会话)
  • 权衡:
    • 撤销困难(无状态导致中途作废需要额外机制)
    • 令牌体积较大(每次请求开销)
    • 安全边界在客户端与密钥治理

# 9.7. 最简校验示意(伪代码)

function authenticate(request) {
  const token = readBearerToken(request.headers.Authorization)
  const { header, payload, signature } = decodeJWT(token)
  assertAllowedAlg(header.alg)
  verifySignature(header, payload, signature, getKey(header))
  assert(now() < payload.exp && now() >= (payload.nbf || 0))
  assert(payload.iss === EXPECT_ISS && payload.aud === EXPECT_AUD)
  return { userId: payload.sub, roles: payload.role }
}

# 9.8. 结论

  • JWT 通过“签名防篡改 + 标准声明校验 + 授权逻辑”完成身份验证。
  • 生产环境应配合短 TTL、刷新令牌、撤销机制(黑名单或版本号)、HTTPS 与受控 Cookie,确保安全与可控。
  1. 前端请求设置 在发起跨域请求时,需设置 withCredentials: true(如 XMLHttpRequest 或 fetch):

    fetch('https://域名B.com/api', {
      credentials: 'include'
    })
    
  2. 服务端设置

    Access-Control-Allow-Origin: 域名A地址
    Access-Control-Allow-Credentials: true
    
  3. 域名 B 的 Cookie 必须设置 SameSite=None; Secure,否则不会在跨域请求中携带:

Set-Cookie: key=value; SameSite=None; Secure

# 11. OAuth2.0 简介

OAuth2.0 是一种开放标准的授权协议,允许用户授权第三方应用访问其在某服务上的资源(如用户信息),而无需暴露账号密码。常用于“第三方登录”场景,如微信、支付宝、GitHub 登录。

# 11.1. 授权流程(以第三方登录为例)

  1. 用户点击第三方登录按钮

    • 跳转到授权服务(如微信、支付宝、GitHub)的授权页面。
  2. 用户同意授权

    • 授权服务验证用户身份,并询问是否授权第三方应用访问指定资源。
  3. 授权码回调

    • 用户同意后,授权服务将“授权码(code)”回传到第三方应用的回调地址。
  4. 第三方应用用授权码换取令牌

    • 第三方应用携带授权码、应用凭证等信息,向授权服务请求“访问令牌(access_token)”。
  5. 第三方应用使用令牌访问资源

    • 拿到令牌后,第三方应用可在有效期内访问用户授权的资源(如获取用户信息)。

# 11.2. 核心优势

  • 用户无需向第三方应用暴露账号密码
  • 可细粒度控制授权范围和有效期
  • 支持撤销授权和令牌刷新

# 11.3. 常见授权模式

  • 授权码模式(Authorization Code):最安全,适用于服务端应用
  • 简化模式(Implicit):适用于前端单页应用
  • 密码模式(Resource Owner Password Credentials):仅限高度信任场景
  • 客户端凭证模式(Client Credentials):用于应用自身授权,无用户参与

OAuth2.0 是现代互联网第三方登录和授权的基础协议。

# 12. ## HTTP 无状态,Web 应用如何保持用户登录态

HTTP 协议本身不记录每次请求的用户身份,因此 Web 应用需通过以下方式保持用户登录状态:

  1. Cookie 会话标识

    • 用户登录后,服务端生成唯一的会话 ID(如 sessionId),通过 Set-Cookie 响应头发送给浏览器。
    • 浏览器后续请求自动携带该 Cookie,服务端根据 sessionId 识别用户身份。
  2. Token(令牌)机制

    • 登录后,服务端生成 token(如 JWT),返回给前端。
    • 前端将 token 存储在 Cookie、localStorage 或 sessionStorage,并在后续请求中通过请求头(如 Authorization)携带。
    • 服务端验证 token,识别用户身份。
  3. 服务端会话存储

    • 服务端维护会话数据(如 Redis、内存),通过 Cookie 或 token 关联用户与会话。

总结: Web 应用通过 Cookie 或 token 等机制,将用户身份信息在客户端和服务端之间安全传递,实现登录态的保持。

# 13. 浏览器有同源策略,但是为什么我们可以将静态资源放到 CDN 上,使用不同的域名访问,这不会有跨域限制吗?

之所以还能正常加载,是因为 同源策略对不同资源类型、不同“风险等级”的操作规定了不同的“跨域规则”。 对于“读”脚本、图片、样式表等静态资源,浏览器默认就允许跨域 GET,所以不会触发 CORS 预检,也不会报错。

# 14. CSP(Content Security Policy)可以解决什么问题?

CSP 通过限制 Web 应用程序能够加载和执行的内容,来减少恶意攻击的成功率。具体来说,CSP 允许 Web 应用程序管理员定义哪些来源可以加载资源和运行 JavaScript 等代码。这些源可以是域名、协议或端口号等。 CSP 的工作流程如下:

  1. 客户端请求 Web 页面。
  2. 服务器返回 Web 页面,并在 HTTP 响应头中添加 CSP 头部。
  3. 浏览器检查 CSP 头部,并根据规则限制加载和执行资源。
  4. 如果加载或执行资源不符合规则,浏览器会阻止加载或执行。

# 15. 什么是点击劫持?如何防范点击劫持?

点击劫持是一种视觉欺骗的攻击手段,攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中,并将 iframe 设置为透明,在页面中透出一个按钮诱导用户点击。

我们可以在 http 相应头中设置 X-FRAME-OPTIONS 来防御用 iframe 嵌套的点击劫持攻击。通过不同的值,可以规定页面在特 定的一些情况才能作为 iframe 来使用。

# 16. WebSocket 的安全问题及应对措施

# 16.1. 常见安全问题

  1. 无加密传输 使用 ws:// 协议时,数据明文传输,易被窃听和篡改。

  2. 跨站 WebSocket 劫持 恶意网站可发起 WebSocket 连接,利用用户已登录状态进行操作。

  3. 身份认证与鉴权缺失 WebSocket 建立后,若无有效身份校验,攻击者可伪造请求。

  4. 数据注入与 XSS 未对消息内容做校验,可能被注入恶意脚本。

  5. DoS 攻击 大量连接或恶意消息可导致服务端资源耗尽。

  6. CSRF 风险 WebSocket 连接可被第三方网站利用,发起跨站请求。

# 16.2. 应对措施

  1. 使用 wss:// 加密协议 通过 TLS 加密 WebSocket 通信,防止窃听和篡改。

  2. 严格身份认证与鉴权 建立连接时校验用户身份,定期验证令牌或 session。

  3. 来源校验(Origin) 服务端校验请求头中的 Origin,拒绝非法来源的连接。

  4. 消息内容校验与过滤 对接收和发送的数据进行格式校验,防止注入攻击。

  5. 连接数与消息速率限制 限制单 IP 或用户的连接数和消息频率,防止 DoS 攻击。

  6. 关闭不必要的跨域 不允许任意网站建立 WebSocket 连接,限制允许的来源。

  7. 定期断开空闲连接 清理长时间无活动的连接,释放资源。

总结: WebSocket 安全需从加密、认证、校验、限流等多方面综合防护,确保数据和服务安全。

SameSite 是 Cookie 的一个属性,用于限制第三方网站在跨站请求时携带该 Cookie,从而防止 CSRF 等安全问题。

  • SameSite=Lax(默认):仅在部分跨站请求(如 GET 导航)时携带 Cookie,普通跨域 POST/PUT/DELETE 不携带。
  • SameSite=Strict:完全禁止跨站请求携带 Cookie,只有同源请求才会带上。
  • SameSite=None:允许跨站请求携带 Cookie,但必须配合 Secure 属性,仅在 HTTPS 下生效。

作用: 提升 Cookie 的安全性,防止跨站请求伪造(CSRF)等攻击。

# 18. 网络劫持

  1. DNS 劫持(涉嫌违法):修改运行商的 DNS 记录,重定向到其他网站。DNS 劫持是违法的行为,目前 DNS 劫持已被监管,现在很少见 DNS 劫持
  2. HTTP 劫持:前提有 HTTP 请求。因 HTTP 是明文传输,运营商便可借机修改 HTTP 响应内容(如加广告)。

# 19. 中间人攻击(Man-in-the-Middle, MITM)简介

中间人攻击是一种网络攻击方式,攻击者在用户与服务器之间“中间”截获、篡改或伪造双方通信内容。攻击者可以窃取敏感信息(如账号、密码、Cookie),甚至修改数据,造成信息泄露或欺诈。

# 19.1. 常见场景

  • 攻击者伪装成 Wi-Fi 热点,拦截用户与网站的通信
  • 劫持 DNS,篡改访问目标
  • 拦截 HTTP/HTTPS 流量,窃取或篡改数据
  • ARP 欺骗:在局域网中,攻击者伪造 ARP 响应,将自己的 MAC 地址伪装成目标服务器的地址,从而拦截网络流量。

# 19.2. 防范措施

  • 使用 HTTPS 加密通信,防止数据被窃听和篡改
  • 校验数字证书合法性,防止伪造证书
  • 避免连接不可信网络,定期更新系统和浏览器
  • 对敏感操作进行多因素认证
  • 使用虚拟专用网络(VPN):在不安全的网络环境下,使用 VPN 可以加密所有的网络流量,从而保护数据的安全性。
  • 定期更新:保持操作系统、浏览器和所有相关软件的最新版本,以修复已知的安全漏洞。

总结: 中间人攻击危害极大,需通过加密、认证等多重手段防护。

  • 不同主域(example.com 与 example.org): 不能直接共享。浏览器按“可注册域 eTLD+1”隔离,跨主域无法设置/读取彼此的 Cookie。
  • 同主域的子域之间(a.example.com 与 b.example.com): 可以共享。服务端设置 Set-Cookie: ...; Domain=.example.com; Path=/,两者均会携带该 Cookie。
  • 顶级域/TLD(.com、.cn): 不能设置为 Domain=.com 这类公共后缀(受 Public Suffix List 限制)。
  • 端口不同: 不影响。Cookie 不区分端口;但 Secure 仅在 HTTPS 发送。
  • SameSite 影响: 跨站请求若需携带 Cookie,需设置 SameSite=None; Secure,且受浏览器第三方 Cookie 策略影响(可能被阻止)。

# 20.1. 跨主域的替代方案

  • SSO 跳转: 通过统一认证域(如 auth.example.com)重定向携带临时码,在各域换取本域 Cookie。
  • 后端转发/共享会话: 各域后端基于令牌或会话存储统一校验。
  • 前端协作: postMessage + 后端换票,不直接共享 Cookie。
  • Storage Access API / 第三方 Cookie: 受限且逐步收紧,不推荐依赖。

结论:Cookie 只能在同一可注册主域的子域间共享;跨不同主域需要借助 SSO/令牌等机制实现登录状态传递。

# 21. 静态资源完整性校验(Subresource Integrity, SRI)

  • 作用: 确保外链或 CDN 的脚本/样式未被篡改。浏览器会校验资源内容与页面声明的哈希是否一致,不一致则阻止加载。
  • 核心字段:
    • integrity: 资源哈希,格式:算法-Base64哈希,可并列多个算法
    • crossorigin: 跨域资源需设置,否则可能因 CORS 失败导致 SRI 失效(常用 anonymous

# 21.1. 使用示例

<!-- JS -->
<script
  src="https://cdn.example.com/app.min.js"
  integrity="sha384-Base64HashHere"
  crossorigin="anonymous"
></script>

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://cdn.example.com/app.min.css"
  integrity="sha384-Base64HashHere"
  crossorigin="anonymous"
/>
  • 推荐算法顺序:sha384sha512(更安全且兼容好)
  • 同时提供多个算法(可选):integrity="sha384-... sha512-..."

# 21.2. 生成哈希

  • Node.js
# 生成 sha384
node -e "const fs=require('fs');const c=fs.readFileSync('dist/app.min.js');const h=require('crypto').createHash('sha384').update(c).digest('base64');console.log('sha384-'+h)"
  • OpenSSL
openssl dgst -sha384 -binary dist/app.min.js | openssl base64 -A | sed 's/^/sha384-/'
  • 构建工具插件(推荐自动化)
    • Webpack: webpack-subresource-integrity
    • Vite: vite-plugin-subresource-integrity
    • Rollup: rollup-plugin-sri

# 21.3. 与 CSP 联用(更安全)

Content-Security-Policy: script-src 'self' https://cdn.example.com; style-src 'self' https://cdn.example.com
  • 使用 SRI 的同时收紧 script-srcstyle-src 来源白名单
  • 避免使用 'unsafe-inline',改用 nonce/hash 或外链+SRI

# 21.4. 常见注意点

  • 跨域必须配合 crossorigin:CDN 响应需带 Access-Control-Allow-Origin(通常为 *),否则 SRI 校验会失败。
  • 版本变更即哈希变更:资源内容任何改动都会导致哈希变化,需自动化更新 HTML。
  • 动态图(如运行时注入)不适合 SRI:SRI 只针对静态文件;动态拼接脚本应改为构建时产物。
  • HTTP/2 Push 与预加载:使用 <link rel="preload"> 不影响 SRI,但最终引用仍需带 integrity
  • Service Worker:离线缓存前也应在安装阶段校验资源完整性(可在 SW 内自查哈希)。

# 21.5. 失败处理(可选降级)

<script
  src="https://cdn.example.com/app.js"
  integrity="sha384-..."
  crossorigin="anonymous"
  onerror="this.remove();var s=document.createElement('script');s.src='/app.js';document.head.appendChild(s)"
></script>
  • 若 CDN 资源因 SRI 失败,回退到同源备份。

# 21.6. 结论

  • 为所有外链静态资源启用 SRI,并在构建阶段自动生成 integrity
  • 配合 crossorigin 与严格的 CSP,可显著降低供应链与 CDN 篡改风险。

用户想了解 iframe 的安全性,并要求以 Markdown 格式输出。我需要搜索相关信息,然后整理成 Markdown 格式的文档。

toolName: web_search

status: success

query: iframe 安全性问题与最佳实践

# 22. iframe 安全指南

# 22.1. 什么是 iframe

iframe(内联框架)是 HTML 中的一个元素,允许在当前网页中嵌入其他网页内容。虽然 iframe 能够为网页带来更丰富的内容和功能,但同时也带来了一系列安全隐患。

# 22.2. iframe 的安全风险

  1. 点击劫持(Clickjacking):攻击者可以将目标网站嵌入到透明的 iframe 中,诱导用户在不知情的情况下点击,从而执行恶意操作。

  2. 第三方内容风险:iframe 中的内容由第三方提供,默认情况下不受我们控制,可能会运行恶意 JavaScript 脚本、Flash 插件或弹出对话框。

  3. 域名劫持风险:如果 iframe 中的域名过期被恶意攻击者抢注,或第三方网站被黑客攻破,iframe 中的内容可能被替换为恶意内容。

  4. 资源消耗:iframe 是能耗较高的 HTML 元素,过多使用可能影响页面性能。

# 22.3. 防护措施

  1. 服务端 HTTP 响应头设置

# 22.3.1. X-Frame-Options

这个 HTTP 响应头可以控制页面是否允许在 iframe 中被加载

# 不允许被嵌入
X-Frame-Options: deny

# 只允许同源页面嵌入
X-Frame-Options: sameorigin

# (已废弃)只允许指定来源的页面嵌入
X-Frame-Options: allow-from www.example.com

# 22.3.2. Content-Security-Policy (CSP)

CSP 提供了更强大和灵活的安全控制:

# 不允许被嵌入
Content-Security-Policy: frame-ancestors 'none'

# 只允许同源页面嵌入
Content-Security-Policy: frame-ancestors 'self'

# 只允许指定来源的页面嵌入
Content-Security-Policy: frame-ancestors www.example.com
  1. 客户端 JavaScript 防护(Framekiller)

在客户端使用 JavaScript 代码防止页面被嵌入

// 基本版本
if(top != self) {
    top.location.replace(location);
}

// 增强版本
<style> html{display:none;} </style>
<script>
    if(self == top) {
        document.documentElement.style.display = 'block';
    } else {
        top.location = self.location;
    }
</script>
  1. iframe 的 sandbox 属性

使用 sandbox 属性可以对 iframe 进行一系列限制,提高安全性

<iframe src="example.html" sandbox="allow-scripts allow-forms"></iframe>

常用的 sandbox 值:

  • allow-scripts:允许执行脚本
  • allow-forms:允许提交表单
  • allow-same-origin:允许同源访问
  • allow-top-navigation:允许导航到顶级窗口

# 22.4. 最佳实践

  1. 只嵌入可信任的来源:尽量只嵌入你信任的网站内容。

  2. 使用 HTTPS:确保主页面和嵌入的 iframe 页面都使用 HTTPS 协议。

  3. 设置适当的 CSP 策略:使用 Content-Security-Policy 限制 iframe 可以加载的内容。

  4. 使用 sandbox 属性:根据需要为 iframe 设置 sandbox 属性,只授予必要的权限。

  5. 避免过度使用:iframe 会消耗较多资源,应适度使用

  6. 考虑替代方案:对于某些场景,可以考虑使用 AJAX、Web Components 等现代技术替代 iframe。

# 23. HTTPS 有哪些优点?

HTTPS 并非绝对安全,掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击,但 HTTPS 仍是现行架构下最安全的解决方案,主要有以下几个好处:

  1. 使用 HTTPS 协议可认证用户和服务器,确保数据发送到正确的客户机和服务器。
  2. HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,要比 HTTP 协议安全,可防止数据在传输过程中不被窃取、修改,确保数据的完整性。
  3. HTTPS 协议是现行架构下最安全的解决方案,它规范了数据传输的安全通道,确保数据在传输过程中不被窃取、修改,确保数据的完整性。
  4. HTTPS 协议可提供身份认证,确保服务器可信,防止伪造和篡改数据。

# 24. 前端的常规安全策略

  1. 定期请第三方机构做安全性测试,漏洞扫描
  2. 使用第三方开源库做上线前的安全测试,可以考虑融合到 CI 中
  3. code review 保证代码质量
  4. 默认项目中设置对应的 Header 请求头,如 X-XSS-Protection、 X-Content-Type-Options 、X-Frame-Options Header、Content-Security-Policy 等等
  5. 对第三方包和库做检测:NSP(Node Security Platform),Snyk
上次更新: