能否将PHP渲染的前端内容嵌入Vue节点实现渐进式迁移？

问题1 最低成本实现方案 #

• 首先明确：v-html不可行，Vue和浏览器的默认安全策略会禁止v-html插入内容中的script标签执行，完全达不到加载运行旧模块的效果。
• 不需要强制使用iframe，最低成本的方案是手写简易的页面加载逻辑，全程几十行代码就能搞定：
  1. 用fetch请求旧PHP子模块的index页面，拿到完整的HTML字符串
  2. 对HTML字符串做简单拆分，分别提取出所有的外链样式、内联样式、普通DOM内容、外链脚本、内联脚本
  3. 先把普通DOM内容和样式插入到Vue的目标容器节点中
  4. 按顺序处理脚本：外链脚本动态创建script标签设置src属性后插入文档，内联脚本把内容填入动态创建的script标签后再插入文档，即可正常执行所有旧模块的逻辑
• 如果后续要接入的旧模块数量多，不想手动处理样式隔离、全局变量冲突、脚本执行顺序等坑，可以直接用轻量的微前端库，已经封装好了所有加载、隔离逻辑，接入成本也很低。

问题2 安全风险说明 #

• 不存在绝对的致命安全问题，风险高低完全取决于你的旧应用本身的安全水位：
  1. 如果旧PHP应用是你方可控的内部系统，本身没有XSS漏洞、所有加载的脚本都是你们自己的业务代码，同时请求走HTTPS避免链路劫持，那么基本没有额外的安全风险
  2. 如果旧应用有公开的用户输入场景，且没有做完善的XSS过滤，那么被插入的恶意脚本会直接在主Vue应用的上下文执行，能拿到主应用的所有本地存储、Cookie、接口权限等数据，风险比iframe高很多
• 额外需要注意非安全类的风险：如果没有做隔离处理，旧应用的全局样式、全局变量可能会污染主Vue应用的运行逻辑，建议做简单的样式前缀隔离、全局变量沙箱封装即可解决。

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