MMM-Hue CORS Policy Issue

karsten13

This could be caused by the new electron version if you are running this on a raspberry pi.

If so you could test adding electronOptions in your config.js like:

let config = {
	electronOptions: {
                webPreferences: {
                        webSecurity: false
                }
        },
	address: "localhost", 
	port: 8080,

Fozi

@mumblebaj I have the same issue with the same error, but with MMM-Homematic since the update to MM 2.18. MM cannot connect to my CCU2 controller to get the device statuses.
@karsten13 your proposal unfortunately didn’t work :-( But thanks anyway!

karsten13

@fozi I have no test setup so this is difficult without …

Fozi

@karsten13 No worries! I just wanted to let you (and others) know that the config entry does not solve the issue.
I made a little research around CORS and -at least for me- it doesn’t seem to be trivial to configure electron in a way that specific origins are allowed without disabling the CORS policy completely.

Anyone around with more knowledge?

karsten13

@fozi

found this one https://pratikpc.medium.com/bypassing-cors-with-electron-ab7eaf331605 which could be tested in js/electron.js.

mumblebaj

Thanks @karsten13 , seems like it does not work as mentioned below by @Fozi . Seems like the modules uses jQuery and does a call to the bridge to get the data. Seems like I need to log an issue on Github for the module but it has not been touched in the last 3 to 4 years. I will fork it and see if I can make some changes to get it working. The last suggestion you made below seems like code changes module side so I will see what I can do to change it from jQuery to something that would work. Thanks for the replies.

karsten13

@mumblebaj

you can test the following, I couldn’t test this completely but the cors error was gone in my tests.

First yo need to create own certs, go into the config folder of mm (same folder where config.js is located) and run this command:

openssl req -newkey rsa:4096 \
            -x509 \
            -sha256 \
            -days 3650 \
            -nodes \
            -out example.crt \
            -keyout example.key \
            -subj "/C=DE/ST=Hessen/L=Frankfurt/O=MagicMirror/OU=MM/CN=www.example.com"

Then edit your config.js and add the following lines under the line with var config = {

	electronOptions: {
		webPreferences: {
			webSecurity: false
		}
	},
	useHttps: true,
	httpsPrivateKey: "config/example.key",
	httpsCertificate: "config/example.crt",

(Re)Start mm and test if MMM-Hue works now (there will still be a “mixed content” warning).

mumblebaj

@karsten13 Awesome. That worked. Much appreciated for the assist.

Fozi

@karsten13 You are a genius! That worked for me, too! Thanks so much!

karsten13

@fozi thanks but … no

would be better to have a solution without https, may someone else gets this figured out.

As an improvement for the above solution with https:

Holding the certs in the config directory makes them accessible from outside so better move them into a new directory beside config, e.g. certs which is not exposed. Don’t forget to update config.js afterwards.

mumblebaj

@karsten13 So I have been tinkering with the MMM-Hue module a bit and have replaced jQuery which seems to invoke XMLHttpRequest, with node-fetch, albeit the older version (2.6.1) of node-fetch, but it now returns data without requiring a certificate and the use of https.

CarstenD

The same problem appears to happen with MMM-Homematic. Getting same errors after update to 2.18.0

Access to XMLHttpRequest at 'http://192.168.178.xx/addons/xmlapi/state.cgi?datapoint_id=1824' from origin 'http://0.0.0.0:8080' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private.

karsten13

@carstend

yes, was already reporty by @Fozi some posts above, MMM-Homematic uses jquery too.

OberfragGER

@karsten13 Its working now with:

var config = 
{
  electronOptions: {
		webPreferences: {
			webSecurity: false
		}
	},
  useHttps: true,
  httpsPrivateKey: "config/example.key",
  httpsCertificate: "config/example.crt",
  address: "localhost", 
  port: 8080,
//  address: '0.0.0.0',
  ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.178.1/120", "192.168.178.100/24"],
  language: 'de',
  modules: [

But with this setting, i have noc access the the RemoteControl-GUI and API also! ;(
I really use it with my homeautomation to show/ hide modules.

Is there another possibility?

karsten13

@oberfragger

you must access the site with https, e.g. https://192.168.0.143:8080/remote.html

CarstenD

There is now a new version available for MMM-Homematic that also works w/o changing the config.

Fozi

@carstend Yeah, was just noted, too, about the update.
Some how I ran ino a problem when applying ‘git pull’, so I had to reinstall the module.
First the screen remained black. so I hat to install manually the ‘request’ library manually (see https://forum.magicmirror.builders/topic/15778/fix-for-black-screen-in-2-16-and-later). Now it works!

mumblebaj

@mumblebaj This is the new module I created. Does not require https.

https://github.com/mumblebaj/MMM-PhilipsHue.git

I am sure this will need to be changes once they enforce the headers stuff but for now it will work just fine.

OberfragGER

@karsten13 said in MMM-Hue CORS Policy Issue:

@oberfragger

you must access the site with https, e.g. https://192.168.0.143:8080/remote.html

Unfortunatly its not working via https. Still connection refused. I dint think that https://github.com/CatoAntonsen/MMM-MotionEye will update after 5 years.

karsten13

@oberfragger

can you access the mirror with https://<ip-of-pi>:8080?

May you are using a client which is not in the ipWhitelist? You can test this with setting ipWhitelist: [], in your config.js.