gRPC and content security policy (mixed content)

[dmytronasyrov]

I'm trying to resolve the issue with frontend (next.js) served over HTTPS and gRPC via HTTP. The issue is in content security policy. Due to CSP and HTTPS

new IdentityServicePromiseClient(`http://...` doesn't work with an error:
`Mixed Content: The page at 'https://.../signup' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://.../api.identity.v1.IdentityService/IdentityCreate'. This request has been blocked; the content must be served over HTTPS.

On the other side of the connection there is an Istio with the configuration:

port:
        name: grpc-web-server
        protocol: GRPC    
        number: 50051

Istio doesn't support gRPC over TLS, only HTTP (which makes sense).

Any idea how to pass through CSP?

[avm99963]

I think this is unrelated to CSP, and more related to "mixed content" (+ info here). Basically, browsers block websites from being able to retrieve resources via non-secure/HTTP requests if they were loaded over a secure/HTTPS connection.

Even if you could do something with CSP to allow this (I don't think there is a way to do this) I wouldn't recommend it, since you would be using an insecure connection to load data via gRPC, which can be tampered with and intercepted.

If you're running this for development purposes, I think there are some Chrome flags which might let you bypass this, but haven't tested it.

I would strongly recommend setting up gRPC-web over HTTPS.