I'm getting this error in browser:
Mixed Content: The page at 'https://{my-site}' was loaded over HTTPS, but
requested an insecure XMLHttpRequest endpoint 'http://{my-api}'. This request
has been blocked; the content must be served over HTTPS.
I know I need to allow https some how. The application uses Gunicorn to run the application on custom Google App Engine Flexible Environment. It also uses flask. Here is my app.yaml:
runtime: custom
env: flex
service: flex-module
entrypoint: gunicorn -b :$PORT main:app
Is it possible to change some setting in the Extensible Service Proxy to allow https in App Engine? Or do I need to get an ssl certificate and key and add the following to my app.yaml:
gunicorn -w3 --certfile=server.crt --keyfile=server.key test:app
Also i'm not sure if i need to add this to a gunicorn.conf.py as in this documentation:
forwarded_allow_ips = '*'
secure_scheme_headers = {'X-APPENGINE-HTTPS': 'on'}
Thanks
As stated in the documentation, Google does not issue SSL certificates for double-wildcard domains that are hosted at appspot.com:
Note: Google recommends using the HTTPS protocol to send requests to your app. Google does not issue SSL certificates for double-wildcard domains that are hosted at appspot.com. Therefore, HTTPS requests must use the string "-dot-" as the URL notation, instead of "." for separating subdomains. You can use the simple "." URL notation with your own custom domains and other HTTP addresses. For more information, see the HTTP and HTTPS examples in the following sections.
So to allow API requests over https and avoid the mixed content browser error, instead of http://version-one.my-app.appspot.com I needed to send request to: https://version-one-dot-my-app.appspot.com
To make HTTPS calls, enable the ssl library for your app by adding the following configuration to the app.yaml file:
libraries:
name: ssl
version: latest
https://google-auth.readthedocs.io/en/latest/user-guide.html
Related
The front-end app is built on ReactJs and development server is running on http://localhost:3000. The back-end API is built with Flask 2.0.2 and is running on http://localhost:5000
In app.py file, the CORS has been allowed as mentioned in the documentation like:
CORS(app, resources={r"*": {"origins": "*"}})
When I try to submit the login form I still get the following error:
if you Enables CORS on your backend api , it should work.
I don't think this is an issue with your react frontend application.
cors is a security measure put in by browsers.
You could bypass the Cross-Origin-Policy with chrome extension but it's not advisable -
Try this on your backend API:
Ensure you have flask cors installed
create a configuration dictionary like this
api_v1_cors_config = {
"origins": ["http://localhost:5000"]
}
You can then set a global cors for your app like this
CORS(app, resources={"/api/v1/*": api_v1_cors_config})
// this would allow all methods, origins
My application with angular front end and springboot backend is trying to make a REST POST call to one of the PayPal APIs from Angular front end. The application is deployed as a Docker container in GCP VM instance. If I dont open the broser with web security disabled I get the ERROR
"Access to XMLHttpRequest at 'https://pilot-payflowpro.paypal.com/' from origin 'http://myserverip' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
I see lot of answers for this question in SO and others with adding headers in httpd.conf / .htaccess files. But I dont have both these files. I tried adding headers to Dockerfile and also adding commands to docker-compose.yaml file. Also tried adding the end URL in angular proxy configuration file. None of it worked.
Is there any way to enable CORS either in a docker config file or in the server itself.
docker-compose.yml
image: docker.image.link
privileged: true
ports:
- '80:8080'
restart: 'no'
volumes:
- '/var/sftp/upload:/usr/share/invoice/invoiceFile'
environment:
- SPRING_PROFILES_ACTIVE=docker
- DB_CONN_STRING=jdbc:postgresql:url
- DB_USER=postgres
- DB_PASS=postgres
- HOST_NAME=hostname
- SMTP_HOST=smtphost
- SMTP_PORT=25
- SMTP_AUTH_TRUE_FALSE=false
Dockerfile
FROM openjdk:8-jdk-alpine
ARG JAR_FILE
ADD target/${JAR_FILE} /usr/share/application.jar
ADD template/ /usr/share/template
VOLUME /tmp
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "/usr/share/application.jar"]
The CORS error is an error emitted by the browser when the request response, from the backend, hasn't the properly headers to tell to the browser that this client can perform/view the request.
So, in your case the backend is the PayPal (https://pilot-payflowpro.paypal.com/ -> paypal.com) not your backend, so even if you add any headers to your backend or frontend, the problem will persist because the only header that is important when you perform the request to the https://pilot-payflowpro.paypal.com/ is the header from the response of this request.
To solve this problem the https://pilot-payflowpro.paypal.com/ needs to send the correct header response allowing you to perform this request, and I think it's not possible because security reasons.
Some endpoints can't be use from a frontend application, only from a backend, and I think it's your case.
To avoid the CORS problem you can create an endpoint in your backend that call the https://pilot-payflowpro.paypal.com/. So, in your frontend you call your backend endpoint and the backend call the PayPal API.
calling the REST call is one solution. Another solution would be to mask the endpoint URL in the proxy configuration in Angular.
"/paypal" : {
"target" : "https://pilot-payflowpro.paypal.com/",
"secure" : true,
"changeOrigin": true,
"pathRewrite":{
"^/paypal":""
}
}
And calling /paypal where we have to do the REST call.
I have a simple serverless Next JS app running in Google Cloud App Engine. I have an SSL cert configured, and I can see it works by visiting my URL. I.e. https://example.com/ however, if I visit http://example.com/ it does not auto redirect to the HTTPS enabled version of my site.
app.yaml -
runtime: nodejs
env: flex
# This sample incurs costs to run on the App Engine flexible environment.
# The settings below are to reduce costs during testing and are not appropriate
# for production use. For more information, see:
# https://cloud.google.com/appengine/docs/flexible/nodejs/configuring-your-app-with-app-yaml
service: auto
handlers:
- url: /.*
script: auto
secure: always
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10
You need to implement the code to redirect or force HTTPS over HTTP this is mentioned on the docs as follows
For security reasons, all applications should encourage clients to use https connections. You can use the Strict-Transport-Security header to instruct the browser to prefer https over http.
Take a look at this cheat sheet on the Strict-Transport-Security header to understand better what it is and how does it work. also take a look at this answer from another Question it gives a good explanation.
Finally here is the guide on how to implement it
As stated in the January 2017 Endpoints release notes, I tried to update my openapi.yaml file to stop the Extensible Service Proxy (ESP) from blocking cross-origin requests by adding to x-google-endpoints:
swagger: "2.0"
info:
description: "Market scan using technical indicators."
title: "Talib Test"
version: "1.0.0"
host: "YOUR-PROJECT-ID.appspot.com"
x-google-endpoints:
- name: "YOUR-PROJECT-ID.appspot.com"
allowCors: "true"
basePath: "/"
consumes:
- "application/json"
produces:
- "application/json"
schemes:
- "http"
...
I continue to get an error in the browser when trying to make http calls from my angular application. The error is in both developer mode and after I deploy my angular application:
XMLHttpRequest cannot load
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
When i look at Google Cloud logging I see that requestMethod:"OPTIONS" and status:200. The API is a POST method so I'm guessing it's the ESP blocking the request. Also, I have allowed CORS in my python application using FLASK-CORS so it should be working.
My application has two services that are both on Google App Engine. The first is Standard Envrionment. The second, which I am having issues with is Flexible Environment. I am using a dispatch.yaml file and separate openapi.yaml files if that's relevant. Also, the API works on hurl it and postman.
Any help would be awesome!
Most likely your backend application did not handle CORS OPTIONS correctly.
If "allowCors" is true, Endpoint proxy will pass the request to your backend application. Proxy will not add anything to the request. If "allowCors" is false, proxy will return 404.
I'm trying to use custom domain with app engine. Everything works fine with localhost and appspot url. But with custom domain endpoints api doesn't work; the API discovery request (https://cc.mdsarowar.me/_ah/api/discovery/v1/apis/conference/v1/rest) returns Not Found with error code 404.
Here is my app.yaml (full code):
- url: /_ah/spi/.*
script: conference.api
secure: optional
And endpoints api (full code):
#endpoints.api( name='conference',
version='v1',
allowed_client_ids=[WEB_CLIENT_ID, API_EXPLORER_CLIENT_ID],
scopes=[EMAIL_SCOPE], hostname = 'cc.mdsarowar.me')
class ConferenceApi(remote.Service):
"""Conference API v0.1"""
........
Thanks in advance.
As per the docs:
Note: Google Cloud Endpoints does not support custom domains.
Edit
There is an open feature request for this so you may want to star it.