如何在带sandbox的iframe中添加存储JS脚本及相关技术疑问

我有一个ASP.NET MVC应用，会将HTML和JS脚本存储在数据库中，需要渲染这些存储的HTML并执行对应的JS，功能类似JSFiddle。考虑到XSS攻击风险，我采用了带sandbox属性的iframe方案并已实现基础功能，示例代码如下：

前端页面代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />        
    <script src="~/lib/jquery/dist/jquery.min.js"></script>    
</head>
<body>
    <div id='myOuterDiv'></div>
    <iframe src="/home/html" sandbox="allow-scripts">
        
    </iframe>
</body>
</html>

后端Action代码 #

[HttpGet]
public IActionResult Html()
{
    var storedHtml = "<div id='myInnerDiv'></div>";
    var storedJsScript = "<script>$(function(){$('#myInnerDiv').html('foo bar');})</script>";
    var jq = "<script src='/lib/jquery/dist/jquery.min.js'></script>";

    var content = jq + storedHtml + storedJsScript;

    return Content(content, "text/html");
}

疑问列表 #

1. 主页面已引入jQuery供自身JS使用，但iframe内的存储脚本无法复用主页面的jQuery，目前需在iframe内容中重复引入，是否有其他解决方案？
2. 确认iframe内运行的脚本是否能够访问iframe外的DOM元素（如示例中的myOuterDiv）？我不希望存储脚本具备该访问权限，特此确认。

问题解答 #

针对疑问1：复用主页面jQuery的可行方案 #

iframe和主页面是独立的执行上下文，默认无法直接共享全局对象（比如主页面的$/jQuery），这里提供几种可选思路：

• 利用浏览器缓存优化重复引入：这是最稳妥且低成本的方案。主页面和iframe引用同一个路径的jQuery文件（本地资源或CDN均可），浏览器会自动复用已缓存的文件，不会重复下载，性能上几乎没有额外开销，完全可以接受这种“代码上重复引入但实际不重复加载”的方式。
• 通过postMessage做受限交互：如果不想在iframe里引入jQuery，可以在主页面封装好需要的DOM操作方法，iframe通过postMessage向主页面发送请求，主页面处理后返回结果。但这种方式只能实现特定功能，没法让iframe直接使用完整的jQuery API，适合交互逻辑简单的场景。
• 禁止操作：取消沙箱隔离：如果给iframe的sandbox添加allow-same-origin属性，且主页面和iframe同源，确实可以通过window.parent.jQuery访问主页面的jQuery，但这会彻底打破沙箱的安全隔离，大幅提升XSS风险，完全违背使用沙箱的初衷，绝对不建议这么做。

针对疑问2：iframe脚本无法访问外部DOM #

在你当前的配置（sandbox="allow-scripts"，未添加allow-same-origin）下，iframe会被强制视为独立的源，哪怕主页面和iframe实际同源，沙箱也会隔离两者的执行上下文。此时iframe内的脚本既无法通过window.parent/top访问主页面的DOM元素，也无法读取主页面的全局对象，完全符合你“禁止存储脚本访问外部DOM”的需求。

如果后续修改沙箱属性添加了allow-same-origin，且主页面和iframe同源，脚本就可以访问外部DOM了，所以务必保持当前的沙箱配置不变。

内容的提问来源于stack exchange，提问作者LP13