X-Frame-Options: DENY

[Jama]

I am trying to get Dashticz to show the train times for my local metro station. Tfl (Transport for London) have an api for that but I am getting the following error

api.tfl.gov.uk is blocked
api.tfl.gov.uk refused to connect.
ERR_BLOCKED_BY_RESPONSE

Chrome console shows the following error
Refused to display 'https://api.tfl.gov.uk/StopPoint/940GZZ ... pp_id=xxxx' in a frame because it set 'X-Frame-Options' to 'deny'.

I know this is an x-frame origin restriction but the cors proxy should’ve taken care of that. I checked if my Raspberry is running php and it wasn’t so I installed it
pi@raspberrypi:~ $ php -v
PHP 7.3.14-1~deb10u1 (cli) (built: Feb 16 2020 15:07:23) ( NTS )
Copyright (c) 1997-2018 The PHP Group

This is the link in my config.js file. Note the xxxx are where my api key and app key go. The link works fine in the browser with and without the api keys. Without the keys, you are limited to a few queries I believe. If you want to test the link and see the response follow this link;
https://api.tfl.gov.uk/StopPoint/940GZZ ... ?mode=tube

var frames = {}
frames.tube = {
frameurl:"https://api.tfl.gov.uk/StopPoint/940GZZ ... d=xxxxxxxx",
height: 350}

I’ve spent two days trying to figure this out and I just can’t. I’d appreciate any help on this.

Thank you

[Lokonli]

With the 'forcerefresh' block parameter for the frame block, you could define how the frame will get loaded (directly, by adding t=<timestamp> parameter, or via the CORS proxy).
However, while checking this I noticed the frame block contains a bug, and the forcerefresh parameter doesn't work. (in fact the frame doesn't refresh at all ...)

I will fix this in a next beta.

Further, the link you provided will return the raw json data. Something like:

Code: Select all

[{"$type":"Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities","id":"1163664150","operationType":1,"vehicleId":"051","naptanId":"940GZZLUFBY","stationName":"Fulham Broadway Underground Station","lineId":"district","lineName":"District","platformName":"Westbound - Platform 1","direction":"inbound","bearing":"","destinationNaptanId":"940GZZLUWIM","destinationName":"Wimbledon Underground Station","timestamp":"2020-06-16T09:15:55.6103949Z","timeToStation":769,"currentLocation":"Between St. James's Park and Victoria","towards":"Wimbledon","expectedArrival":"2020-06-16T09:28:44Z","timeToLive":"2020-06-16T09:28:44Z","modeName":"tube","timing":{"$type":"Tfl.Api.Presentation.Entities.PredictionTiming, Tfl.Api.Presentation.Entities","countdownServerAdjustment":"00:00:00","source":"0001-01-01T00:00:00","insert":"0001-01-01T00:00:00","read":"2020-06-16T09:16:01.522Z","sent":"2020-06-16T09:15:55Z","received":"0001-01-01T00:00:00"}},{"$type":"Tfl.Api.Presentation.Entities.Prediction, Tfl.Api.Presentation.Entities","id":"1566767429","operationType":1,"vehicleId":"064","naptanId":"940GZZLUFBY","stationName":"Fulham Broadway Underground Station","lineId":"district","lineName":"District","platformName":"Eastbound - Platform 2","bearing":"","timestamp":"2020-06-16T09:15:55.6103949Z","timeToStation":648,"currentLocation":"At Wimbledon Park Platform 1","towards":"Check Front of Train","expectedArrival":"2020-06-16T09:26:43Z","timeToLive":"2020-06-16T09:26:43Z","modeName":"tube","timing":{"$type":"Tfl.Api.Presentation.Entities.PredictionTiming, Tfl.Api.Presentation.Entities","countdownServerAdjustment":"00:00:00","source":"0001-01-01T00:00:00","insert":"0001-01-01T00:00:00","read":"2020-06-16T09:16:01.522Z","sent":"2020-06-16T09:15:55Z","received":"0001-01-01T00:00:00"}},

So that means some additional work needs to be done to get it in a presentable format.

Probably the best approach is to extend the publictransport.js component.
See: https://github.com/Dashticz/dashticz/bl ... ansport.js

How are your coding skills?

Alternative:
find a link of a webpage containing the public transport info that can be shown in a frame.