Mixed Content: The page was loaded over HTTPS, but requested an insecure resource
  • 09-May-2023
Lightrun Team
Author Lightrun Team
Share
Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Lightrun Team
Lightrun Team
09-May-2023

Explanation of the problem

When deploying my application, I encountered a problem with HTTPS and HTTP requests. When attempting to access the deployed page over HTTPS, an error occurred stating that the content must be served over HTTPS instead of HTTP. However, the code did not reference “localhost,” which made this issue puzzling. I had already created a certificate and distribution that enabled HTTPS, but the problem persisted. After researching the issue, I added “output.headers[‘Access-Control-Allow-Credentials’] = ‘true'” to my handler.js code. This step was necessary for HTTPS to function correctly, according to my research.

exports.graphqlHandler = function graphqlHandler(event, context, callback) {
  function callbackFilter(error, output) {
    // eslint-disable-next-line no-param-reassign
    output.headers['Access-Control-Allow-Origin'] = '*';
    output.headers['Access-Control-Allow-Credentials'] = 'true';
    callback(error, output);
  }
}

In the YAML code for my app-backend, I defined two functions: “graphql” and “api.” I added “cors: true” to each function to enable cross-origin resource sharing (CORS). This configuration allows my server to indicate any origins (domain, scheme, or port) other than its own that can access its resources. The “graphql” function is a post method that handles GraphQL queries, while the “api” function is a get method that handles REST API requests.

functions:
  graphql:
    handler: handler.graphqlHandler
    events:
      - http:
          path: graphql
          method: post
          cors: true
  api:
    handler: handler.apiHandler
    events:
      - http:
          path: api
          method: get
          cors: true

Finally, I initialized my Apollo client by replacing “http://localhost:4000” with “https://XXX.execute-api.us-west-1.amazonaws.com/production/graphql” in the network interface. When I tried to access my site after this change, the Chrome shield appeared on the address bar, stating that my site wanted to load unsafe scripts. Although the rest of the code used HTTPS, I suspected that the issue occurred because something still referenced “http://localhost:4000.” Despite this, I was unsure of how to resolve this problem.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Based on the top answers, it seems that the issue is caused by the siteUrl being set to http:// instead of https://. This could be causing the mixed content error in the Chrome developer console when attempting to load resources over HTTPS.

To resolve this issue, it is recommended to change the siteUrl from http:// to https:// in the appropriate configuration file or settings. This should ensure that all resources are loaded securely over HTTPS and prevent the mixed content error from occurring.

Overall, it appears that this is a common issue that can easily be resolved by making a simple configuration change. By ensuring that all resources are loaded securely over HTTPS, developers can avoid issues with mixed content and provide a more secure experience for their users.

 

Other popular problems with serverless-graphql

Problem 1: Authentication and Authorization

One of the most common problems encountered while using serverless-graphql is managing authentication and authorization. While serverless architecture allows for easy scaling and deployment, it can make authentication and authorization more challenging than traditional monolithic architectures. In a serverless setup, the API Gateway is the primary entry point for all requests. As a result, managing access and ensuring that only authorized users can access specific resources is crucial. Developers often struggle to implement robust authentication and authorization mechanisms that work seamlessly with serverless-graphql.

Solution:

This problem can be resolved by using tools such as AWS Cognito or Auth0, which provide secure and scalable authentication and authorization services for serverless applications

Problem: Cold Start Issues

Another common problem with serverless-graphql is cold start issues. When a serverless function is triggered, it can take a few seconds to start up and respond to requests. This delay is known as cold start time and can cause performance issues in applications that require low latency. Cold start time is a significant challenge in serverless-graphql applications as each GraphQL resolver function is a separate AWS Lambda function. As a result, a single GraphQL query may trigger multiple Lambda functions, each with its cold start time.

Solution:

This issue can be addressed by using techniques such as pre-warming Lambda functions, optimizing function size and dependencies, and implementing caching mechanisms at different layers of the application.Solution:

Problem: Debugging and Monitoring

