0

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.

0