是，外部链接在 shadow dom 中默认跳转到全局上下文，shadow dom 不拦截、不重定向、不提供 hook；它仅隔离 dom 结构和样式，不接管导航语义。

外部链接在 Shadow DOM 中会跳转到全局上下文吗

会，而且默认行为完全不受 Shadow DOM 隔离影响。<a href="https://example.com"></a> 点击后始终在顶层 document 的 browsing context 中打开（通常是当前 tab），Shadow DOM 不拦截、不重定向、不提供 hook。这不是 bug，是规范设计——Shadow DOM 只管 DOM 节点边界和样式作用域，不接管导航语义。

如何让 <a></a> 在 Shadow DOM 内部新开窗口或 iframe

不能靠 Shadow DOM 自身控制，必须显式干预点击行为。常见错误是以为加了 target="_blank" 就够了，其实它只影响窗口目标，不改变上下文归属。

• target="_blank" 有效，但新窗口仍属于父页面的 window.open() 上下文，可能被弹窗拦截
• 想嵌入到 Shadow DOM 内的 <iframe></iframe>？得手动阻止默认行为 + 动态设置 iframe.src：

  shadowRoot.querySelector('a').addEventListener('click', e => {
    e.preventDefault();
    const iframe = shadowRoot.querySelector('iframe');
    if (iframe) iframe.src = e.target.href;
  });

• 若需沙箱化（比如防止第三方链接执行脚本），必须配合 sandbox 属性：<iframe sandbox="allow-scripts allow-same-origin"></iframe> —— 注意：allow-same-origin 会削弱隔离，慎用

为什么 rel="noreferrer noopener" 在 Shadow DOM 中仍有必要

因为 target="_blank" 默认会让新页面通过 window.opener 访问原页面，这是跨域也能触发的安全风险。Shadow DOM 完全不缓解这点——它不修改 HTML 元素的导航属性语义。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 漏写 rel="noopener" → 新页面可调用 window.opener.location = 'data:text/html,<script>...</script>' 注入恶意代码
• 漏写 rel="noreferrer" → Referer 头泄露当前页面 URL（含敏感路径或 query 参数）
• 正确写法必须同时存在：<a href="..." target="_blank" rel="noopener noreferrer"></a>

动态插入的链接如何确保安全

从 fetch 或 CMS 获取的 HTML 字符串若含 <a></a>，直接 innerHTML 写入 Shadow Root 会保留原始 href 和 target，但无法自动补全 rel —— 这是常见疏漏点。

• 必须用 DOMParser 解析后遍历所有 <a></a>，强制添加 rel="noopener noreferrer"
• 对含 javascript: 或 data: 协议的 href，应直接移除或替换为 #（它们在 Shadow DOM 中照样执行）
• 禁止信任 target 值：用户可控字段可能填 target="my-frame" 指向恶意 iframe，应统一重写为 _blank 或清空

真正容易被忽略的是：Shadow DOM 的样式隔离和事件重定向都起作用，唯独导航行为完全透明——它既不阻止跳转，也不提供拦截入口。所有链接安全逻辑必须在插入前清洗、点击时拦截、渲染后加固，三者缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！