What is mixed content?  |  Articles  |  web.dev (2024)

Mixed content occurs when initial HTML is loaded over a secureHTTPS connection, but other resources (such as images,videos, stylesheets, scripts) are loaded over an insecure HTTP connection.This is called mixed contentbecause both HTTP and HTTPS content are being loaded to display the same page,and the initial request was secure over HTTPS.

Requesting subresources using the insecure HTTP protocol weakens the security of the entire page,as these requests are vulnerable to on-path attacks,where an attacker eavesdrops on a network connection and views or modifies the communication between two parties.Using these resources, attackers can track users and replace content on a website,and in the case of active mixed content, take complete control over the page, not just the insecure resources.

Although many browsers report mixed content warnings to the user,by the time this happens, it is too late:the insecure requests have already been performed and the security of the page is compromised.

This is why browsers are increasingly blocking mixed content.If you have mixed content on your site,then fixing it will ensure the content continues to load as browsers become more strict.

The two types of mixed content

The two types of mixed content are: active and passive.

Passive mixed content refers to content that doesn't interact with the rest of the page,and thus a man-in-the-middle attack is restricted to what they can do if they intercept or change that content.Passive mixed content is defined as images, video, and audio content.

Active mixed content interacts with the page as a whole and allows an attacker to do almost anything with the page.Active mixed content includes scripts, stylesheets, iframes,and other code that the browser can download and execute.

Passive mixed content

Passive mixed content is seen as less problematic yet still poses a security threat to your site and your users.For example, an attacker can intercept HTTP requests for images on your site and swap or replace these images;the attacker can swap the save and delete button images,causing your users to delete content without intending to;replace your product diagrams with lewd or p*rnographic content,defacing your site; or replace your product pictures with ads for a different site or product.

Even if the attacker doesn't alter the content of your site,an attacker can track users via mixed content requests.The attacker can tell which pages a user visits and which products they view based on images or other resources that the browser loads.

If passive mixed content is present most browsers will indicate in the URL bar that the page is not secure,even when the page itself was loaded over HTTPS.You can observe this behavior with this demothat contains examples of passive mixed content.

Until recently passive mixed content was loaded in all browsers,as to block it would have broken many websites.This is now beginning to change and so it is vital to update any instances of mixed content on your site.

Chrome is currently rolling outautomatic upgrading of passive mixed content where possible.Automatic upgrading means that if the asset is available over HTTPS, but has been hardcoded as HTTP,the browser will load the HTTPS version. If no secure version can be found the asset will not load.

Whenever it detects mixed content or auto-upgrades passive mixed content,Chrome logs detailed messages to the Issues tab in DevToolsto guide you on how to fix the specific issue.

What is mixed content? | Articles | web.dev (3)

Active mixed content

Active mixed content poses a greater threat than passive mixed content.An attacker can intercept and rewrite active content,thereby taking full control of your page or even your entire website.This allows the attacker to change anything about the page,including displaying entirely different content,stealing user passwords or other login credentials,stealing user session cookies,or redirecting the user to a different site entirely.

Due to the severity of this threat,most browsers already block this type of content by default to protect users,but functionality varies between browser vendors and versions.

This other demo contains examples of active mixed content.Load the example over HTTPto see the content that's blocked when you load the example overHTTPS. Blocked content will alsobe detailed in the Issues tab.

What is mixed content? | Articles | web.dev (4)

The mixed content specification

Browsers follow the mixed content specification,which defines the optionally blockable contentand blockable content categories.

From the spec,a resource qualifies as optionally blockable content"when the risk of allowing its usage as mixed content is outweighed by the risk of breaking significant portions of the web";this is a subset of the passive mixed content category described above.

All content that is not optionally blockable is considered blockable,and should be blocked by the browser.

In recent years, HTTPS usage has risen dramatically,and has become the clear default on the web.This makes it more feasible now for browsers to consider blocking all mixed content,even those subresource types defined in the mixed content specification as optionally blockable.This is why we now see Chrome taking a stricter approach to these subresources.

Older browsers

It is important to remember that not every visitor to your website uses the most up-to-date browsers.Different versions from different browser vendors each treat mixed content differently.At worst, older browsers and versions don't block any mixed content at all,which is very unsafe for the user.

By fixing your mixed content problems you ensure that your content is visible in new browsers.You also help protect users from dangerous content that isn't blocked by older browsers.

What is mixed content?  |  Articles  |  web.dev (2024)

FAQs

What is mixed content?  |  Articles  |  web.dev? ›

A page has mixed content when its initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, and scripts) are loaded over an insecure HTTP connection. The name refers to the mix of HTTP and HTTPS content on a single page.

What is mixed content on a website? ›

When an HTTPS website references insecure (HTTP) resources, this is called mixed content. Browsers prevent an HTTPS website from loading most insecure resources, like fonts, scripts, etc. Migrating an existing website from HTTP to HTTPS means identifying and fixing or replacing mixed content.

