Google-api-javascript-client: Safari only bug: 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

Created on 21 Feb 2018  ·  67Comments  ·  Source: google/google-api-javascript-client

Dear GAPI team.
I have a security bug only on Safari.
Right in between loading and initialising GAPI I get these:

[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
[Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy.

2018-02-21 10 34 04

Most helpful comment

For what it's worth, this is still an issue in Safari 12.0 (14606.1.22.2 - macOS Mojave 10.14 Beta (18A326g)), _without_ an adblocker installed.

All 67 comments

What version of Safari do you use?

@TMSCH 11.0.3 (13604.5.6)

I can indeed see the message regarding strict-dynamic. It seems that Safari doesn't support this CSP directive. It doesn't seem to prevent the library to work though, so it's indeed low priority.
Thanks for the report!

Yo! I have the same problem, tested in Safari 9.

@TMSCH said that it does not prevent the library to work, but somehow the sign out thingy is not working... I don't know if the error causes it or not though. Everytime I run my signout function it just reloads the page and not signing out.

var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { console.log('User signed out.'); /* AJAX (Delete site session) */ }); auth2.disconnect();

PS: It works on Chrome, IE 11, EDGE (All latest ver as of now)

@EnVy28 are you only observing the error mentioned in the first comment? Why are you disconnecting the user too? You should remove that call.

@TMSCH It's my first time using Google's SSO so I just followed the basic example written in the docs which is, exactly like the above code I posted except, there is no auth2.disconnect();.

But without auth2.disconnect();, somehow my application won't signout, it just redirects to the main page, even though I delete the users session in my app.

It's all good though, I stopped using MacOS since Lion so I didn't know that Safari 9 and 10 support are over so we just stopped supporting that too.

Currently there are no problems with Safari 11 so far, so it's all good...

I get the same error on the latest version of Mas OSX with the latest version of Safari. So it appears to have not been solved.

yes this is happening in latest version of Mac safari

What is the solution for this issue? We get the same error as well.

Hi, I am having this issue using the Google People API to the the gmail contacts.
Basically is throwing it when my code try to open the google api popup to signing with gmail. It doesn't open it by the way.

This is the code:

// Signin process (init client)
        gapi.load('client:auth2', () => {

            gapi.client.init({
                apiKey: 'API_KEY',
                discoveryDocs: ['https://people.googleapis.com/$discovery/rest?version=v1'],
                clientId: 'CLIENT_KEY.apps.googleusercontent.com',
                scope: 'profile email https://www.googleapis.com/auth/contacts.readonly'
            }).then((data) => {

                // Signin with auth2 process (authentication from google)
                gapi.auth2.getAuthInstance().signIn()
                    .then((data) => {

                        console.log('data', data);
                        let signedin = gapi.auth2.getAuthInstance().isSignedIn.get();

                        // Once signed in, take data
                        if (signedin) {
                            console.log('people', gapi.client);
                            gapi.client.people.people.connections.list({
                                resourceName: 'people/me',
                                personFields: 'emailAddresses,names,phoneNumbers'
                            }).then((data) => {

                                let res = data.result;
                                console.log('data', res);
                                let phonesNumbers = res.connections;
                                let pageToken = res.nextPageToken;

                                // Displaying contacts
                                this.addContacts(phonesNumbers);

                                // NextPageToken
                                if (pageToken) {
                                    this.getMoreContacts(pageToken);
                                } else {
                                    this.showContacts();
                                }
                            }).catch((err) => {
                                console.log('err', err);
                            });
                        }
                        console.log('signedin', signedin);
                    }).catch((err) => {
                        console.log('Err', err);
                    });
            });
        });

This is the error that is throwing Safari.

screen_shot_2018-04-24_at_16 26 20

@abel672 Are you sure you don't have an Adblock on? These usually block these.
In that case you should catch this specific error and display a message to the user asking to disable the adblock extension.

I had the same issue, after disabling the adblocker, it started to work! Just curious, what does it have to do with the adblocker?

@akashzcoder The browser thinks the login popup is an advertisement lol... That's either some bad coding by the AdBlock devs or I don't know if the Google Api Client can do anything to prevent such things.

I had the same issue but its working now, I have posted the serialized form and remove other ajax parameters. very strange!!!

I have the same problem :(

For me, disabling ad blocker (ublock origin) doesn't work, but turning on incognito mode works.

Did anybody solve an Original Poster's bug?
Is there any solution for this?

I solved it in this way thanks to a friend.
Open Safari and go to 'Preferences'
Go to 'Security' window and disable 'Block pop-up windows'.

screen shot 2018-05-13 at 13 53 55

Hope that It can help.

I get the following error in my Safari console after opening google.com for a few seconds. This causes the input prompt to lose focus, which is very annoying due to how often I use google.

screen shot 2018-05-19 at 7 23 31 pm

After some digging, I realized that when the widget script for notification.google.com tries to execute, it will cause the error.

Solution: I added the following rule in my ad blocker (uBlock origin for Safari) to block the widget from loading.

www.google.com https://notifications.google.com/u/0/widget sub_frame block

UPDATE: 2019-01-10

www.google.com https://notifications.google.com/u/0/widget * block

screen shot 2018-05-19 at 7 29 11 pm

Hope this helps someone.

For what it's worth, this is still an issue in Safari 12.0 (14606.1.22.2 - macOS Mojave 10.14 Beta (18A326g)), _without_ an adblocker installed.

@marksdk To me that's worth a lot. Thanks!! : )

Thanks Safari!

I kept looking into this issue for a while, and I ran into a lot of trouble with Chrome adhering to CSP v3 and Safari still adhering to CSP v2: https://www.chromestatus.com/features/5633814718054400. In short, nonce- or hash-based whitelists will be a requirement at some point, but right now the major browsers just interpret the same whitelists differently ¯_(ツ)_/¯

That might help some of you narrow down the search when looking for an answer to CSP troubles.

I have scratched my head for a while but finally made it work for me.

Instead of having <script src="https://apis.google.com/js/platform.js"></script> in my index.html,
I'm appending it to <head> using Javascript.

const scriptNode = document.createElement('script');
scriptNode.src = this.gapiUrl;
scriptNode.type = 'text/javascript';
scriptNode.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(scriptNode);

I still get the error in safari console, but the Google API now works and I can log in users in safari even though it feels like the hackiest thing since targeting specific browser versions via CSS selectors.

Please let me know if there's a better solution.

I am getting this error when accessing a site from Safari 12 having reCaptcha V3 enabled on it. The reCaptcha script loads this URL: https://www.google.com/recaptcha/api2/anchor
By simply issuing an HTTP GET request to that URL (no params needed), we get back the following HTTP header from the server:
Content-Security-Policy: script-src 'nonce-guXj7w7oWwUuGz/RZw2vXUoxt7E' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval';object-src 'none';base-uri 'self';report-uri https://csp.withgoogle.com/csp/recaptcha/1

The HTTP header contains this 'strict-dynamic' option and that causes Safari to write many error messages to the console. The code works but these error messages are annoying.

Safari has Content Security Policy 2 and the 'strict-dynamic' option is introduced in CSP 3. CSP 3 is 'Working Draft', CSP 2 is 'Recommendation'.

I have the same error, when my app uses google recaptcha in safari

I have the same error, when my app uses google recaptcha in safari

Same thing here. Using ReCaptcha on Safari makes it freeze.

Getting the same error here using Invisible reCaptcha v2

Same error, using reCaptcha v2

Found the solution on SO. You have to trigger the popup in response to a click. There is no alternative and there likely never will be unless Google cracks Safari's popup blocker.

@abel672 thank you for informing us of the cause, it helped find the answer.

To add another set of scenarios to this issue for tracking, my main domain works but this issue exist on a subdomain on Safari and Safari Technology Review 12.1. Interestingly, Safari on iOS can log into the same subdomain that desktop is unable to sign into.¯_(ツ)_/¯

The same error, but it appear today first time : (
Safari 11.1.2

I am seeing this in http://console.firebase.google.com on Safari. The console fails to load 😢

I am seeing this in http://console.firebase.google.com on Safari. The console fails to load 😢

I found just http://console.firebase.google.com can not load. You can visit your project page directly, like https://console.firebase.google.com/project/your_project_id/overview

Update: http://console.firebase.google.com/ started working for me earlier this week. No changes to Safari still Version 11.0.3 (13604.5.6). macOS High Sierra 10.13.3.

I still have this error using Google reCaptcha on Safari 12.0.2.

Hello,
i am also facing same issue. tried almost all solution provided above but no success.

Any one found solution? please help

Also have a troubleshooting with google recaptcha on Safari

Hi,
I also have this problem using Recaptcha (2 or 3, I tried both) on Safari 12.0.3.

"It doesn't seem to prevent the library to work"

But it creates false alarms on production sites that use APM tools.

The actual error messages are hidden by default, due to crossorigin rules, so I only found out that this was the cause after real-device testing.

Any fix for this issue on ReCAPTCHA would be greatly appreciated.

I can confirm that issue. I'm on Safari 12.0.3 on MacOs 10.13.6. No addblockers installed.
Is Recaptcha even using this client? It does not figure in the listing of the README.

Even on the Google Recaptcha demo page, the error is present. See screenshots.

This is extremely painful for users using Safari.

Screen Shot 2019-03-11 at 20 07 12

Not every browser, even their respective latest versions, supports every CSP directive. Period.
EDIT: Google is Google IS EVIL. Get over it. They're in full control of the browser maret ever since Microsoft bowed to them and began using Goggle's web engine instead of the one they develeoped in-house and used in various incarnations ever since IE was born. Now Edge exists yet it too stopped using Microsoft devs and instead now licks the boots of Google by using Chromium as its base.

sooo... there's no solution ?

Try adding "localhost" to the recaptcha list of domains.

Hi all,
I believe this issue is due to Safari being a browser without CSP 3.0 compliance and thus will ignore strict-dynamic.

Here's an example site you can view to see compliance:
https://csp-experiments.appspot.com/strict-dynamic

Related tracking issue:
https://github.com/Fyrd/caniuse/issues/2315

Progress on this issue is blocked by that Safari support.

Hi,

I had the same problem, I added a nonce attr to my script tag and my project is working on Safari...
var scriptElement = document.createElement('script');
scriptElement.nonce = 'this_is_my_nonce';
scriptElement.setAttribute('recaptcha-v3-script', '');
var scriptBase = 'https://www.google.com/recaptcha/api.js';

For my case, even after loading the api.js by javascript successfully, once it tries to reloadAuthResponse(), it will receive an error 'userLoggedOut', I can not find any document/hint about the error.

Suddenly, after I changed the UX mode of the .signIn() function from 'redirect' to default (popup), there are still errors on the console, but magically, the script can load and users can log in normally.

I still don't understand the reason, since the code of the auth2 module is converted and hard to read on the browser.
I can only guess that the redirect request (after login) failed to update some cookies, so the redirected page can not authenticate with Google, this does not happen in popup mode because the page is not redirected?

Anyway, it seems working. Hope this can help others. Please let me know if there is any way to dig deeper about this issue.

I got the same problem at MacOS 10.15.2 (19C57) and Safari Version 13.0.4 (15608.4.9.1.3).

Hi All

We have the same issue making calls to the google reaptcha v3 API from a web application (React + Gatsby) which is loaded in a react-native webview on iOS.

Safari on desktop (MacOS 10.15.2) allows the call to pass but with lots of warnings, but react-native-webview on iOS blocks the call entirely.
the same code works fine on Android, and on Chrome and Firefox on desktop.

anyone had any breakthroughs in making this happen?

Is there a solution to this? Having the same issue, no popup blocker, MacOS 10.15.2, Safari version 13.0.4, only error:
"The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored."

It's keeping me from submitting a form.

Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy.

is also showing on GMail's web UI. The old 2004 vintage/low or slow bandwidth version works fine, but the new Standard view doesn't load. It's been balking for a few days, but now just fails.

I got the same error using it on Magento 2. Any solution?

Same - using raw via PHP + Laravel (no packages).

Same - Safari 12.1.2, Angular + ReCaptcha

Same issue. Safari 13.1.1, Angular + Trading View Widget

Same here using Divi theme's implementation of Recaptcha 3 in Wordpress on Safari 13.1.1 on MacOS Catalina 10.15.6. However this doesn't prevent my Contact Form to be submitted on any device (Mac, iPhone, iPad). Just looks sloppy to have so many errors in the console.

I have rollbar (an error reporting tool) hooked up to my javascript in production sites. I take errors seriously as a developer. This is such a shame.

Here I stumble back on the same issue almost 3 years later.

This time I cannot seem to use Google reCaptcha in a Capacitor app for iOS.

Any advice on how to make this work, in order to be able to use Phone Auth for Firebase, much appreciated!!

Forget it, they just don't care.

Same here.

The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

Google ReCaptcha v2 invisible
Safari Version 13.1.1 (15609.2.9.1.2)

I have the same problem with _Safari 14.0 15610.1.28.1.9_
with reCaptcha too

This error prevents our form from loading in Safari and iOS

Hi all,

I see a lot of activity here and I'd like to be able to help, but it's not clear to me how. Here are a few questions I would like to know the answer to, from anyone who is still having trouble.

  1. Is there is an issue with gapi as opposed to reCAPTCHA? This bug tracker is for gapi, not reCAPTCHA; as far as I can tell the recent complaints over the last year or two are about reCAPTCHA and not gapi. If there is some integration between them that I'm not aware of, I apologize, but maybe you can point me to what it is. This bug was originally filed because gapi was triggering these warnings, but that was fixed years ago as far as I know.

From what I can tell, the reCAPTCHA team uses StackOverflow for helping out on questions like this, so if the problem is purely reCAPTCHA related I suggest posting there instead.

  1. Are the error messages are just spurious warnings or do they actually indicate breakage? reCAPTCHA's demo does seem to work on Safari, so I'm not sure if the error messages are serious or are just ignorable log spam. I also see a few stack overflow answers suggesting that they are just notices and not fatal errors.

Can anyone who is having trouble clarify answers to these two questions for their use case? Thanks.

Hi @sergentj

Since your team already solved a similar issue years ago, I think communicating the solution to the recaptcha team will be the best approach.

We are getting this error message in the console (Safari): The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

I believe that the "strict-dynamic" header value is transmitted by the server when issuing a GET HTTP request to https://www.google.com/recaptcha/api2/anchor

So the task is to check why that HTTP response includes that header value and whether it is possible to make it supported in Safari.
This is a sample value of that header:
Content-Security-Policy: script-src 'nonce-Y2U53p7Dpty6XSdv8PgARw' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval';object-src 'none';base-uri 'self';report-uri https://csp.withgoogle.com/csp/recaptcha/1

Thanks.

Hi, thanks for your reply. It'd be better if you can engage directly with the reCAPTCHA team for help on this rather than use me as a go-between, because I'm sure they will have followup questions for you. According to their documentation, you should email [email protected] for bugs and feature requests, or use Stack Overflow for general support.


these are 2 independent error/warning messages those appear in Safari independently each other.
Special thanks to @mesqueeb for a detailed data for research provided.
So, let's examine each one separately.

  1. [Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
    Safari doesn't fully support 'strict-dynamic' and honestly warns about it in its console. Actually it's not an error, it's just a warning. Note that this error does not contain the name of the affected script, this is a general warning.
    Such warnings are normal practice for all browsers.
    We will have to live with this warning until Safari is fully CSP3 compliant.

Anyway, the Google API Client Library developers have no control over Apple's state of affairs.

  1. [Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy.
    The err means some inline script is really locked. Why this does not prevent the Google API from normal operate, see para 4 below.

  2. In 99% of cases, this error occurs inside an invisible Google frame, in which data is exchanged with Google services. Pay attention to the place of error occurred: postmessageRelay (it works in its frame) and iframe: 0
    To protect this frame, related Google service publishes within it the own CSP in browsers backward compatibility mode, one of such CSP is shown by @tom-b-wright above.
    Do reduce security of auth iframes Google just because of Safari console warnings - not a good idea.

1% of cases:

  • @EnVy28 : looks like he has problem with X-Frame-Options header, it is a separate Safari bug
  • @abel672 does not have a second error message, looks like Safari just locks a popup window due to some other reason.
    If such error related to you own CSP, not Google's one, it could be fixed in some cases.
  1. Why reCAPTCHA/Auth2 continues to operate even second error occurs and some calls seems to be blocked?
  2. I think in some cases Google uses backup way to delivery his requests, because scripts are created on browsers compatibility manner.
  3. most common situation is an usage construct to prevent following the hyperlink. CSP locks it as inline script, but simultaneously it prevents follow link the same as void(0).

Safari is special. Therefore developers have a related headache like it was with IE6 few years ago.

image

Uncheck the Prevent cross-site tracking (default is on) solved my issue of cross site images and script loading. ( MacOS Big Sur )

Mac
WX20201127-163628
IPhone
1606466321109
I hope it can help you!

Was this page helpful?
0 / 5 - 0 ratings