打开手机浏览器访问某个网页时，突然弹出一堆广告，或者页面加载到一半卡住不动，这种情况很多人都遇到过。其实除了网络问题，网站本身的安全策略是否合理也很关键。其中，CSP（内容安全策略）在移动端的表现尤为明显。
什么是CSP？
CSP 全称是 Content Security Policy，它是一种 HTTP 响应头或 meta 标签，用来告诉浏览器哪些资源可以加载，比如图片、脚本、样式表等。对于移动端来说，流量和性能都更敏感，一个宽松的 CSP 可能让页面偷偷加载第三方跟踪脚本，不仅拖慢速度，还可能泄露用户信息。
为什么移动端更需要精细的CSP
手机屏幕小，用户注意力集中，一旦页面出现异常跳转或弹窗，体验直接崩塌。而且很多用户用的是移动数据，如果网页因为缺少CSP限制，加载了大量不必要的外部脚本，流量消耗蹭蹭往上涨。比如你只是想查个公交时刻表，结果页面偷偷加载了视频广告和数据分析脚本，这谁能忍？
常见的CSP配置方式
在网页中设置 CSP 有两种主要方式：通过服务器返回 HTTP 头，或者在 HTML 的 <head> 中添加 meta 标签。对于移动端项目，尤其是静态页或无法修改后端的情况，meta 标签更实用。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'">上面这段代码的意思是：所有资源默认只允许从当前域名加载；脚本只能来自本站；图片可以是本站或 base64 内联数据；样式允许内联写法。这样基本能挡住大部分第三方注入风险。
针对移动端的优化建议
有些老项目为了兼容性用了 'unsafe-inline'，但这在现代移动端环境中风险很高。可以考虑使用 nonce 或 hash 机制来替代内联脚本的加载。比如：
<script nonce="2726c7f26c">
console.log('Hello from trusted script');
</script>
<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-2726c7f26c'">这样一来，只有带上正确 nonce 的脚本才能执行，其他一概拦截。虽然配置麻烦点，但安全性提升明显。
另外，别忘了测试。不同安卓浏览器对 CSP 的支持程度不一样，特别是某些国产定制浏览器会“智能”放行被拦截的内容，导致策略失效。建议上线前用真机多测几个主流App里的内置浏览器。
别让CSP误伤正常功能
见过有的网站设置了过于严格的 CSP，结果连自己的统计代码都加载不了，或者用户上传的图片显示不出来。调试时可以先用 report-only 模式观察问题：
<meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self'; report-uri /csp-violation-report">这样不会真正阻止资源加载，但会把违规行为上报到指定接口，方便开发者逐步调整策略，避免一刀切影响用户体验。