Debugging and monitoring serverless-graphql applications can be challenging due to the distributed and event-driven nature of the serverless architecture. In a serverless-graphql setup, the API Gateway routes requests to Lambda functions, which then execute the GraphQL resolvers. As a result, pinpointing the exact source of errors or performance issues can be challenging. Moreover, traditional debugging and monitoring tools may not be suitable for serverless-graphql applications. Solution:

Solution:

This problem can be resolved by using specialized serverless monitoring tools such as AWS X-Ray, New Relic, or Datadog. These tools provide real-time insights into application performance and help developers identify bottlenecks and errors quickly. Additionally, implementing logging mechanisms at different layers of the application can also aid in debugging and monitoring serverless-graphql applications.

A brief introduction to serverless-graphql

Serverless-GraphQL is a serverless framework that enables developers to deploy GraphQL APIs on various cloud providers such as AWS Lambda, Google Cloud Functions, and Azure Functions. It is based on the Apollo Server which is an open-source GraphQL server that supports the latest GraphQL features and provides a number of built-in features such as query batching, caching, and schema stitching. Serverless-GraphQL provides an easy way to deploy and manage serverless GraphQL APIs on cloud providers by leveraging the infrastructure as code paradigm.

To create a serverless GraphQL API using Serverless-GraphQL, developers need to define their GraphQL schema and resolvers as part of their codebase. They can then use the Serverless-GraphQL CLI to deploy the API on their preferred cloud provider. Serverless-GraphQL uses the Serverless Framework under the hood which is a popular open-source framework for building serverless applications. By default, Serverless-GraphQL deploys the GraphQL API as an AWS Lambda function, but it can be easily configured to deploy on other cloud providers as well.

Serverless-GraphQL provides a number of advantages over traditional server-based GraphQL implementations. First, it allows developers to only pay for the actual usage of their GraphQL API rather than paying for dedicated servers that are always running. This can result in significant cost savings, especially for applications that have varying levels of traffic. Second, it provides automatic scaling of the API based on the incoming traffic, so developers do not have to worry about provisioning servers and managing the infrastructure. Finally, it provides an easy way to develop and deploy serverless GraphQL APIs, enabling developers to focus on building great applications rather than managing infrastructure.

Most popular use cases for serverless-graphql

  1. Developing and deploying scalable and cost-effective GraphQL APIs: Serverless-graphql is built on top of cloud platforms such as AWS Lambda, Azure Functions, and Google Cloud Functions, which enables developers to easily deploy and scale GraphQL APIs without worrying about infrastructure management. With serverless-graphql, you can use GraphQL to define your API schema and resolvers, and deploy it to the cloud in minutes. Here is an example of how to define a GraphQL schema using the makeExecutableSchema function from the graphql-tools library in Node.js:
import { makeExecutableSchema } from 'graphql-tools';

const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'world',
  },
};

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});
  1. Building real-time applications using GraphQL subscriptions: Serverless-graphql supports GraphQL subscriptions, which enable real-time data streaming between the server and the client. With subscriptions, you can push data updates to the client in real-time without the need for polling. Here is an example of how to define a GraphQL subscription using the subscribe function from the graphql-subscriptions library in Node.js:
import { withFilter } from 'graphql-subscriptions';

const pubsub = new PubSub();

const typeDefs = `
  type Subscription {
    messageAdded(channel: String!): Message
  }
`;

const resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: withFilter(
        () => pubsub.asyncIterator('MESSAGE_ADDED'),
        (payload, variables) => {
          return payload.channel === variables.channel;
        }
      ),
    },
  },
};
  1. Integrating with existing systems and data sources using serverless functions: Serverless-graphql can be used to build APIs that integrate with existing systems and data sources such as databases, message queues, and RESTful APIs. You can use serverless functions such as AWS Lambda functions or Azure Functions to connect to these systems and expose them as GraphQL APIs. Here is an example of how to define a resolver that queries a MongoDB database using the mongodb library in Node.js:
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.