Figured out why on fresh Chrome installs, iframe with embedded Google Calendar won’t work and show `(blocked:other)` in the Network Tab of Chrome Developer Tools
Posted by jpluimers on 2023/11/09
Wow, what a long title!
What happened is that I have a few dashboards for people that include various embedded Google Calendar widgets in <iframe>s.
These won’t show on fresh installs of Google Chrome that have the particular user signed on in the Chrome Settings so that settings will be synchronised, right?
Right?!
Wrong!!
Not all Chrome settings will be synchronised by Chrome. Things like [Wayback/Archive] “On startup” (with the pages shown after Chrome startup) and wich installed extensions are synchronised including the visibility of their icons. But the settings of the extensions themselves will not.
This means that odd things happen, for instance extensions like [Wayback/Archive] Privacy Badger and [Wayback/Archive] uBlock Origin being installed, but both reverting to their default settings.
That in turn leads to hard to see problems, in this case the embedded Google Calendar <iframe>s failing.
I wrote about those before in these blog posts:
- Some ideas to show a Google Calendar on a TV using a Raspberry Pi and HDMI output
- html – How can I scale the content of an iframe? – Stack Overflow
- JavaScript – how to refresh an iframe automatically – Stack Overflow
How I got the <iframe> URLS
Especially the first post in the above list is dense, so let me first recap how I created the <iframe>s in the first place.
I documented in a series of tweets starting at [Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “@baardvrouw @googlecalendar That was a long time ago, so let me check my post “ and threaded at [Wayback/Archive] Thread by @jpluimers on Thread Reader App:
- That was a long time ago, so let me check my post Some ideas to show a Google Calendar on a TV using a Raspberry Pi and HDMI output
- I think I followed the guide at blog.vendilli.com/google-calendar-responsive for the base URL.
- Yup, I started at calendar.google.com/calendar/u/0/embedhelper?ctz=Europe/Amsterdam then clicked some buttons to get most parameters right.
- then tweaked using parameters on mark.boyden.name/smartsection.item.114/embedding-google-calendars-in-website.html
- and more parameters on Google Calendar – printing multiple months or weeks to PDF – URL parameter tips and tricks
That was in a response to [Wayback/Archive] Amy Pandemie (ja, nog steeds.) on Twitter: “@jpluimers @googlecalendar Hebt ge die geprepareerde iframe code van hier gepakt of zelf iets ineen gestoken? …”
The error behind the <iframe>s not showing
I documented the page and the errors in this Tweet so I would not forget to figure out what happened:
[Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “Trying to figure out why @googlecalendar “ elements won’t load in Chrome. The URLs like … both 302 redirect to URLs like … The latter give `
(blocked:other)`. I have seen this happen for a while. Not sure why yet. “
- from:
https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&wkst=2&src=example@gmail.com- 302 to:
https://accounts.google.com/ServiceLogin?service=cl&passive=1209600&osid=1&continue=https://calendar.google.com/calendar/embed?showTitle%3D0%26showNav%3D0%26showDate%3D0%26showPrint%3D0%26showTabs%3D0%26showCalendars%3D0%26showTz%3D0%26mode%3DAGENDA%26wkst%3D2%26src%3Dexample@gmail.com&followup=https://calendar.google.com/calendar/embed?showTitle%3D0%26showNav%3D0%26showDate%3D0%26showPrint%3D0%26showTabs%3D0%26showCalendars%3D0%26showTz%3D0%26mode%3DAGENDA%26wkst%3D2%26src%3Dexample@gmail.comiframes on page: left calendar entries; top-right calendar month; bottom: varous weather widgets
errors while loading the Google Calendar
iframes
Below is the journey to how fix it (threaded at [Wayback/Archive] Thread “The journey” by @jpluimers on Thread Reader App).
Note: no response of either [Wayback/Archive] Chrome (@googlechrome) | Twitter (which seems to only respond to tweets sent during USA office hours: welcome to the World Wide Web people!) or [Wayback/Archive] Privacy Badger (that account seems to be dead).
-
The journey:None of the extensions were visible on the @googlechrome toolbar.This made the icons of @PrivacyBadger and @ublockorigin invisible.Clicking on the extensions icon made them visible:
- By default @PrivacyBadger disables bout accounts.google.com and calendar.google.com, hence the `
(blocked:other)` in the first tweet.
- Enabling just calendar.google.com in @privacybadger is not enough: it will show the calendar `
<iframes>`, but with empty content:
- The reason is that calendar.google.com asynchronously updates the information from the domain clients6.google.com which is also by default blocked by @privacybadger:
-
After enabling clients6.google.com in @privacybadger and refreshing both calendar `
<iframe>` instances (or the page), both show data.(I only show the first row of Week on the left and Month on the right because of privacy reasons)
-
There was no need to unblock anything in @ublockorigin as the blocked URL gadgets.buienradar.nl/akam/13/pixel_* was outside the google.com domain:You need to open the logger (second icon from the right on the bottom row) to show this.I wish clicking on “blocked” showed that.
- Lessons learned:
- when things do not work on a page, verify the number badges on the @googlechrome extensions
- @privacybadger is very strict (for good reason)
- @ublockorigin logger is in a separate panel and not intuitive to find
/end
References
Via [Wayback/Archive] “(blocked:other)” “Chrome” – Google Search, I figured out the (blocked:other) had to do with the installed extensions:
- [Wayback/Archive] google chrome – Devtools: Filter (blocked-other) status in network tab – Stack Overflow (thanks [Wayback/Archive] martixy for asking, [Wayback/Archive] wOxxOm for commenting and [Archive/Archive] Brandon Barkley for making that comment into an answer)
-status-code:0will filter thisto which I commented
Note that on my system this does filter uBlockOrigin blocked content (which are lines showing in red and having
(blocked-other)), but not Privacy Badger blocked content (which are lines showing in grey and having(blocked-other)). Apparently it depends on the kind of filtering differs between these two extensions. - [Wayback/Archive] javascript – Google Chrome shows the status of XHR call as (blocked:other) – Stack Overflow (by [Wayback/Archive] Saurabh Tiwari) with two answers:
- “one possible resolution if you use adblock or any plugins like that, unenable that” by[Wayback/Archive] LINGZHI FAN
- “This massively helped me. Was related to ad blocker. My ajax url had the word ‘advert’ in it so the ad blocker https://stackoverflow.com/a/56048381” by[Wayback/Archive] omarjebari.
- [Wayback/Archive] Getting ‘blocked:other’ error status from the browser – In Angular application, I made a rest api call to fetch the information from the server – Stack Overflow (both asked and answered by [Wayback/Archive] User RajuPedda – Stack Overflow)
When we have query params like ‘adBanner’, ‘ad’ & ‘bannerId’ etc.. in the API url, it will be blocked by ‘AdBlock’ extension from the browser. In my case, there is a ‘bannerId’ keyword in the query params. So it is blocked by the browser extension.For other keywords which are used by AdBlocker, please refer to the below url https://easylist.to/easylist/easylist.txt.
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a comment