How do I avoid this X-Frame-Options SAMEORIGIN error when running the Google "Hello Analytics" API tutorial?

Question

I've been trying to run the https://developers.google.com/analytics/solutions/articles/hello-analytics-api tutorial to get up and running with pulling data programmatically from Google Analytics.

I've copied the sample files exactly, but when I access them via localhost in Chrome, I get the following error in the JavaScript console, and get redirected to about:blank :

Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=363192057646-fbj7q1oais...%2Flocalhost&response_type=token&state=327475409%7C0.2024869166&authuser=0' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I've tried all manner of tweaks but can't get this error to go away. Hope someone can assist (or indeed just direct me to a simple, working, Javascript example for accessing the Google Analytics API.

score 17 · Answer 1 · answered Nov 20 '15 at 01:42

17

Please check the Authorized JavaScript origins url in the Google API console in your Oauth Settings. This must be where you are authorising the javascript.

answered Nov 20 '15 at 01:42

elliotrock

3,410
3
22
25

1

The setting is here: https://console.developers.google.com/apis/credentials (at time of writing) – Myster Nov 29 '17 at 01:46
1

For me I had to and add the https origin (and remove the http origin) – Myster Nov 29 '17 at 01:48

Gledsley Müller · Answer 2 · 2015-02-20T15:45:46.490

I was having the same issue yesterday but then I realised I was using the wrong Client ID on my Credentials.

You should double check if you created a 'Client ID for web application' on APIs & auth > Credentials. And then use that Client ID.

I my case, I wrongly created a 'Service Account' first and used that Client ID. Then I realised the mistake and created a 'Web Application' and replaced the Client ID on hello_analytics_api_v3_auth.js (according to the tutorial on https://developers.google.com/analytics/solutions/articles/hello-analytics-api).

Btw, don't forget to create a Public API Access key.

EDIT: if you are using the google example fix the following function:

function handleAuthResult(authResult) {
  if (authResult) {
    gapi.client.load('analytics', 'v3', handleAuthorized);
  } else {
    handleUnauthorized();
  }
}

On the if statement, change to:

if (authResult && !authResult.error)

So you would end up with:

function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    gapi.client.load('analytics', 'v3', handleAuthorized);
  } else {
    handleUnauthorized();
  }
}

My colleague found the bug and made a pull request to fix it. I hope that sorts the issue now. It sorted for me ;-)

Thanks for the tip. I did wonder about Service Account vs Web Application so it's good to know that is the right option. However I have tried again and I still get the same error from the sample files as in the tutorial. From the version in the client library version on github, I get a different error: https://github.com/google/google-api-javascript-client/issues/182 — Alex Bowyer, Feb 18 '15 at 17:25
So we are facing the same issue now... I've managed to avoid the X-Frame-Options issue but I get the 'Login required' error. I'll keep a look at the github issue as well. — Gledsley Müller, Feb 20 '15 at 05:12
It's VERY IMPORTANT to create and set an API key, so don't forget! — nathanhleung, Oct 04 '15 at 03:01

score 3 · Answer 3 · answered Apr 25 '15 at 23:17

I was having the same issue with a Fusion table example I found online.

None of the answers I found online were useful at all but I finally solved the issue as follows:

Open the dev console in Chrome which shows the error and the url it is trying to access, open the Url in a new tab.

The page shows this:

400. That’s an error.
Error: invalid_request
Parameter not allowed for this message type: client_secret

So I edited the code:

  function auth(immediate) {
    gapi.auth.authorize({
      client_id: clientId,
      <!--client_secret: clientSecret,-->
      scope: scopes,
      immediate: immediate
    }, handleAuthResult);
  }

Et voila (:

score 0 · Answer 4 · answered Nov 18 '15 at 08:44

I had this error message many times before. Most of the time I just did call Google API inconsistently. To figure out, click the URL in the dev. console. A new window opens and you get a message like this:

400.
That’s an error.
Error: invalid_scope
Some requested scopes were invalid ...

score -2 · Answer 5 · edited May 23 '17 at 12:34

-2

I got it to work by clearning my cookies. --Solution posted in this similar issue here: Google+ API "400 (Bad Request)" and "Refused to display ... in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." errors

edited May 23 '17 at 12:34

Community

1
1

answered Jun 30 '15 at 20:14

esilver

1
1

closing the browser and/or clearing the cookies does not work – Yvonne Aburrow Feb 20 '18 at 11:00

How do I avoid this X-Frame-Options SAMEORIGIN error when running the Google "Hello Analytics" API tutorial?

5 Answers5

Linked