I have a bizarre issue - help please:
I have updated my app to use BS4. The app shows the video from remote cameras.
All seems correct except that now; I can only run from the server if I specify HTTP (insecure). If I use HTTPS (secure) I cannot get the video to display. Everything else seems to function correctly.
It is the same in Chrome and Safari on the desktop or mobile. No obvious errors are showing in Chrome debug.
Is there a work around for this?
Is the video also being served from the same https location?
It could be that the app is mixing secure and insecure content. If the video source server has a directive not allowing https, that could also be an issue.
Thanks for the suggestion and I suspect you are right - The clues are there but I can’t seem to identify the solution. The problem seems to have started after migrating to BS4.
The AS code is on a secure website (HTTPS).
Using BS3 I can launch the web app and the video loads OK. The video access is using DynDNS with HTTP (HTTP://xxx.dyndns.org). If I change the video URL to use HTTPS then it stops working but it has been running like this using HTTP for over a year without a problem.
However, if I convert the code to use BS4 controls and apart from re-jigging the layout slightly no other changes are made, the video stops working at all. Something has changed due to BS4 but it is not obvious what it may be.
The video is in an HTMLview control but that is not a BootStrap dependent control as I understand it.
Are you able to check the console /debug log for your app? It may give you some information. For example, in some cases due to CORS and CSP issues, at times I’m not able to pass an ajax call from a different domain / location.
If I deploy to a local folder the BS4 app works successfully. Deployed to a remote server - no dice. Again I am sure you are correct that it is a security issue.
Running locally I get this in the console:
[PWA] Error during service worker registration: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.
at appstudioFunctions.js:2252
(anonymous) @ appstudioFunctions.js:2284
jquery3.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery3.js:2
jquery3.js:2 Access to XMLHttpRequest at 'file:///E:/MyDocs/Sync/local-deploy/lulucam/logins.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.*
Nevertheless, the app works OK locally.
Running in local browser is also OK: With this console display:
[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://127.0.0.1:29567/lulucam/THROWMYHANDSUPINTHEAIR.TTF
GET http://127.0.0.1:29567/lulucam/THROWMYHANDSUPINTHEAIR.TTF net::ERR_ABORTED 404 (File not found)
[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: http://127.0.0.1:29567/lulucam/toolbox/bs4/dist/open-iconic/fonts/open-iconic.woff*
jquery3.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
jquery3.js:2 POST http://127.0.0.1:29567/lulucam/logins.txt 501 (Unsupported method ('POST'))
send @ jquery3.js:2
ajax @ jquery3.js:2
Ajax @ appstudioFunctions.js:432
ReadFile @ appstudioFunctions.js:406
Read_Login_File @ code.js:1417
(anonymous) @ code.js:69
(anonymous) @ (index):673
load (async)
(anonymous) @ (index):667
appstudioFunctions.js:2254 [PWA] Registration successful ServiceWorkerRegistration {scope: "http://127.0.0.1:29567/lulucam/", updateViaCache: "imports", active: ServiceWorker, installing: null, navigationPreload: NavigationPreloadManager, …}
and the video displays OK
Running on iPad /iPhone I cannot access the console so cannot identify any warnings. No warning messages pop up; I just don’t get any video. Calls to the logins.txt file work ok. As I mentioned previously, prior to BS4 this problem didn’t occur. Same compiler (v7.4.2.0).
The video problem may be a red herring and the issue is elsewhere but affecting the video. However, I cannot see that anything has changed other than the controls. Hopefully, there is a workaround for this.
What happens, exactly? Can you share the URL? (Send it by PM if necessary)
If you can run ios simulator, safari can be used to see the console log of your app.
Ensure that your app is running in ios simulator
Launch Safari > Develop > Simulator - then select your app
You’ll be able to see console messages.
An actual device requires access to xcode installed.
In your error it looks like you are also trying to access files NOT using http. For example:
jquery3.js:2 Access to XMLHttpRequest at ‘file:///E:/MyDocs/Sync/local-deploy/lulucam/logins.txt’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.*
And finally, you may need to add a CSP meta tag if you haven’t already done so. That has solved a number of issues I’ve had with Phonegap based apps.
Thanks for PM’ing me the link. Here are the messages which show on the console for me:
jquery3.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery3.js:2
appstudioFunctions.js:2254 [PWA] Registration successful ServiceWorkerRegistration
appstudioFunctions.js:2273 [PWA] Content is now available offline!
CGIProxy.fcgi:1 Failed to load resource: the server responded with a status of 404 ()
2(index):1 Mixed Content: The page at 'https://pfcon.co.uk/lulucam/' was loaded over HTTPS, but requested an insecure image 'http://luluscattery.dyndns.org:8001/snapshot.jpg?&user=admin&pwd=Cupcake7&t=1510999957272'. This content should also be served over HTTPS.
pwa.js:55 Mixed Content: The page at 'https://pfcon.co.uk/lulucam/pwa.js' was loaded over HTTPS, but requested an insecure resource 'http://luluscattery.dyndns.org:8001/snapshot.jpg?&user=admin&pwd=Cupcake7&t=1510999957272'. This request has been blocked; the content must be served over HTTPS.
(anonymous) @ pwa.js:55
Promise.then (async)
(anonymous) @ pwa.js:55
The FetchEvent for "http://luluscattery.dyndns.org:8001/snapshot.jpg?&user=admin&pwd=Cupcake7&t=1510999957272" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) @ pwa.js:52
pwa.js:1 Uncaught (in promise) TypeError: Failed to fetch
luluscattery.dyndns.org:8001/snapshot.jpg?&user=admin&pwd=Cupcake7&t=1510999957272:1 GET http://luluscattery.dyndns.org:8001/snapshot.jpg?&user=admin&pwd=Cupcake7&t=1510999957272 net::ERR_FAILED
The problem looks like it’s on your server - you need to make sure everything is properly set up for https.
Chrome has recently started enforcing this. It’s likely the new version of Chrome is what has sparked this problem, not switching to BS4.
It looks like your authentication is being sent as a GET querystring. Look into sending it as a POST over HTTPS. Note the “Mixed Content” message.
Volt might be an option for you. I’ve successfully used it as an end point using JWT. It integrates fantastically well with AppStudio (no surprise) and the service appears to be well maintained.
I know Chrome are tightening up wrt HTTPS but that doesn’t explain to me why the BS3 version works correctly.
It seems that the problem is that the BS4 version has woken the browsers up to the mixed content. This problem is not restricted to Chrome but occurs in Safari too.
Looking at the console message(s) it seems clear that it is the call to the video which is where the failure occurs. Unfortunately, the cameras (Tenvis JPT3815W) do not appear to support HTTPS so I cannot escape the presence of an HTTP call in the code.
It is a mystery to me why it works using BS3 controls but that is certainly the case. If I get a chance I may try changing each control manually until I find which one causes the issue but that could be a long tedious job. Unless there is a workaround I guess I’ll have to stick with BS3 – for the time being anyway.
Thank you for all the advice but I fear there is no practical solution. Any suggestions welcome, of course.
A little further information which may help identify the real issue here - I tried the BS4 version on my iPhone using Firefox and Edge. It works fine on both of those browsers but still not using Safari or Chrome. It also works on my Win10 desktop using IE11 - but not Edge or Firefox on the desktop.
There must be a clue there somewhere…
It clearly isn’t BS4 which has stopped the actual app from working but it introduces something which triggers the ‘mixed content’ alarm in those browsers which don’t like it.
I am going to implement JWT in my app. Do I need to reference a library for jwt in AppStudio?
It depends what you want to do with it. Simple web tokens can be handled with vanilla JavaScript functions.