点击HTML链接跳转打开PDF被浏览器拦截 直接访问正常如何解决

• 未配置rel属性的target="_blank"跨域链接，会被浏览器的弹窗拦截策略判定为非用户主动发起的可疑跳转，跨域非HTML类资源（如PDF）的触发阈值更低，更容易被拦截。
• 直接在地址栏输入PDF地址属于用户主动发起的访问请求，不会触发弹窗拦截规则，因此可以正常打开。

• 方案1：给a标签补充rel="noopener noreferrer"属性，修改后的代码如下：

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank" rel="noopener noreferrer">PDF</a>

该方案是官方推荐的target="_blank"标准写法，同时可以避免原页面被新打开的恶意页面篡改跳转的安全问题。

• 方案2：如果方案1不生效，可通过JS手动控制新窗口打开逻辑规避拦截，示例代码如下：

<a href="javascript:void(0)" id="pdfLink">PDF</a>
<script>
document.querySelector('#pdfLink').addEventListener('click', () => {
  const pdfUrl = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
  const newTab = window.open();
  newTab.opener = null;
  newTab.location.href = pdfUrl;
});
</script>

额外排查点：如果修改代码后仍然无法打开，需要检查站点的Content Security Policy（CSP）配置，确认PDF资源的域名已经加入到default-src或frame-src的放行规则中。

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