配置data-width后，带Nonce的Google身份服务仍触发CSP违规

问题根源 #

当你给g_id_signin添加data-width属性后，Google的GSI客户端脚本（https://accounts.google.com/gsi/client）会动态生成内联style属性来控制按钮宽度，但你的CSP规则未授权这类内联样式。你添加的data-nonce仅作用于自身元素，无法覆盖第三方脚本生成的内联样式，因此无效。

可行解决方案 #

• 方案1：用哈希值授权特定内联样式（推荐）

  1. 从控制台错误信息中提取违规的内联样式内容（例如width: 300px;）
  2. 计算该内容的SHA-256哈希值（可通过在线工具或本地命令行生成）
  3. 将哈希值添加到CSP的style-src指令中，格式为'sha256-xxxxxx'
     示例CSP配置：

  Content-Security-Policy: style-src 'self' 'sha256-abcdef123456...' https://accounts.google.com;
  

  此方法仅允许指定的内联样式，不会全局放宽CSP权限。

• 方案2：用自定义CSS替代data-width（最安全）
  给g_id_signin元素添加自定义类名，通过外部样式表控制宽度，避免GSI脚本生成内联样式：

  <div class="google-signin-btn" g_id_signin ...></div>
  

  .google-signin-btn {
    width: 300px; /* 按需设置宽度 */
  }
  

• 方案3：临时放宽CSP（仅限测试）
  测试阶段可临时在style-src中添加'unsafe-inline'，但生产环境禁止使用，会引入安全风险：

  Content-Security-Policy: style-src 'self' 'unsafe-inline' https://accounts.google.com;
  

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