I am building a basic Sign in with Google button for web.
I have a Content Security Policy which allows the script and stylesheet:
https://accounts.google.com/gsi/client
(script)https://accounts.google.com/gsi/style
(style)
I also generate a nonce and apply it to the script and g_id_onload
element.
All works fine until I specify a data-width
for the g_id_signin
element,
then I get the following error in the console:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-yabBPsMUhoS3puXhavrK3l4CtOHBOD6N' https://accounts.google.com/gsi/style". Either the 'unsafe-inline' keyword, a hash ('sha256-/NAzIV0UZjora6la1jgdDN9mQ1erpm0+Y2osWuSlG0Q='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
The error comes from https://accounts.google.com/gsi/client
: a.innerHTML=Yj(b)
, not sure if that helps any bit.
The full code (signin.html
):
<script
async
nonce="yabBPsMUhoS3puXhavrK3l4CtOHBOD6N"
src="https://accounts.google.com/gsi/client"
>
</script>
<div
id="g_id_onload"
data-auto_prompt="false"
data-client_id="..."
data-context="signin"
data-login_uri="..."
data-nonce="yabBPsMUhoS3puXhavrK3l4CtOHBOD6N"
data-use_fedcm_for_prompt="true"
data-ux_mode="redirect"
>
</div>
<div
class="g_id_signin"
data-logo_alignment="left"
data-nonce="yabBPsMUhoS3puXhavrK3l4CtOHBOD6N"
data-shape="rectangular"
data-size="large"
data-theme="outline"
data-text="signin_with"
data-type="standard"
data-width="400"
>
</div>
As you can see I even tried to add data-nonce
to the g_id_signin
element.
Any help here would be appreciated, I feel like I am doing everything I should be doing.