如何避免Youtube阻止通过锚点标签打开视频？

API 探路者

2026-6-22

问题描述

在Vue单文件组件的锚点标签中嵌入YouTube链接，点击打开新页面时提示“www.youtube.com is blocked”，但其他网站链接可正常使用，推测问题源于YouTube端。参照Svelte可正常运行的示例复刻了Vue代码：

<template>
  <div>
    <h1>The Famous Cats of YouTube</h1>
    <ul>
      <li v-for="({ id, name }, i) in cats" :key="id">
        <a
            target="_blank"
            rel="noreferrer"
            :href="`https://www.youtube.com/watch?v=${id}`">
          {{ i + 1 }}: {{ name }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup>
let cats = [
  { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
  { id: 'z_AbfPXTKms', name: 'Maru' },
  { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>

排查与解决方案

检查浏览器扩展/安全工具：广告拦截、隐私类扩展常默认拦截动态生成的YouTube链接。暂时禁用所有扩展后测试，若恢复正常，将当前站点加入对应扩展的白名单即可。
验证动态URL正确性：在浏览器控制台打印生成的YouTube链接，直接复制到地址栏访问，确认URL无拼写错误或多余字符。可对id做去空格处理：:href="https://www.youtube.com/watch?v=${id.trim()}"。
对比框架渲染差异：检查Vue与Svelte最终渲染的HTML锚点标签，确认rel、target等属性完全一致。若存在差异，调整Vue模板属性匹配Svelte的渲染结果。
测试静态链接：在组件中添加静态YouTube锚点（如<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v=J---aiyznGQ">测试链接</a>），若静态链接也被拦截，说明问题出在网络环境（如防火墙限制），需联系网络管理员排查。
排查Vue安全策略：Vue的v-bind:href会自动做XSS防护，但不会拦截合法链接。若怀疑是此问题，可临时用v-html渲染锚点（注意XSS风险），或升级Vue版本排除版本bug。