为什么代码中iframe的src无法加载页面，提示页面拒绝连接？

问题根因 #

• 第三方站点嵌入失败：谷歌、W3Schools、脸书这类主流站点均配置了X-Frame-Options安全响应头，取值通常为DENY（禁止所有页面嵌入）或SAMEORIGIN（仅允许同域名页面嵌入），这是站点官方的安全防护规则，用于防范点击劫持类攻击，没有绕过的可能性，只能更换允许被iframe嵌入的资源做测试。
• 本地文件路径加载失败：如果你是直接双击打开本地HTML文件（浏览器地址栏为file://开头的地址），浏览器同源安全策略会限制file协议下的页面加载其他本地文件作为iframe源，同时本地资源的相对/绝对路径配置错误也会触发加载异常。

你贴出的iframe基础语法本身不存在错误，问题完全出在src指向资源的访问限制上。

修复方案 #

• 测试嵌入功能时，选择明确允许被iframe嵌入的资源，不要使用头部大站作为测试源
• 本地调试时不要直接打开HTML文件，使用本地静态服务启动项目，比如VS Code的Live Server插件、Python自带的python -m http.server命令等，通过http://localhost:端口号的形式访问页面，此时配置了正确相对路径的本地资源就可以正常加载到iframe中

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