Deployed web app on Heroku, but it does not work - ajax

Deployed application on Heroku (zrecipe.herokuapp.com) but it does not work (work perfect local). Code is at https://github.com/zzheads/RecipeSite.
Development tools shows error message:
Mixed Content: The page at 'https://zrecipe.herokuapp.com/'
was loaded over HTTPS, but requested an insecure script
'http://code.jquery.com/jquery-1.11.0.min.js'.
This request has been blocked; the content must be served over HTTPS.
I think problem is my ajax requests in program are trying load something from HTTP, without SSL, page is supposed to be secure but my app are trying to load non-secured objects. How I can get rid of this?

Please use the -s command line parameter.

Related

Fastly CDN Heroku url redirecting

I recently added Fastly domain from addons in heroku application. And when fastly was provisioned I got a test url which is as follows:
https://felix-homes-herokuapp-com.global.ssl.fastly.net/
Whenever I click on this url it gets redirected to
https://felix-homes.herokuapp.com for some unknown reason.
Note my nodejs app uses Heroku-SSL-Redirect. Is it because of this?
I have already followed setup guide and asked multiple issues from the support
https://support.fastly.com/hc/en-us/requests/323620?page=1
And nearest question I find to SO is following
Adding Fastly to a Heroku app does not forward to proper url
Clearing browser cache or changing browser did not help me. Can you please try hitting fastly url on your computer and let me know if you are also face same redirect problem?
Yes, very likely the library (Heroku-SSL-Redirect) is the issue.
In the end, you have two separate requests. An encrypted HTTPS/SSL request from the browser. And then an unencrypted request from Fastly to Heroku.
Your node-application and the library only see the unencrypted request and return the redirect.
There are two ways to solve this:
You configure Fastly do do encrypted requests to Heroku as its backend.
Every routing / proxy layer (fastly, but also the Heroku routing layer) typically use the X-Forwarded-Proto HTTP header to tell the backend application that the initial request was already encrypted. So either heroku-ssl-redirect doesn't look at the header, or it did get lost somewhere on way.

PWA on Heroku- Redirecting HTTP Traffic To HTTPS

I am working on Progressive Web App in React and I set up the website on Heroku. When I tests that with Lighthouse I got the warning:
Does not tredirect HTTP traffic to HTTPS
Based on docs:
Lighthouse changes the page's URL to http, loads the page, and then waits for the event from the Chrome Debugger that indicates that the page is secure.
And indeed I can access the website using https or http. Is there a way to redirect that on Heroku?
I found the solution. As I am using Reactthe solution was simple. I created a file static.json in main folder and added "https_only": true there. It "forces" https for all requests. See this section of the buildpack docs.

Making requests to ws:// from a website loaded on https

I'm using sipml5 to connect to a sip phone service and one of the setting is the service websocket server URL. the problem is that the server url is not secured (ex. ws://123.123.123.123:9999/ws) and it cannot be accessed on wss://. Because of that, when loading my site on a HTTPS connection, the browser blocks the request automatically, it doesn't behave like it does when loading let's say, an image over http, and then shows a warning.
Error is: [blocked] The page at 'X' was loaded over HTTPS, but ran insecure content from 'ws://....': this content should also be loaded over HTTPS.
I need to know if there is a way to make the browser connect to ws:// even though the page initializing the request is loaded over https.
Please help.
EDIT:
What I'm looking for is a flag or something like that, in Chrome or Firefox for example, which lets the user access insecure resources even though the page is loaded on https.
Why you are using http? You can get an ssl certificate from https://letsencrypt.readthedocs.org/en/latest/intro.html
then add the following details to http.conf
tlsenable=yes
tlsbindaddr=0.0.0.0:8089
tlscertfile=/path-to/cert.pem
tlsprivatekey=/path-to/privkey.pem

Azure and CORS Access-Control-Allow-Origin with ajax and php

First I'm not in the web side of our world, so be nice with the backend guy.
A quick background : For a personal need I've developped a google chrome extension. They are basically a webpage loaded in a chrome windows and... yeah that's it. Everything is on the client side (scripts, styles, images, etc...) Only the data are coming from a server through ajax calls. A cron job call a php script every hours to generate two files. One, data.json contains the "latest" datas in a json format. Another one hash.json contain the hash of the data. The client chrome application use local storage. If the remote hash differ from the local one, he simply retrieve the data file from the remote server.
As I have a BizSpark account with Azure my first idea was : Azure Web Site with php for the script, a simple homepage and the generated file and the Azure Scheduler for the jobs.
I've developed everything locally and everything is running fine... but once on the azure plateform I get this error
XMLHttpRequest cannot load http://tso-mc-ws.azurewebsites.net/Core/hash.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:23415' is therefore not allowed access.
But what I really can't understand is that I'm able (and you'll be too) to get the file with my browser... So I just don't get it... I've also tried based on some post I've found on SO and other site to manipulate the config, add extra headers, nothing seems to be working...
Any idea ?
But what I really can't understand is that I'm able (and you'll be
too) to get the file with my browser... So I just don't get it
So when you type in http://tso-mc-ws.azurewebsites.net/Core/hash.json in your browser's address bar, it is not a cross-domain request. However when you make an AJAX request from an application which is running in a different domain (http://localhost:23415 in your case), that's a cross-domain request and because CORS is not enabled on your website, you get the error.
As far as enabling CORS is concerned, please take a look at this thread: HTTP OPTIONS request on Azure Websites fails due to CORS. I've never worked with PHP/Azure Websites so I may be wrong with this link but hopefully it should point you in the right direction.
Ok, will perhap's be little troll answer but not my point (I'm .net consultant so... nothing against MS).
I pick a linux azure virtual machine, installed apache and php, configure apache, set some rights and define the header for the CROS and configure a cron in +/- 30minutes... As my goal is to get it running the problem is solved, it's running.

Deploying web app on HTTPS automatically makes my AJAX calls HTTPS too?

My application will be deployed on HTTPS (currently it is in development and running on HTTP).
Will deploying the web app on HTTPS automatically make my AJAX calls HTTPS as well? I am using relative URLs in the AJAX calls, so i am thinking that when the absolute URL is constructed, HTTPS will be appended automatically.
please let me know. thanks for your response
If you are using relative URLs, then yes.
However, it is really important to test this before running live, as certain browsers(at least IE6) will display a really alarming warning if you try to load resources like images using a non-https connection.

Resources