html在线环境无真正安全隔离，sandbox需正确配置（如sandbox=""）才禁脚本，allow-scripts不放行内联事件；self.issecurecontext为false时web crypto等api必报securityerror；csp与sandbox须分层叠加防护。
HTML在线运行环境（如CodePen、JSFiddle）本身不提供真正的安全隔离，所谓“沙箱”只是浏览器级的轻量限制，sandbox属性开错、CSP配置缺失、或误信self.isSecureContext为true，都可能让敏感API静默失效或意外放行。
为什么sandbox加了却还是能执行alert()
因为没加——或者加得不对。空值sandbox=""或sandbox（无值）才真正禁用脚本；而漏写该属性，等同于完全开放。更常见的是开发者写了sandbox="allow-scripts"，却误以为内联事件（如onclick）或<script>alert(1)</script>也能跑，其实它们仍被拦截。
-
sandbox必须写在<iframe></iframe>标签里，动态赋值iframe.sandbox = "allow-scripts"无效 -
allow-scripts只放行<script src="xxx"></script>，不恢复eval()、javascript:void(0)、onerror等 - 如果控制台执行
document.querySelector('iframe').sandbox返回[]，说明权限全锁死，连alert()都不报错，直接丢弃
self.isSecureContext为false时哪些API一定不可用
Web Crypto、navigator.mediaDevices.getUserMedia()、navigator.clipboard.readText()、Service Worker 注册等，只要调用就会抛SecurityError。这不是兼容性问题，是浏览器强制拦截——在线环境用data:或沙箱iframe加载代码时，self.isSecureContext必为false，哪怕父页是HTTPS。
- 不要用
try/catch兜底：错误发生时用户已卡住，应提前用if (!self.isSecureContext) { /* 禁用按钮、提示文案 */ }阻断UI交互 -
localhost和127.0.0.1可绕过，但file://、私有IP（如192.168.x.x）不行 - CodePen的“Debug View”是独立HTTPS页，
self.isSecureContext为true；但Editor模式下仍是false，别混淆
CSP与sandbox不是互备，而是分层叠加
sandbox管iframe内部脚本是否解析，CSP管页面所有资源加载行为。两者缺一不可：开了sandbox="allow-scripts"，若没配CSP，外链脚本仍可fetch()任意域名；反之，CSP再严，若sandbox没设，iframe内脚本就能读写父页localStorage甚至跳转top.location。
- 父页CSP对iframe内脚本的子资源请求有效（如
script-src限制其import()目标），但对其DOM操作无效 -
sandbox="allow-scripts allow-same-origin"等于废掉沙箱：同源时可读父页cookie、发同源fetch、覆盖window.parent - 真实场景只从
sandbox="allow-scripts"起步，每加一项（如allow-storage-access-by-user-activation）都需确认插件是否真需要且由用户手势触发
在线环境里根本做不到“加密存储”，别试了
crypto.subtle在JSFiddle/CodePen Editor中基本为undefined，不是你代码有bug，是环境不满足安全上下文。即使硬塞进Debug View，密钥生成、IV随机化、ArrayBuffer序列化等环节也极易出错，存进localStorage的“密文”解不开，几乎全是序列化失真导致。
- 加密后必须用
new Uint8Array(buffer)转Base64，不能JSON.stringify()原始ArrayBuffer（会变{}） - 密钥绝不能用
generateKey()——在线环境常禁用；改用预生成的Uint8Array字面量（仅限演示） - 任何依赖
eval()、Function()或动态document.write()的运行环境，都会让密钥内存暴露，等于没加密
真正容易被忽略的是：在线运行环境没有“服务端”这个概念，所有你以为能配的头（X-Frame-Options、Content-Security-Policy）、所有你以为能注入的逻辑（服务侧探针、响应体替换），都只是平台提供的前端入口模拟。安全设计必须立足于这个前提——否则所有防护都是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
