如何在JavaScript中安全提取iframe的src属性（避免执行JS）

我完全理解你的顾虑——用临时DOM元素解析iframe确实会触发页面加载和脚本执行，存在安全风险。下面给你两个靠谱的安全方案，优先推荐第一种：

方案1：使用DOMParser（最可靠，推荐） #

DOMParser可以在不执行任何脚本的情况下解析HTML字符串，完美解决你的安全问题。它只会构建DOM结构，但不会加载外部资源或运行JS。

代码示例：

function getIframeSrc(iframeHtml) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(iframeHtml, 'text/html');
  const iframe = doc.querySelector('iframe');
  return iframe ? iframe.src : null;
}

// 测试
const iframeHtml = '<iframe src="https://example.com" width="100" height="100"></iframe>';
console.log(getIframeSrc(iframeHtml)); // 输出 "https://example.com"

这个方法能处理所有合法的HTML情况，比如src属性位置变化、不同引号格式、额外属性等，比正则表达式更健壮。

方案2：正则表达式（适合简单场景） #

如果你确实想用正则，需要考虑各种可能的格式（比如单引号、双引号、属性周围的空格）。下面是一个兼顾常见情况的正则：

function getIframeSrcWithRegex(iframeHtml) {
  // 匹配src属性，支持单/双引号，忽略属性间的空格
  const regex = /<iframe\s+.*?src=(["'])(.*?)\1.*?>/i;
  const match = iframeHtml.match(regex);
  return match ? match[2] : null;
}

// 测试
const iframeHtml1 = '<iframe src="https://example.com" width="100"></iframe>';
const iframeHtml2 = '<iframe width="100" src=\'https://test.com\' height="200"></iframe>';
console.log(getIframeSrcWithRegex(iframeHtml1)); // "https://example.com"
console.log(getIframeSrcWithRegex(iframeHtml2)); // "https://test.com"

⚠️ 注意：正则表达式有局限性，比如如果HTML里有嵌套引号、注释中的iframe代码，或者src属性值包含特殊字符时，可能匹配失败。所以如果你的场景涉及复杂HTML，还是优先用DOMParser。

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