Apache Cordova iframe无法加载：Visual Studio 2017中遇2项错误求助

嘿，这个问题我之前帮不少Cordova开发者搞定过，从你给出的错误日志一眼就能看出根源——内容安全策略（CSP）的限制在拦截你的iframe请求！

问题到底出在哪？ #

先看这条关键错误：

Refused to frame 'https://googel.com/' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com ". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

简单说，你的Cordova应用默认的CSP规则只允许加载self（自身域名）、data:、gap:以及https://ssl.gstatic.com的资源。因为你没专门设置frame-src（控制iframe加载来源的指令），系统就自动用default-src的规则当兜底，而你要加载的https://google.com（应该是你手滑打错成googel了）不在允许列表里，直接被拦下来了。

怎么解决？ #

核心就是修改CSP配置，给iframe开个"绿灯"，两种常用方法：

1. 修改入口HTML的CSP Meta标签

找到你项目里的index.html（或者其他入口页面），找到<meta http-equiv="Content-Security-Policy">这一行，添加frame-src指令并包含你的目标域名：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; frame-src 'self' https://google.com;">

• 如果要允许多个域名，用空格隔开就行：frame-src 'self' https://google.com https://example.com;
• 要是开发测试阶段图省事（生产环境绝对不建议，风险太高），可以用*允许所有域名：frame-src *;

2. 通过config.xml配置CSP

VS2017的Cordova项目也支持在config.xml里统一配置CSP，直接在文件里添加或者修改对应的标签：

<content-security-policy>default-src 'self' data: gap: https://ssl.gstatic.com; frame-src 'self' https://google.com;</content-security-policy>

如果是针对特定平台（比如安卓或iOS），可以放在对应平台的配置节点下：

<platform name="android">
    <content-security-policy>default-src 'self' data: gap: https://ssl.gstatic.com; frame-src 'self' https://google.com;</content-security-policy>
</platform>

最后提几个小细节 #

• 先把iframe里的域名改对！https://googel.com明显是拼写错误，改成https://google.com先
• 改完配置后一定要清理项目缓存再重新构建（VS2017里右键项目选"Clean"，然后Rebuild），不然旧的CSP规则可能还在生效
• 生产环境尽量别用*通配符，明确指定允许的域名能大大降低应用的安全风险

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