javascript - 如何为 Google 地图制定 Google Api 内容安全策略
问题描述
我正在尝试使用 Electron.js 制作一个小型应用程序,并尝试向其中添加 Google 地图页面。我已经获得了一个 API 密钥。当我运行该应用程序时,它会短暂显示谷歌地图的图像,然后弹出错误:“糟糕!出了点问题。此页面没有正确加载谷歌地图。有关技术细节,请参阅 JavaScript 控制台。” 当我打开控制台时,我看到了错误:
"security-warnings.ts:179 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ security-warnings.ts:179
Promise.then (async)
warnAboutInsecureCSP @ security-warnings.ts:172
logSecurityWarnings @ security-warnings.ts:295
loadHandler @ security-warnings.ts:312
async function (async)
loadHandler @ security-warnings.ts:311
load (async)
securityWarnings @ security-warnings.ts:315
(anonymous) @ init.ts:216
./lib/renderer/init.ts @ init.ts:217
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
NativeModule.compile @ internal/bootstrap/loaders.js:287
NativeModule.compileForPublicLoader @ internal/bootstrap/loaders.js:222
loadNativeModule @ internal/modules/cjs/helpers.js:23
Module._load @ internal/modules/cjs/loader.js:699
Module._load @ electron/js2c/asar.js:717
Module._load @ electron/js2c/asar.js:717
Module.runMain @ internal/modules/cjs/loader.js:1038
(anonymous) @ internal/main/run_main_module.js:17
js?key=MY_API_KEY&callback=initMap:56 Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
_.od @ js?key=MY_API_KEY&callback=initMap:56
(anonymous) @ common.js:73
(anonymous) @ common.js:149
c @ common.js:67
(anonymous) @ AuthenticationService.Authenticate?1sfile%3A%2F%2F%2FUsers%2Fisaiahbell%2FProjects%2Fgeo-app%2Fmap.html&MY_API_KEY&callback=_xdc_._m2aezz&key=YOUR_API_KEY&token=54562:1"
我目前的代码如下:
索引.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<a href="map.html">Open Maps</a>
</center>
<script src="./render.js"></script>
</body>
</html>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
地图.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button><a href="index.html">Go Back</a><</button>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>
</body>
</html>
解决方案
请注意,您收到此错误:
谷歌地图 JavaScript API 错误:ApiNotActivatedMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
这意味着您需要在项目中启用JavaScript API。
如果启用后,您会遇到与 CSP 相关的错误,导致地图无法加载,然后查看如何允许内容安全策略从 google api 运行外部 javascript?
希望这可以帮助!
推荐阅读
- python - 根据行值返回列的平均值
- c++ - GDB MinGW-w64如何跨过函数指针?
- php - 单击登录按钮转到 404 Page Not Found (CodeIgniter)
- php - 使用 cURL 获得 While 循环?
- java - 正则表达式(正则表达式)。如何忽略或排除介于两者之间的所有内容?
- android - 在片段内设置具有网格布局的回收站视图/卡片视图
- c# - 实体框架 - 选择一个固定的数字数组作为查询的列
- windows - 在 Windows 中激活 conda 环境时如何更改目录
- java - 自动记录在 catch 块中,仅当注释异常变量时,对于 Java 或 Kotlin
- mongodb - 带有条件,排序和限制的mongodb组