如何从网页中安全提取并解析嵌入的JSON数据（如App = {...}）

在网页开发或者数据采集的实际场景中，我们经常会遇到页面通过内嵌脚本存储配置数据的情况，最常见的形式就是类似App = {"version": "1.0", "api_url": "https://ipipp.com/api"}这样的赋值语句，其中等号右侧就是需要提取的JSON数据。这类数据通常直接写在HTML页面的<script>标签内部，我们需要安全地将其提取出来并完成解析，才能用于后续的开发逻辑。

常见的提取方式及风险

很多开发者第一时间会想到用正则表达式直接匹配JSON内容，这种方式实现简单，但存在不少安全隐患。比如如果JSON字符串内部包含嵌套的引号、换行符，或者脚本中存在和匹配规则类似的干扰内容，就容易出现匹配错误。更危险的是如果直接将提取到的字符串用eval执行，一旦数据被篡改植入恶意代码，就会直接造成安全问题。

直接用eval解析的风险示例

假设我们提取到的字符串被恶意篡改，内容如下：

// 被篡改的提取内容
var extractedStr = "{"data": "test"}; alert('恶意代码执行')";
// 直接使用eval解析，会触发恶意弹窗
eval("(" + extractedStr + ")");

安全的提取与解析方案

第一步：精准提取JSON字符串

我们可以先定位到存放目标数据的<script>标签，再通过正则匹配赋值语句右侧的JSON内容，正则需要注意避免贪婪匹配导致提取多余内容。以下是一个可靠的正则匹配实现：

/**
 * 从script内容中提取App赋值的JSON字符串
 * @param {string} scriptContent script标签内的文本内容
 * @returns {string|null} 提取到的JSON字符串，未匹配到返回null
 */
function extractJsonStr(scriptContent) {
    // 匹配App = 后面的JSON对象，非贪婪匹配到第一个闭合的}
    var match = scriptContent.match(/Apps*=s*({[^}]*?})/);
    if (match && match[1]) {
        return match[1];
    }
    return null;
}

第二步：安全解析JSON字符串

提取到JSON字符串后，绝对不能使用eval执行，应当使用浏览器内置的JSON.parse方法，这个方法只会解析合法的JSON格式，遇到非法内容会直接抛出错误，不会执行任何代码，安全性更高。同时我们可以加上try-catch处理解析异常的情况。

/**
 * 安全解析提取到的JSON字符串
 * @param {string} jsonStr 提取到的JSON字符串
 * @returns {object|null} 解析后的对象，解析失败返回null
 */
function safeParseJson(jsonStr) {
    try {
        // JSON.parse只会解析合法JSON，不会执行代码
        var result = JSON.parse(jsonStr);
        return result;
    } catch (e) {
        console.error("JSON解析失败：" + e.message);
        return null;
    }
}

完整调用示例

结合上面的两个方法，我们从页面中提取并解析数据的完整流程如下：

// 假设获取到了目标script标签的文本内容
var scriptText = `var App = {"version": "2.1", "base_url": "https://ipipp.com", "features": ["login", "upload"]};`;
// 第一步提取JSON字符串
var jsonStr = extractJsonStr(scriptText);
if (jsonStr) {
    // 第二步安全解析
    var appConfig = safeParseJson(jsonStr);
    if (appConfig) {
        console.log("解析成功，版本号：" + appConfig.version);
        console.log("基础地址：" + appConfig.base_url);
    }
}

特殊场景的处理

如果JSON数据中包含换行符、制表符这类特殊字符，上面的正则可能需要调整，我们可以把正则改为匹配从{开始到对应闭合}的内容，避免换行导致的匹配中断：

// 支持多行JSON的提取正则
function extractMultiLineJson(scriptContent) {
    // 匹配App = 后面的{，然后匹配到对应的闭合}，支持多行内容
    var match = scriptContent.match(/Apps*=s*({[sS]*?}(?=s*;))/);
    if (match && match[1]) {
        return match[1].trim();
    }
    return null;
}

如果页面中存在多个类似App = {...}的赋值语句，还需要额外增加判断逻辑，比如通过后续的属性特征确认哪个是目标数据，避免提取到错误的内容。另外如果数据来源是不可信的第三方页面，建议在解析前先对JSON字符串做基础的格式校验，比如检查是否以{开头、}结尾，进一步降低异常风险。

JSON解析网页数据提取正则表达式JavaScript数据安全修改时间：2026-07-08 17:36:25