Google登录按钮是否要求CSP的style-src配置'unsafe-inline'？

问题背景 #

我在测试Web应用中添加了“Sign In with Google”按钮，按照Google官方CSP配置指南设置了如下规则：

script-src https://accounts.google.com/gsi/client;frame-src https://accounts.google.com/gsi/;connect-src https://accounts.google.com/gsi/;style-src https://accounts.google.com/gsi/style;report-uri https://localhost.rubenlaguna.com/csp-report;default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';upgrade-insecure-requests

按钮可正常显示，但收到了style-src-elem的CSP违规报告：

{
  "csp-report": {
    "document-uri": "https://localhost.rubenlaguna.com/",
    "referrer": "",
    "violated-directive": "style-src-elem",
    "effective-directive": "style-src-elem",
    "original-policy": "script-src https://accounts.google.com/gsi/client;frame-src https://accounts.google.com/gsi/;connect-src https://accounts.google.com/gsi/;style-src https://accounts.google.com/gsi/style;report-uri https://localhost.rubenlaguna.com/csp-report;default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';upgrade-insecure-requests",
    "disposition": "enforce",
    "blocked-uri": "inline",
    "line-number": 383,
    "column-number": 8676,
    "source-file": "https://accounts.google.com/gsi/client",
    "status-code": 200,
    "script-sample": ""
  }
}

添加'unsafe-inline'到style-src可消除该违规，但想确认是否必须配置此项，或是有其他修改CSP规则的解决办法？

解决方案：无需强制使用'unsafe-inline'，两种更安全的替代方案 #

原因分析 #

Google的https://accounts.google.com/gsi/client脚本会动态注入内联样式渲染登录按钮，而现有CSP仅允许加载指定域名的外部样式，未授权任何内联样式，因此触发style-src-elem违规。

方案1：用哈希值允许特定内联样式 #

这是最安全的方式，仅授权匹配哈希的特定内联样式：

1. 从浏览器控制台或CSP报告详情中，提取被阻止的内联样式内容；
2. 计算该内容的SHA-256/SHA-384/SHA-512哈希值（可通过在线工具或本地命令生成）；
3. 将哈希值添加到style-src指令中，格式为'sha256-哈希字符串'。

修改后的style-src示例：

style-src https://accounts.google.com/gsi/style 'sha256-abcdef1234567890...';

方案2：用Nonce（随机请求标识符）授权 #

通过动态生成的唯一值，仅允许可信脚本注入的样式：

1. 每次HTTP请求生成一个唯一nonce值（如UUID）；
2. 在CSP的style-src中添加'nonce-你的随机值'；
3. 在加载Google GSI脚本的<script>标签上添加nonce="你的随机值"属性。

示例：
CSP规则片段：

style-src https://accounts.google.com/gsi/style 'nonce-随机UUID';
script-src https://accounts.google.com/gsi/client 'nonce-随机UUID';

脚本标签：

<script src="https://accounts.google.com/gsi/client" nonce="随机UUID"></script>

补充说明 #

• 若暂时无法处理哈希或nonce，添加'unsafe-inline'可快速解决问题，但从安全角度不建议长期使用；
• 可定期关注Google Identity Services配置细节，避免因脚本逻辑更新导致新的违规。

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