移动端网页脚本为何被浏览器拦截？检查 Content-Security-Policy
移动端网页脚本被拦截通常是因为 Content-Security-Policy 策略配置过于严格，禁止了外部脚本资源的加载。
检查浏览器控制台中的 CSP 错误信息
当移动端网页脚本无法执行时，首先需要在浏览器开发者工具的控制台中查看具体的错误提示。浏览器会记录下被 CSP 策略拦截的资源类型和来源，例如“脚本被阻止加载”或“尝试执行内联脚本被阻止”。这些错误信息通常会明确指出是哪个指令（如 script-src）导致了拦截，以及具体是哪个域名或协议被禁止。通过分析这些日志，可以快速定位是脚本源策略配置错误，还是混合内容策略阻止了不安全的请求。
除了查看拦截消息，还需要注意错误信息中提到的具体指令和参数。例如，如果错误提示“无法解析无效源”，说明 CSP 配置中的域名格式不正确。如果提示“忽略源，因为不支持通过 meta 元素提供”，则说明该指令只能在 HTTP 头中设置。仔细阅读控制台输出的每一行错误，能够帮助区分是策略配置语法错误，还是策略本身过于严格，从而为后续的修改提供准确的依据。
排查 CSP 策略中的 script-src 指令配置
CSP 策略的核心在于 script-src 指令，它决定了哪些脚本可以被加载和执行。如果该指令中未包含当前网页所使用的脚本服务器域名，或者未指定 'unsafe-inline'（如果使用了内联脚本），浏览器就会直接阻止脚本的加载。检查策略配置时，需要确保 script-src 中包含了所有合法的脚本来源，例如 'script-src 'https://example.com' 'self';'。如果使用了 nonce 或 hash 方案，必须确保 HTML 标签中的对应属性与策略中的值完全匹配，否则脚本也会被忽略。
此外，还需要注意 script-src 中可能存在的限制性参数。例如，如果配置了 'strict-dynamic'，但没有提供有效的 nonce 或 hash，可能会导致所有脚本被阻止加载。同样，如果策略中包含了 'none'，则意味着完全禁止加载任何脚本。确保 script-src 指令的配置既符合安全要求，又不会过度限制合法脚本的执行，是解决脚本无法加载问题的关键步骤。
验证修复后的脚本执行状态
在修改 CSP 策略配置后，需要重新加载移动端网页并验证脚本是否能够正常执行。可以通过在控制台中检查是否有新的错误信息，以及页面功能是否恢复正常来判断。如果脚本成功加载并执行，说明问题已经解决；如果仍然出现拦截提示，可能需要进一步检查其他指令，如 style-src 或 img-src，或者确认策略配置文件是否被正确部署到服务器上。
为了确保修复的稳定性，建议在不同移动设备或浏览器上进行测试，因为不同浏览器对 CSP 的解析和执行可能略有差异。同时，可以使用网络抓包工具（如 Wireshark）来捕获网络请求，确认服务器返回的 CSP 响应头在所有请求中都是一致的。通过这些验证步骤，可以确认 CSP 策略的修改已经生效，并且脚本能够正确执行，从而彻底解决脚本被拦截的问题。
避免 CSP 配置中的常见陷阱
在配置 Content-Security-Policy 时，需要避免一些常见的陷阱。首先，不要在策略中随意添加 'unsafe-inline'，因为这会降低页面的安全性。其次，不要忽略 CSP 报告 URI 的配置，如果没有设置报告 URI，策略将无法发送违规报告，导致问题难以排查。此外，确保 CSP 指令的语法正确，例如避免在指令中混用不同的引号或缺少分号，这可能会导致整个策略被忽略。
最后，要确保 CSP 策略与页面的实际需求相匹配。例如，如果页面使用了内联脚本，必须明确指定 'unsafe-inline' 或使用 nonce/hash 方案；如果页面嵌入了第三方脚本，必须在 script-src 中包含该第三方域名的白名单。通过遵循这些最佳实践，可以避免因 CSP 配置不当导致的脚本执行问题，同时保持页面的安全性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。