Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

  • 工程能力

  • 应用基础

  • 专业领域

    • 服务端

    • 跨端技术

    • Web IDE

    • 中后台

    • 动效渲染

    • 可视化

    • 埋点监控

    • 多媒体

    • 桌面技术

    • 游戏互动

    • 编辑器

    • 虚拟化与容器化

      • 聊聊前端沙箱
        • 1. 沙箱是什么?
        • 2. 前端哪些场景需要用到沙箱?
        • 3. 如何实现前端沙箱?
    • 设计系统

  • 业务场景

  • 大前端
  • 专业领域
  • 虚拟化与容器化
gahing
2023-06-20
目录

聊聊前端沙箱草稿

本文是对 一文彻底搞懂前端沙箱 (opens new window) 一文的精读,并进行部分内容补充

内容概要

  1. 沙箱是什么?
  2. 前端哪些场景需要用到沙箱?
    1. 业界应用举例
    2. 业务场景发散
  3. 怎么实现前端沙箱?
    1. 关注点
    2. web 和 node 的差异
    3. 技术实现
    4. 如何避免安全问题?
  4. 如何避免动态执行脚本问题?

# 1. 沙箱是什么?

一种虚拟容器,可以安全运行不受信任的程序,且不影响外部宿主环境。 https://en.wikipedia.org/wiki/Sandbox_(computer_security)

核心能力:

  • 环境隔离
  • 宿主安全
  • 程序不可枚举

沙箱范围大至操作系统层级(VMware、Docker),小至飞书文档的网页内嵌功能

# 2. 前端哪些场景需要用到沙箱?

  • 业界应用举例
    • CodeSandbox
    • 小程序
    • 微前端
  • 业务场景发散(团队讨论)
    • Ultraman 自动化测试
    • 发文-微前端

# 3. 如何实现前端沙箱?

核心关键点:作用域隔离、宿主能力限制

Web 关注点:

  • 作用域隔离
  • 样式隔离

作用域:

  • proxy、闭包:基于浏览器的 api 进行隔离,容易被绕过
  • iframe:
  • ShadowRealm:提供独立的运行环境,还在草稿阶段 https://tc39.es/proposal-shadowrealm/

样式:

  • ShadowDOM:可以将某个 DOM 节点变成隔离节点,该隔离节点的样式和外部 DOM 树完全独立,相互不影响
  • iframe
  • CSS Module
  • namespace
  • Dynamic StyleSheet
  • css in js

Node 关注点:

  • 作用域隔离
  • 线程隔离,IO 隔离

node 提供内置的模块 vm ,代码直接运行在 v8 ,实现执行环境隔离

存在的问题:

  • 可以访问 process 对象

vm2

如何避免安全问题 白名单机制

编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
现代编辑器实现要点
设计语言

← 现代编辑器实现要点 设计语言→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式