沙箱化iframe中的子页面能否访问同目录相对路径资源？

文件结构 #

parent.html
style.css
logic.js
child.html

parent.html 代码 #

<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="logic.js"></script>
</head>
<body>
<h1>Hello, World</h1>
<iframe sandbox src="child.html">
</body>
</html>

child.html 代码 #

<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="logic.js"></script>
</head>
<body>
<h1>Hello, from Child Page</h1>
</body>
</html>

问题 #

parent.html通过example.com/parent.html提供服务，child.html中以相对路径引入的logic.js和style.css能否正常加载？若可以，原因是什么？

本地测试发现可以正常运行，但原以为沙箱化iframe拥有独立源，没有基准URL用于解析相对路径，因此产生疑问。

解答 #

能正常加载，原因如下：

• 沙箱化iframe的src指向child.html，这个文档的基准URL就是它自身的实际地址example.com/child.html，相对路径的解析规则只和当前文档的自身URL有关，和沙箱是否开启没有关系。
• sandbox属性的作用是限制iframe的权限（比如默认禁止脚本执行、跨域操作等），但不会改变URL解析的逻辑。只要child.html能被正常加载，它里面的相对路径就会基于所在的域名和目录去查找资源，而style.css、logic.js和child.html在同一目录下，自然能正常请求到。
• 沙箱的"独立源"是同源策略层面的限制，比如默认情况下沙箱iframe和父页面无法共享Cookie、直接操作对方DOM，但这和相对路径的URL解析是完全独立的两个机制，URL解析不受沙箱权限的影响。

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