iframe嵌入HTML页面后部分外部链接无法响应问题

嵌入页面代码 #

<section id="posec">
      <h2>Project One</h2>
      <table>
        <tr>
          <td><iframe src="../project_one/project_one.html" width="1350" height="500px"></iframe></td>
        </tr>
      </table>
    </section>

被嵌入的project_one.html代码 #

<div>
      <h1>Ayush Singh</h1>
      <p>Gmail: <a href="mailto:singhayush98765@gmail.com">singhayush98765@google.com</a></p>
      <p>LinkedIn: <a href="https://www.linkedin.com/in/ayushsingh023/">ayushsingh023</a></p>
      <p>GitHub: <a href="https://github.com/ayushsingh023">ayushsingh023</a></p>
    </div>

问题原因 #

LinkedIn、GitHub这类平台都设置了反嵌入的安全策略（比如X-Frame-Options或CSP头），禁止自身页面被iframe加载。当你在iframe里点击这些外部链接时，浏览器会尝试在iframe内部打开对应平台页面，被安全策略拦截，导致链接无响应或报错。而mailto:链接是直接唤起本地邮件客户端，不涉及加载外部网页，所以不受影响。

解决方法 #

给外部链接添加target="_blank"属性，让链接在新标签页打开，绕开iframe的限制，同时加上安全属性提升页面安全性：

修改后的project_one.html代码：

<div>
      <h1>Ayush Singh</h1>
      <p>Gmail: <a href="mailto:singhayush98765@gmail.com">singhayush98765@google.com</a></p>
      <p>LinkedIn: <a href="https://www.linkedin.com/in/ayushsingh023/" target="_blank" rel="noopener noreferrer">ayushsingh023</a></p>
      <p>GitHub: <a href="https://github.com/ayushsingh023" target="_blank" rel="noopener noreferrer">ayushsingh023</a></p>
    </div>

• target="_blank"：指定链接在新标签页打开，避免在iframe内加载被拦截
• rel="noopener noreferrer"：防止新页面获取原页面控制权，提升安全性

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