JavaScript：如何安全打开用户提供的URL至新窗口

我给你整理了一套既能满足需求，又能彻底规避XSS漏洞的实现方案，核心思路就是绝不信任用户输入，先做安全校验再处理，具体步骤和代码如下：

核心安全原则 #

必须拦截javascript:、vbscript:这类危险协议——这些是XSS攻击最常见的入口，一旦用户输入这类内容并直接执行，会窃取页面信息甚至篡改页面内容。

具体实现步骤 #

1. 获取并预处理用户输入 #

先拿到文本框内容，顺便去掉前后空格，避免空输入或无效的空格开头内容。

2. 净化并校验URL #

• 如果输入为空，直接提示用户即可，无需继续处理。
• 尝试用URL对象解析输入：如果解析失败（比如用户只输入了www.example.com或者内网IP），自动给它加上http://前缀，避免浏览器把它当成当前页面的相对路径打开。
• 只允许合法协议，比如http://、https://、ftp://这类，其他协议直接拦截提示。

3. 安全打开新窗口 #

不要直接用window.open(userInput)（风险极高！），而是通过创建隐藏的<a>标签来打开链接，同时加上rel="noopener noreferrer"属性，防止新窗口通过window.opener访问原页面信息，进一步提升安全性。

完整代码示例 #

function openUserProvidedUrl() {
  // 假设你的文本框id是"urlInput"，图标点击事件绑定这个函数
  const urlInput = document.getElementById('urlInput');
  let userInput = urlInput.value.trim();

  // 处理空输入
  if (!userInput) {
    alert('请输入要打开的网址');
    return;
  }

  // 定义允许的安全协议
  const safeProtocols = ['http:', 'https:', 'ftp:', 'ftps:'];
  let cleanedUrl;

  try {
    // 尝试解析用户输入为合法URL
    const urlObj = new URL(userInput);
    // 校验协议是否安全
    if (safeProtocols.includes(urlObj.protocol)) {
      cleanedUrl = urlObj.href;
    } else {
      alert('不支持该类型的网址，请输入合法的HTTP/HTTPS等网址');
      return;
    }
  } catch (err) {
    // 解析失败，默认添加http://前缀
    cleanedUrl = `http://${userInput}`;
    // 再次校验添加前缀后的协议（防止用户输入类似"javascript:xxx"，加前缀后变成http://javascript:xxx，协议是http:）
    const urlObj = new URL(cleanedUrl);
    if (!safeProtocols.includes(urlObj.protocol)) {
      alert('输入的内容不符合网址格式，请重新输入');
      return;
    }
  }

  // 通过a标签安全打开新窗口
  const link = document.createElement('a');
  link.href = cleanedUrl;
  link.target = '_blank';
  link.rel = 'noopener noreferrer'; // 防止新窗口控制原页面
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

额外说明 #

• 不管用户输入的URL是否有效（比如http://wwwfoo.garbage.wibble），浏览器都会正常尝试打开，完全符合你的需求。
• 内网环境下的IP地址或者内网域名（比如http://192.168.1.100、http://internal.company.com）也能正常处理，只要是HTTP/HTTPS协议就没问题。
• 这套方案从协议校验、URL净化到打开方式都做了安全处理，彻底杜绝了XSS风险。

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