Geek Answers Handbook

How to debug a page with https loading using weinre?

I try to debug using weinre and set up a simple test in Chrome to make sure everything works. However, in the developer tools, I get an error message:

"The page at 'https://myhost/...' was loaded over HTTPS, but ran insecure content from 'http://localhost:8080/target/target-script-min.js': this content should also be loaded over HTTPS.

I saw some other answers regarding debugging Cordoba or Calling Card. I am not using any of these things, and the suggested answers do not seem to apply here. I am trying to debug simple HTML / Javascript.

I don’t see a mention on the weinre webpage about enabling https support (he explicitly mentions that he does not use https), and I don’t have much control over the browser side (this is necessary for working on various Android browsers, which I think are notorious for being completely unfriendly to local debugging, which is actually the reason I'm trying to debug using weinre), so I don’t understand how to do this. Do not use https, because the page transmits confidential information; using weinre over http is acceptable because I am tunneling the connection through ssh.

Update: I also tried using the boomarklet method: I added the bookmarklet URL to Chrome Mobile, but when I try to go to the bookmarklet, it unloads the original page: I see the connection, but when I look at the resources, all I see is what seems like a bookmarklet. But if I try to start the bookmarklet by typing the name of the bookmarklet until the javascript star code appears in autocomplete, it will remain on the current page, but no goals will appear on the client page. I assume this is for the same reason as I see that the bookmarklet refers to http://localhost:2000 .

+6
source share
3 answers

To get browser restrictions, weinre pages can be served with https instead of http using a reverse proxy. This is a somewhat brute force solution, but adding the following lines to the end of my /etc/httpd.conf file was enough to proxy all requests from server to server: in my case, none of them conflict with existing files or directories.

 ProxyPass /target/ http://localhost:8080/target/ ProxyPassReverse /target/ http://localhost:8080/target/ ProxyPass /client/ http://localhost:8080/client/ ProxyPassReverse /client/ http://localhost:8080/client/ ProxyPass /weinre/ http://localhost:8080/weinre/ ProxyPassReverse /weinre/ http://localhost:8080/weinre/ ProxyPass /interfaces/ http://localhost:8080/interfaces/ ProxyPassReverse /interfaces/ http://localhost:8080/interfaces/ ProxyPass /modjewel.js http://localhost:8080/modjewel.js ProxyPass /images/ http://localhost:8080/images/ ProxyPassReverse /images/ http://localhost:8080/images/ ProxyPass /ws/ http://localhost:8080/ws/ ProxyPassReverse /ws/ http://localhost:8080/ws/

You also need to define window.WeinreServerURL, since Weinre performs the regular expression on http:/ to try to get the server url. This will fail because the server is https, not http. In my case, I added an instruction to the following booklet as the first statement in a function:

 window.WeinreServerURL="https://server:port/

With this, I was able to point my browser to https://server:port/client/#anonymous to open the debug page, and launch the bookmarklet from the page for debugging.

+8
source

Great question and answer, @ Michael! I had the same question, and I followed your guide so that everything worked with my setup, which is related to IIS on Windows. I post this here as a link if others are facing the same problem.

In IIS, I used the following process to configure the reverse proxy:

  • First of all, install the Application Request Routing extension for IIS along with your dependencies. This simplifies reverse proxy configuration.
  • I created a new website for this to avoid possible conflicts with my existing website. In IIS Manager, right-click Sites and select Add Web Site... Give it a name (for example, "weinre") and specify it in the temporary directory. Change the binding to https and select an unused port, for example 8005. You can also add an http binding if you want.
  • Select the newly created site, then double-click on the URL Rewrite module.
  • Click Add Rule(s)... in the right pane, then use the Reverse Proxy template.
  • Make sure Enable SSL Offloading , and then enter the name / port of the server where the weinre server is located (for example, "127.0.0.1:8080"). Add the rule, restart the website, and you're done!

Now, to use it, just update the paths to the target script to point to the port that you bound in step 2. And, as Michael points out, you also need to set window.WeinreServerURL as it can auto-detect with this setting.

Happy debugging!

+3
source

You can run weinre on PaaS , for example Heroku or Bluemix, which usually provide completion of https, so applications mostly get free https support.

You can try the https version of my open access weinre server, here: https://weinre.mybluemix.net/

+3
source

More articles:


All Articles