当前位置：首页 > news >正文

Android Cordova 开发 - Cordova 解读初始化项目（index.html meta、Cordova.js、config.xml）

news 来源：原创 2025/4/24 8:11:56

一、index.html meta

1、Content-Security-Policy

（1）基本介绍

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

网页安全策略（CSP）的实质就是白名单，开发者明确告诉客户端，哪些外部资源可以加载和执行，哪些不可以
CSP 的主要目的是减少和报告 XSS 攻击，大大增加网页的安全性，攻击者即使发现了漏洞，也没法注入脚本
有两种方法可以启动 CSP

通过 HTTP 头信息的 Content-Security-Policy 字段
通过网页的 meta 标签

（2）参数

参数名	说明
default-src	限制全局
script-src	限制外部脚本
style-src	限制样式表
img-src	限制图像
media-src	限制媒体文件（音视频）
font-src	限制字体文件
object-src	限制插件（如 Flash）
child-src	限制框架
frame-ancestors	限制嵌入的外部资源（如 frame、iframe、embed、applet 标签）
connect-src	限制 HTTP 连接（通过 XHR、WebSockets、EventSource 等）
worker-src	限制 worker 脚本
manifest-src	限制 manifest 文件

参数值	示例	说明
*	img-src *	允许任意地址的 URL，但不包括 blob、filesystem、schemes
‘none’	object-src ‘none’	所有地址的资源都不允许加载
‘self’	script-src ‘self’	同源策略，即允许同域名同端口下，同协议下的请求
data:	img-src ‘self’ data:	允许通过 data 来请求资源（如用 Base64 编码过的图片）
domain.example.com	img-src domain.example.com	允许特定的域名请求资源
*.example.com	img-src *.example.com	允许从 example.com 下的任意子域名加载资源
https://cdn.com	img-src https://cdn.com	仅仅允许通过 HTTPS 协议来从指定域名下加载资源
https:	img-src https:	只允许通过 HTTPS 协议加载资源
‘unsafe-inline’	script-src ‘unsafe-inline’	允许行内代码执行
‘unsafe-eval’	script-src ‘unsafe-eval’	允许不安全的动态代码执行（如 JavaScript 的 eval 方法）
mediastream:	media-src mediastream:	允许媒体流 URI 作为内容来源

注：多个选项值也可以并列，使用空格隔开

（3）实例

这里举例引入 twitter-bootstrap 样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 注意的 style-src --><meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline' cdn.bootcdn.net; media-src *; img-src 'self' data: content:;"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"><meta name="color-scheme" content="light dark"><link rel="stylesheet" href="css/index.css"><!-- 引入 twitter-bootstrap 样式--><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css"><title>Hello World</title></head><body><div class="app"><h1>Hello World</h1><div id="deviceready" class="blink"><p class="event listening">Connecting to Device</p><p class="event received">Device is Ready</p><!-- 使用 twitter-bootstrap 样式定义一个按钮--><Button class="btn btn-success">成功样式的按钮</Button></div></div><script src="cordova.js"></script><script src="js/index.js"></script></body>
</html>

注：如果同时设置某个单项设置（如 style-src）和 default-src，前者会覆盖后者，即样式表会采用 style-src 的值，其他资源则依然采用 default-src 的值

2、format-detection

（1）基本介绍

<meta name="format-detection" content="telephone=no">

格式检测

（2）参数

参数	说明
telephone	设置是否自动将数字转换为拨号链接 telephone=no：禁止把数字转化为拨号链接 telephone=yes：允许把数字转化为拨号链接，默认开启
email	告诉设备不识别邮箱，点击之后不自动发送 email=no：禁止作为邮箱地址 email=yes：把文字默认为邮箱地址，默认开启
adress	adress=no：禁止跳转至地图 adress=yes：开启点击地址直接跳转至地图的功能，默认开启

3、msapplication-tap-highlight

（1）基本介绍

<meta name="msapplication-tap-highlight" content="no">

Windows 上的触碰高亮

4、viewport

（1）基本介绍

<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

视口，是用户网页的可视区域

设备	浏览器默认视口大小
iPhone	980
iPad	980
Android Samsung	980
Android HTC	980
Chrome	980
Opera Presto	980
BlackBerry	1024
IE	1024

（2）参数

参数	说明
initial-scale	初始缩放比例，即当页面第一次加载时的缩放比例
width	控制视口大小，一般为了自适应设置为 device-width（设备宽度）
maximum-scale	允许最大的缩放程度，是一个浮点值
minimum-scale	允许最小的缩放程度，是一个浮点值
user-scalable	是否允许用户进行缩放，值为 yes 或 no
viewport-fit=cover	解决 iPhoneX tabbar 底部遮挡问题（使页面充满整个屏幕）

5、color-scheme

（1）基本介绍

<meta name="color-scheme" content="light dark">

使网页支持多种模式（高亮模式、暗黑模式），当用户的系统主题更改后，网页演示随之更改

（2）源码解析

index.css，针对不同模式，可以写不同样式

body {/* 默认高亮模式 */background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
}@media screen and (prefers-color-scheme: dark) {body {background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);}
}