2

Trying to use the embed script from Google Trends results in the following error under Chrome.

Refused to display 'url' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I've put the script in the body of an index.html, and hosted it locally, as well as on an external server.

From what I can gather, it's to stop 'clickjacking', but it seems weird that the script Google provides doesn't work with their own browser. Firefox works just fine.

Is this a fundamental issue with Google Trend embeds just not working with Google's own products, or is it an issue with my server setup?

Fred
  • 858
  • 7
  • 14

2 Answers2

2

It's because your browser is set to block third party cookies. Enable third party cookies and the embedded Google Trends iframe will work.

If you look closely at the failing iframe request it contains this header:

p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."

The header links to this page with this explanation:

In some situations, the cookies we use to secure and authenticate your Google Account and store your preferences may be served from a different domain than the website you're visiting. This may happen, for example, if you visit websites with Google +1 buttons.

Some browsers require third party cookies to use the P3P protocol to state their privacy practices. However, the P3P protocol was not designed with situations like these in mind. As a result, we've inserted a link into our cookies that directs users to a page where they can learn more about the privacy practices associated with these cookies.

Community
  • 1
  • 1
Lloyd
  • 8,204
  • 2
  • 38
  • 53
0

I faced the same issue long back when I was working with my spring based project. One thing I can tell you upfront that this is not a problem with google trends and you need to solve it with a slight change in your request. With your request headers, you need to send an additional header X-Frame-Options and set its value to SAMEORIGIN.

I am not giving details about this because the similar issue has already been discussed here.

Hope this helps!!!

UPDATE 1:

Do not get confused about X-Frame-Options and the frame you are embedding. When you try to embed a frame on your web page, then the browser checks whether you are allowing SAMEORIGIN or not. By default, it is not enabled so you get the error. But in your back-end code, if you configure is such a way that with every request, your framework adds a header as X-Frame-Options with value as SAMEORIGIN then the browser will allow it. Note that SAMEORIGIN will allow every web page on your website and it can cause security issues. So another option is that instead of sameorigin you just set the Google Trends website with ALLOW-FROM tag.

(As per your comment you are using the Laravel framework (I have never used php), this link can be useful for you. Or you can google for "how to set x-frame-options sameorigin in laravel".

Arman
  • 634
  • 7
  • 12
  • Thanks for the response. How exactly would I send an additional header from client to server? I was under the impression that `X-Frame-Options` was sent _by_ Google, not _to_ them. – Fred Jul 18 '18 at 14:11
  • Which back-end framework/language you are using? I used spring framework so there I configured it in the `SecurityConfig.java` file. – Arman Jul 18 '18 at 15:42
  • Laravel/PHP, but I'm embedding directly in the React front-end. – Fred Jul 19 '18 at 09:47
  • 1
    I have updated my answer as per your comment. Hope it works for you. – Arman Jul 19 '18 at 11:31
  • I think I got it, thanks! I'll play around a little and let you know how it goes. – Fred Jul 19 '18 at 11:56