Content Security Policy navigate-to指令未实现，求阻止外部URL导航替代方案

由于CSP的navigate-to指令目前尚未实现，针对无需外部链接或导航的管理系统场景，可通过以下几种方案拦截各类外部导航行为：

1. 拦截标签的点击行为 #

遍历页面所有<a>标签，校验链接来源，拦截跨域跳转：

document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('a');
  if (!targetLink) return;

  const currentOrigin = window.location.origin;
  const linkOrigin = new URL(targetLink.href).origin;

  if (linkOrigin !== currentOrigin) {
    e.preventDefault();
    console.log('外部链接跳转已拦截');
  }
});

2. 重写window.open方法 #

覆盖原生window.open，仅允许同域弹窗跳转：

const originalOpen = window.open;
window.open = function(url, ...args) {
  const currentOrigin = window.location.origin;
  const targetOrigin = new URL(url, window.location.href).origin;

  if (targetOrigin === currentOrigin) {
    return originalOpen.call(this, url, ...args);
  } else {
    console.log('window.open外部跳转已拦截');
    return null;
  }
};

3. 拦截location类跳转 #

重写location.replace和location.href的赋值逻辑，阻止跨域页面跳转：

// 拦截location.replace
const originalReplace = location.replace;
location.replace = function(url) {
  const currentOrigin = window.location.origin;
  const targetOrigin = new URL(url, window.location.href).origin;

  if (targetOrigin === currentOrigin) {
    return originalReplace.call(this, url);
  } else {
    console.log('location.replace外部跳转已拦截');
  }
};

// 拦截location.href赋值
Object.defineProperty(location, 'href', {
  set: function(url) {
    const currentOrigin = window.location.origin;
    const targetOrigin = new URL(url, window.location.href).origin;

    if (targetOrigin === currentOrigin) {
      this.replace(url);
    } else {
      console.log('location.href外部跳转已拦截');
    }
  }
});

4. 配合CSP指令限制嵌入类跳转 #

如果外部跳转通过iframe嵌入实现，可配置CSP的frame-src或child-src仅允许同域来源：

Content-Security-Policy: frame-src 'self'; child-src 'self';

该指令会阻止页面加载跨域iframe，间接拦截这类外部导航行为。

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