Google Map React 严格CSP下触发'refused to apply inline styles'错误求助

问题根因 #

CSP 规则中 style-src * 仅允许加载来自任意外部域名的CSS文件，不覆盖内联样式资源（包括动态插入的<style>标签、元素上的style属性），*通配符本身不包含'unsafe-inline'这类特殊关键字。google-map-react v2.1.9默认会在运行时动态注入内联样式标签，因此被CSP规则拦截。

可执行解决方案 #

方案1：配置CSP nonce（最推荐，无业务侵入） #

1. 在你的CSP规则的style-src字段添加动态nonce值，nonce需每次请求随机生成，修改后的CSP示例代码如下：

// randomNonce为服务端/静态服务每次请求生成的随机唯一字符串
const randomNonce = '随机生成的nonce值';
var cspScriptPolicy = `default-src 'none'; connect-src * 'self'; font-src *;img-src * data:; script-src * 'self' maps.googleapis.com; style-src * 'nonce-${randomNonce}'; manifest-src 'self';`;
// Inject a tag to disable inline scripts 
var cspMetaTag = document.createElement('meta'); 
cspMetaTag.setAttribute('http-equiv', 'Content-Security-Policy'); 
cspMetaTag.setAttribute('content', cspScriptPolicy); 
document.getElementsByTagName('head')[0].appendChild(cspMetaTag);

2. 初始化google-map-react组件时，将相同的nonce值传入组件，库注入样式时会自动携带该nonce通过CSP校验：

import GoogleMapReact from 'google-map-react';

const MapComponent = () => {
  return (
    <GoogleMapReact
      bootstrapURLKeys={{ key: '你的谷歌地图服务密钥' }}
      defaultCenter={{ lat: 59.95, lng: 30.33 }}
      defaultZoom={11}
      // 传入与CSP规则一致的nonce值
      nonce={randomNonce}
    />
  );
};

方案2：禁用库的内联样式注入，手动引入外部CSS #

如果你的场景无法生成动态nonce，可以直接关闭库的动态样式注入逻辑，提前将内置样式提取为外部CSS文件引入：

1. 从google-map-react v2.1.9的源码中提取所有内置CSS样式，保存为google-map-react.css文件，放入项目静态资源目录
2. 初始化组件时添加disableDefaultStyles参数，禁用内联样式注入：

<GoogleMapReact
  bootstrapURLKeys={{ key: '你的谷歌地图服务密钥' }}
  defaultCenter={{ lat: 59.95, lng: 30.33 }}
  defaultZoom={11}
  disableDefaultStyles={true}
/>

3. 在项目入口文件引入提取好的CSS文件即可，外部CSS资源符合style-src *规则，不会被CSP拦截。

方案3：升级库版本 #

google-map-react v2.2.0及以上版本优化了样式注入逻辑，默认适配CSP规则，也可以选择升级到最新稳定版本规避该问题。

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