bp2008 / ui3

A powerful, modern HTML5 web interface for Blue Iris.
GNU Lesser General Public License v3.0
120 stars 18 forks source link

Uncaught SyntaxError: Unexpected token < #49

Closed vacari closed 2 years ago

vacari commented 3 years ago

Hi, Sorry because the language is not my native language. Before, I would like to congratulate you for the excellent work. I'm a fan of UI3 and I always recommend BI because of it. I have had problems with UI3 for a long time. Many versions of BlueIris have been updated since version 4.x, always with the same error. The problem occurs with my 4G mobile connection on my Samsung S8 Android 9. When I connect via my home Wi-Fi network, everything is fine. However, if I connect Windows 10 to my phone via wifi tethering (using the bridge with the 4G connection), the error also occurs on IE, Edge and Chrome on the PC. Apparently some proxy problem or something else on the mobile operator. However I would like to ask you to look at the debug, as there may be a solution for my case and for these other users that I found here: https://ipcamtalk.com/threads/uncaught-syntaxerror.40164/ I have already updated to version 123 of UI3, but my latest version of BI is 5.2.4.4. The errors shown are below: Blue_Iris_UI3_Uncaught_SyntaxError 2020_10_17BlueIris_UI3_Uncaught_SyntaxError 2020_10_17_Blue_Iris_UI3_Uncaught_SyntaxError_Internet_Explorer 2020_10_17_Blue_Iris_UI3_Uncaught_SyntaxError_chrome_2

_

"An unexpected error has occured in /ui3.htm (v 123 / 5.2.4.4) ... Uncaught SyntaxError: Unexpected token '<' at http: //censored_hostname/ui3/ui3-local-overrides.js? V = 123-5.2.4.4 [1: 1]" "This Session is invalid"

_

I already thank you for reading this far and if possible an answer.

Best regards,

bp2008 commented 3 years ago

Hello. We need to gather more information.

Please try this:

1) Open the developer console in Chrome on the tethered laptop. 2) Open UI3 and get the error about the "unexpected token". 3) In the Network tab of the developer console, click the request for "ui3-local-overrides.js". 4) Copy or screenshot the "Response".

vacari commented 3 years ago

Hi, I don't know if I managed to capture what you need, but here are some screenshots: Clipboard00 Clipboard01 Clipboard02 Clipboard03 Clipboard04 Clipboard05 Clipboard06 Clipboard09

Thank you!

bp2008 commented 3 years ago

There is definitely some weird stuff going on.

It looks like your session is getting lost so that UI3's requests start getting redirected to Blue Iris' login page. There are a lot of ways this could happen. I will list some:

  1. Chrome/Android has a "Data Saver" option which has been known to cause session-related issues in the past. If that is enabled, try turning it off. You should be able to find it by searching the Settings app for "Data Saver". If you don't find it, then look in the Chrome browser settings instead.
  2. If you connect using a proxy server then it may be buggy or misconfigured regarding HTTP cookies.
  3. Your mobile network provider could be interfering with communication. If so, it is likely that you could solve this problem by using a VPN to connect to Blue Iris. Some routers have VPN server capabilities built in; this would be the easiest thing to use. Otherwise it is also possible to run a VPN server on the same computer as Blue Iris.
  4. It is possible that Blue Iris is crashing regularly, causing your session to be lost. I think you would probably have noticed this however.
  5. If you use any other web services using the same domain name, it is possible that they are using a cookie with the name "session" which is overwriting Blue Iris's session cookie. You might not notice this on the LAN if you have LAN authentication disabled or if you use a different hostname to connect to Blue Iris on your LAN. One way to fix this is to set up different web domains for each service. Another way is to use a different web browser for each service.
vacari commented 3 years ago

Hi

-1. Chrome/Android has a "Data Saver" option which has been known to cause session-related issues in the past. If that is enabled, try turning it off. You should be able to find it by searching the Settings app for "Data Saver". If you don't find it, then look in the Chrome browser settings instead. @vacari: I think this is not the reason, because Lite Mode is not enabled. In addition, wifi works normally and in Chrome Windows there is no Data Saver or Lite Mode.

-2. If you connect using a proxy server then it may be buggy or misconfigured regarding HTTP cookies. @vacari: My provider maybe.

-4. It is possible that Blue Iris is crashing regularly, causing your session to be lost. I think you would probably have noticed this however. @vacari : Yes, this would be noticed through other connections, which is not the case.

-5. If you use any other web services using the same domain name, it is possible that they are using a cookie with the name "session" which is overwriting Blue Iris's session cookie. You might not notice this on the LAN if you have LAN authentication disabled or if you use a different hostname to connect to Blue Iris on your LAN. One way to fix this is to set up different web domains for each service. Another way is to use a different web browser for each service. @vacari : As in the previous item, this would be perceived through other connections, which is not the case.

-3. Your mobile network provider could be interfering with communication. If so, it is likely that you could solve this problem by using a VPN to connect to Blue Iris. Some routers have VPN server capabilities built in; this would be the easiest thing to use. Otherwise it is also possible to run a VPN server on the same computer as Blue Iris. @vacari: I came to this same conclusion. Changing the variables (device, OS, browser, provider) occurs only with this provider. What I am researching is: Why "resource interpreted as stylesheet but transferred with mime type text/html"? This is apparently causing the ui3.js and ui3-local-overrides.js scripts to be interpreted in error.

bp2008 commented 3 years ago

What I am researching is: Why "resource interpreted as stylesheet but transferred with mime type text/html"? This is apparently causing the ui3.js and ui3-local-overrides.js scripts to be interpreted in error.

Your browser requests those files from Blue Iris. Blue Iris thinks your session is not valid, so it redirects the request to the login page, which is HTML. Therefore you get the message in the console saying it was the wrong mime type. And you get the error dialog box complaining about the first character in the file being < which is valid for HTML but not valid for a CSS or JS file.

AshishMBakshi commented 3 years ago

Encountering the same error when embedding BI UI3 as a web panel (iframe) in Home Assistant, viewed from any browser. The UI3 login page is shown, with login credentials autofilled; after the login timer, the login page is shown again, then once the timer runs out again, it tries to open the main UI and throws the error reported here.

cisco187 commented 3 years ago
5. If you use any other web services using the same domain name, it is possible that they are using a cookie with the name "session" which is overwriting Blue Iris's session cookie.  You might not notice this on the LAN if you have LAN authentication disabled or if you use a different hostname to connect to Blue Iris on your LAN.  One way to fix this is to set up different web domains for each service.  Another way is to use a different web browser for each service.

Thanks for this. I was having the same problem and going crazy. Because I was running three services through reverse proxy using the same domain name, I switched my BI/UI3 over to a different web domain and the problem went away. It strikes me that, given this kind of problem, developers should use unique session cookie names, but since I'm not a developer, I'm in no position to lecture the BI/Bitwarden/Nextcloud developers to code around this problem.

bp2008 commented 3 years ago

It strikes me that, given this kind of problem, developers should use unique session cookie names, but since I'm not a developer, I'm in no position to lecture the BI/Bitwarden/Nextcloud developers to code around this problem.

You are absolutely right. Just a little prefix specific to their service would make it a lot less likely to have a name collision. I learned that lesson years and years ago.

Unfortunately I have no control over Blue Iris's web server so I cannot prevent issues like this.