How to bypass mixed content blocking? ›

Enabling mixed content in Google Chrome
  1. Click the lock (caution) icon, then click Site settings.
  2. Scroll to Insecure content, then use the drop-down list to change “Block (default)” to “Allow.”
  3. Reload the VEC page.
Oct 10, 2023

How to fix insecure content blocked in Chrome? ›

Allow Insecure Content for the Specific Site:
  1. Visit the website in question.
  2. Click the lock icon in the address bar (left side).
  3. Select "Site Settings."
  4. Under "Insecure Content," choose "Allow."
Dec 30, 2023

What is an example of mixed content? ›

Some common examples of mixed content include JavaScript files, stylesheets, images, videos, and other media. Note: The console will display a message indicating if mixed-display content is being successfully upgraded from HTTP to HTTPS (instead of a warning about "Loading mixed (insecure) display content").

How to check mixed content on a website? ›

If the browser detects mixed content on the page of a website, it will display a red colored triangle to the left of the browser's URL field. This indicates that the SSL certificate has been not been implemented correctly on a server or the page is having insecure internal links.

What causes mixed content? ›

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection.

What is a mixed content error over HTTPS? ›

Users can easily identify TLS-encrypted sites because they have 'https://' in the URL instead of 'http://'. But in some instances, an HTTPS site can also contain some elements that are loaded using the plaintext HTTP protocol. This creates a condition known as mixed content, sometimes referred to as 'HTTP over HTTPS'.

What is mixed content in SEO? ›

A webpage with mixed content is one that contains both HTTP and HTTPS material. You may access a secured, HTTPS page of a given website, but there could be scripts, images, videos, and other types of content that are served with a standard, insecure protocol (HTTP).

What to do if a website is blocked? ›

Simple — use a VPN. VPNs, or virtual private networks, allow you to spoof your digital location and cut through the proverbial red tape that blocks you from certain websites. And this goes for desktops, laptops and mobile devices too.

How do I allow mixed content in edge browser? ›

Microsoft Edge

Locate the lock icon on the address bar and click on it. From the drop-down list, select “Permissions for this site”. Scroll down and find “Insecure content.” Click its drop-down list to change “Block (default)” to “Allow”.

How do I allow blocked content? ›

For Chrome:
  1. Click on the shield in the right hand side of the URL text box (see image below).
  2. Then click on Site Settings.
  3. A list of permissions is displayed in a new browser tab. Find the Insecure content permission and change to Allow.
  4. Close the Settings tab to return to the original web page.

Why is Chrome blocking content? ›

Chrome has a built-in security feature called Safe Browsing that protects you from harmful downloads and websites. Sometimes this feature may block files that are actually safe, but if you are sure the file you are downloading is not dangerous, you can disable it it.

Why is my computer blocking websites? ›

The DNS servers your device is set to use may be blocking the site you're trying to visit. This is common when using DNS service providers that use security blacklists to block known rogue sites. Usually your computer will be set to obtain DNS server info automatically, but you can specify servers if you wish.

How to fix mixed content in SSL? ›

How to Fix Mixed Content Issue?
  1. Step 1: Identify Mixed Content on the Page. ...
  2. Step 2: Check if the Resource is Available in HTTP and HTTPS. ...
  3. Step 3: Migrating an HTTP Resource to HTTPS. ...
  4. Step 4: Update the Source File. ...
  5. Step 5: Check Whether the Error Has been Resolved.
Jan 23, 2024

How do you identify mixed content? ›

If your HTML is loaded over https, and your resources load (partly) over http, the content is “mixed”: you have mixed content. There can also be other causes: for example, an image that loads over https, but gets redirected to http. Finding these insecure resources in the browser is usually not so difficult.

Does mixed content affect SEO? ›

Mixed content can affect your website's SEO in several ways. First, Google may mark your site as “not secure” if it detects mixed content. This can lead to lower click-through rates, as users will see a warning message when they try to visit your site.

What causes mixed content warnings? ›

Mixed Content Warning Explained

The mixed content warning appears when certain links or resources on your site run on HTTP and HTTPS connections. You will see a padlock icon beside the URL in your browser's address bar if your WordPress website has an SSL certificate.

Top Articles
Latest Posts
Article information

Author: Prof. An Powlowski

Last Updated:

Views: 5582

Rating: 4.3 / 5 (64 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Prof. An Powlowski

Birthday: 1992-09-29

Address: Apt. 994 8891 Orval Hill, Brittnyburgh, AZ 41023-0398

Phone: +26417467956738

Job: District Marketing Strategist

Hobby: Embroidery, Bodybuilding, Motor sports, Amateur radio, Wood carving, Whittling, Air sports

Introduction: My name is Prof. An Powlowski, I am a charming, helpful, attractive, good, graceful, thoughtful, vast person who loves writing and wants to share my knowledge and understanding with you.