Mixed Content Error

Ionic Framework ionic-v3
1

i am using ionic framework and trying to deploy a PWA using ionic v3.

I am using a vultr server and a domain from Go daddy.
For backend I am using nodejs along with express and mongodb as database.

Ionic code:
this.http.post(‘hhtp://xxxxxxxxxx.in:port_no/login’)

Nodejs
app.post(’/send’,function(req,res){
}

PWA url : https://xxxxxxxx.in/www

Mixed Content: The page at ‘https://xxxxxxxxxxxx.xxxx/xxx.in’ was loaded over a secure connection, but contains a form which targets an insecure endpoint ‘http://xxxxxxxxxxxx.xxxx/login’. This endpoint should be made available over a secure connection.This request has been blocked; the content must be served over HTTPS.

2

That is a correct desired behaviour. You can’t load insecure content inside a secure connection. However, you could change your PWA URL to http://xxxxxxxx.in/www, unless you don’t have a automatic https redirection.

1 Like
3

Thanks for the response @vivek-23.
But isn’t there way by which I can add to my scripts and work it out?

I can definitely alter the https part while deploying PWA but isn’t there an alternative?

4

There really isn’t any way this could happen. Are you loading a web page inside your app? Maybe we could tweak the way we request data from a server(via ajax) ?

5

Thanks @vivek-23

But I was trying to integrate something like CDNS or Content-Secuirity-policy packages to solve the issue.
Shouldn’t either work?

6

Maybe you can send headers when loading your PWA URL https://xxxxxxxx.in/www with Content-Security-Policy: default-src 'self' http://xxxxxxxxxxxx.xxxx to allow resources from your insecure subdomain. More reference: Content Security Policy (CSP) - HTTP | MDN

7

But I would still recommend you to make your insecure domain secure to be on the safer side.

8

Thanks @vivek-23
You’ve been a great help , I’ll try these things.

1 Like