游戏GUI中iframe本地HTML/CSS/JS渲染问题求助（无游戏代码）

项目背景 #

我已完成第一组仅包含布局与GUI内容（无游戏逻辑）的文件上传，这是一款基于互联网、点对点浏览器对战的双人战舰游戏GUI迭代开发版本，目前处于方法选型初期。我是JavaScript新手，仅通过示例代码学习开发，具备C、Pascal等其他编程语言的开发经验。

iframe使用中的问题 #

• 无法精准控制iframe在父div中的尺寸与位置，网格规格和适配样式存在不一致情况；
• 无法让iframe内的内容应用全局CSS文件；
• 无法从iframe内部引用全局JavaScript变量或对象。

我怀疑问题源于Content Security Policy（CSP）限制，但修改meta标签后未见到明显效果。当前GUI布局截图：

请求协助内容 #

1. 请解释上述问题的具体成因；
2. 提供仅使用原生JavaScript、无外部依赖库的代码修改方案，同时确认是否可以实现两台非共址电脑仅依靠桌面标准包完成对战（不使用任何第三方资源）。

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