Problems with loading pages using Cloudflare and Heroku - ssl

I have configured my GoDaddy DNS through Cloudflare, pointing at Heroku's URLs (ivanteong.herokuapp.com) after adding www.ivanteong.com and ivanteong.com to custom domains of Heroku.
I have also added the CNAME for ivanteong.herokuapp.com to Cloudflare for its root and www, configured "Full" for the Crypto settings and enabled "Automatic HTTPS Rewrites". This is to make the site appear as HTTPS. I have also added Page Rules such that everything redirects to https://www.ivanteong.com.
However, I have been facing consistent issues with loading the pages on my website, in order of frequency:
1) When going to different pages on ivanteong.com, it will sometimes reach "There is nothing here yet" page on Heroku. Sometimes, it happens on the main site, other times it happens on the subpages. Visitors need to refresh the page multiple times before the actual page will load and the error page on Heroku is gone. This is bad for user experience as most of the time, users won't bother reloading as they will think the site is broken. I'm suspecting it has something to do with the rerouting of DNS or the DNS connection between Cloudflare and Heroku. I'm on the free tier on Heroku, wondering if that is the problem?
2) Sometimes, some of the assets such as the Javascript library or images will not load fully, and the site will appear without the images loaded or the UI scrambled, only resolved when I refreshed the page. It looks as if they load 80% of assets the first time and only finish loading everything after I reload the page. I'm wondering if it is something to do with forcing HTTPS encryption over all the assets?

I was also facing a similar problem. When I try to load(via https) https://example.com I was getting no app found error. I fixed it by adding multiple domains in heroku custom domain settings. I added both, domain with www subdomain and naked/root domain to heroku and now i get redirection to www.example.com but I don't get the no app error. I hope this might work for you as well.

Related

mysite.com/api and mysite/images not being aliased to my domain

I have a site being hosted on heroku so I can go to myapp.herokuapp.com/ and my SPA loads. I got a domain and used cloudflare with a CName record to alais mydomain.com to myapp.herokuapp.com. Great the sites load. Within my SPA i load some images. If my app loads directly from heroku *myapp.herokuapp.com/images/filex.png" it works fine but if I call (or type in the address bar) myDomain.com/images/files.png" I just get my site back like i types mydomain.com
Is this an issue with cloudflare? Do i need additional routing rules?
or is this an issue with my express server that is serving the app and images? does the redirected
request look different and do I need to add code to handle the redirect?
I'm not sure why the redirect is happening without more information. My best guess is that you need to follow these instructions from Heroku. Without this, Heroku servers will have no idea what to do with a request that has a host header of mydomain.com, and will perform in some unexpected way. Heroku needs some way on its side to know that all mydomain.com requests should be handled identically to myapp.herokuapp.com requests.
If this configuration is already in place, your underlying code needs to handle myapp.herokuapp.com and mydomain.com, but I believe by default express will not care about hostname.
Seems to have been an issue with heroku. It’s working fine on aws.

How can I resolve SSL Mixed Content issue caused by Gravatar?

Gravatar is causing mixed content issue especially when a user is logged in. For logged out users, there is no issue. My site loses the green Security (SSL) padlock on the browser. For all the pages which logged in Users visit, there is Mixed content. The message on display by Chrome/Firefox usually
that the page was loaded over HTTPS, but requested an insecure image 'http://gravatar.com/avatar/b87daeb6292d165f7bd8db0dbb2e0a8b?s=400&d=identicon'. This content should also be served over HTTPS.
Is there any way to resolve this pls?
This does not happen with my blog. Check out the attached image for more information.
Yes, I faced this error two month back but I resolved it using cloudflare. I made the following two changes to load all the resources including image on https.
In Crypto Page of Cloudflare, changed the setting to always HTTPS and Automatic Redirect.
Made similar change in Cloudflare plugin active in WordPress.
You will find the detailed step by step tutorial on acheving this at below article
How to Fixed Mixed Content Error in WordPress?

Unable to log in to admin area after installing SSL certificate on Drupal

We have recently installed an SSL certificate to our fairly old version of Drupal. The front end of it works well, however, we are now unable to log in to the admin area. We put this problem on our servers who claims the website now goes into a continuous redirect look, causing the site to crash. here is what they said.
"I have taken a further look at this and we can see some pages have specific rules in place that are forcing them to use HTTP this is then causing an issue with the redirect to HTTPS, this is essentially creating a loop as the Site goes to the HTTP which gets redirected to HTTPS, which the page then redirects back to HTTP and so on. You will need to review the content of the site and to remove the redirect(s) to HTTP for any pages that have this, alternatively, we can remove the redirect to HTTPS (However this defeats the purpose of having the SSL Certificate then). Please let me know if you would like me to remove the HTTPS redirect."
The same problem can be found here at stack overflow. However, the answer is very vague considering it's a change to the .htaccess file.
Any thoughts?
put this line at the en of settings.php
$conf['https'] = TRUE;

How to ensure my website loads all resources via https?

URL in question: https://newyorkliquorgiftshop.com/admin/
When you open the above page, you can see in the console that there are lots of error messages saying "...was loaded over HTTPS, but requested an insecure stylesheet.."
This website was working well until all of a sudden this problem shows up. I am not very familiar with https, but I have contacted with Godaddy and the SSL certificate is valid, and there is no obvious problem with "https://newyorkliquorgiftshop.com". And I am stuck here, I've some experiences with HTTPS website before, if the URL of website's homepage is "https", then every resources it loads is via "https" too. I don't know why my website behave differently and I don't know where to start to solve the problem? Any hint is appreciated especially articles about HTTPS that is related to my problem.(I have done a brief research regarding HTTPS but most of the articles I found are about the basic concepts.)
If you have access to the code (not sure what you built the website using), try using https instead of http for the URL's you use to load your style sheets and script files.
For example one of the errors is
Mixed Content: The page at 'https://newyorkliquorgiftshop.com/admin/' was loaded over HTTPS, but requested an insecure script 'http://www.newyorkliquorgiftshop.com/admin/view/javascript/common.js'. This request has been blocked; the content must be served over HTTPS.
You are requesting the .js file using HTTP, try using HTTPS like so:
https://www.newyorkliquorgiftshop.com/admin/view/javascript/common.js

Enabled SSL gives issues

I really dont know what is the problem nor does my website hosting providers. Im using wordpress to run my business and Im using a shop plugin called "Shopp". Whenever I fill in the Paypal Pro details to process credit card on my website, I get teh following on the checkout page: "Firefox has detected that the server is redirecting the request for this address in a way that will never complete."
I can assure you that the plugin has nothing to do with it as I have tried different shop plugins. Can someone help? The url is www.imayne.co.uk/shop/checkout
Few info:
I have SSL automatically installed by my provider
Hosted package was said to be Linux
Usually that's caused by a page (or pages) that simply redirect to each other:
first.php:
<?php
header("Location: second.php")
second.php
<?php
header("Location: first.php");
or a single page that redirects to itself. check your server logs to see exactly what the requested URL is, and then look for a wordpress rule that'd cause the redirect. Possibly you're trying to redirect from non-SSL to SSL-enabled pages, but are doing the redirect wrong, so you end up back at the same page, which then tries to redirect to SSL, fails, etc...
and indeed, after trying your link, you get redirected to https://www.imayne.co.uk/shop/checkout/, which then keeps on redirecting to itself. So, your shopping car system would appear to be broken.
Your site has been removed so I don't know if you were able to solve the issue.
One thing to keep in mind when using Shopp is, you need a dedicated SSL certificate. A "shared hosting" certificate won't work.