Issues initializing Google API

[simonferndriger]

I made a quick demo page which uses the Google (People) API and works great (https://matchflix.ch/_test/people.html). However, just loading the Google API with gapi.load('client', () => gapi.client.init($)); on @load within the script <script async defer src="https://apis.google.com/js/api.js" @load="auth.initAPI()"></script> causes the following warning and error:

cb=gapi.loaded_0?le=scs,fedcm_migration_mod:420 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.

[Report Only] Refused to load the script 'https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.IdpIFrameHttp.de.xxx/am=AMA/d=1/rs=xxx/m=base' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' blob: data:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[simonferndriger]

The iframe mentioned in the warning is created by the Google API Script https://apis.google.com/_/scs/abc-static/_/js/k=gapi.lb.de.BLQDy_vn0pk.O/m=client/rt=j/sv=1/d=1/ed=1/rs=AHpOoo-1MTZ74hRWAPY8e5ViMZpVeZW1dw/cb=gapi.loaded_0?le=scs,fedcm_migration_mod and appended to the body with document.body.appendChild(f);

The warning does not occur in the (regular) demo page using onload="..." without AlpineJS (instead of using @load="...").

[simonferndriger]

Closed
There was an issue with the argument (it needed to be an array) which I overlooked in the AlpineJS version

[ekwoka]

Of note: async and defer don't both work. If you put both you get async, you probably only want defer.

[simonferndriger]

Thanks! I got the code from Google Gemini - it's not perfect this Vibe Coding...😅