0

I am building a web application that uses voice recognition & text-to-speech that performs actions/displays a wide variety of data through an HTML page (built with JS (jQuery for AJAX)/HTML/CSS.) This web application is being hosted on HTTPS server that is not on my local network.

I have set up and configured some smart lights called "Philips HUE Lights" that are equipped with a RESTful API that can only be controlled through the local network (not visible outside of the local network.)

I am able to send commands to the device by visiting the CLIP debugger/API tool (local ip) "http:////debug/clip.html" that is included with their product. I am able to send HTTP commands to the "Philip HUE Bridge" which is the device that issues the commands to the lights. All of the commands work when I use their API tool (GET, "PUT, POST, DELETE) visiting the locally hosted url shown above.

However when I try using a jQuery AJAX request "GET"/"PUT" from my web application that is hosted on my HTTPS server, the command fails. I have tried setting the AJAX function header property with "Access-Control-Allow-Origin: *". I have also tried setting the "crossDomain" property to true in the AJAX function. I also have tried setting the "dataType" property to both "json" and "jsonp" and it still won't work.

I am visiting my HTTPS web application through a computer that is connected to the local network that the "HUE Bridge" is connected to. Given that I am using a computer on the same network, I thought this might work...

I have read a lot of other posts/information on the internet but can't seem to find a definitive answer. I wanted to ask some of you more seasoned people:

Is what I am trying accomplish even possible given the scenario I described above? Or will I have to achieve this in a different manner?

Any help/suggestions are much appreciated. Thanks.

Eric
  • 488
  • 1
  • 3
  • 10
  • Where did you set `Access-Control-Allow-Origin: *` header? Set it on your API side and it has to work. 2nd thing, you cannot run AJAX requests on local file, it has to be on localhost (or any host). – skobaljic Jun 16 '16 at 21:19
  • 1
    The _remote_ server has to allow cross-origin access. – CBroe Jun 16 '16 at 21:20
  • Its clearly possible since both the Hue website and IFTTT web channels can affect Hue lights from the public internet. – Ron Reuter Jun 16 '16 at 23:47
  • what's the error message? – Legends Jun 17 '16 at 01:07

1 Answers1

1

You are running into "Mixed Content" security issues.

Basically when you are hosting a page on a secure URL (https) you cannot access unsecure (http) resources without getting a mixed content error. This error is visible in the console of your browser (usually accessed by F12), when something is not working during webdevelopment always check the console for errors.

To hack around this you can temporarily disable the security and allow the unsecure request. For example Chrome shows a shield in the addressbar which you can click to temporarily disable the warning. Firefox shows a clickable warning overlay on the lock icon in the addressbar.

This might be a temporary workaround for development, but you cannot expect your users to disable security.

A solution should be to send a Content-Security-Policy header. Based on documentation from http://content-security-policy.com/ the following header should allow XMLHttpRequests to any resource:

Content-Security-Policy: connect-src *

However since I do not have enough control to modify the headers on the webserver where my files are hosted I could not test this.

Before using this method make sure you understand the security implications when you send this header.

Michel
  • 166
  • 5