29

I'm forcing https to access my website, but some of the contents must be loaded over http (for example video contents can not be over https), but the browsers block the request because of mixed-contents policy.

After hours of searching I found that I can use Content-Security-Policy but I have no idea how to allow mixed contents with it.

<meta http-equiv="Content-Security-Policy" content="????">
Mustafa Dwaikat
  • 3,392
  • 9
  • 27
  • 41
  • I have the same problem. I think it's not an issue to provide a way of enabling mixed content server side. The developer can then do checksums on the loaded data to figure out if the content hasn't been tampered with. Just like for example Debian packages are downloaded via HTTP and then checksumed, I don't understand why my CDN has to be HTTPS. The programmer (sometimes) knows what he's doing. – jg6 Nov 22 '20 at 12:16

3 Answers3

30

You can't.

CSP is there to restrict content on your website, not to loosen browser restrictions.

Secure https sites given users certain guarantees and it's not really fair to then allow http content to be loaded over it (hence the mixed content warnings) and really not fair if you could hide these warnings without your users consent.

You can use CSP for a couple of things to aid a migration to https, for example:

  1. You can use it to automatically upgrade http request to https (though browser support isn't universal). This helps in case you missed changing a http link to https equivalent. However this assumes the resource can be loaded over https and sounds like you cannot load them over https so that's not an option.

  2. You can also use CSP to help you identify any http resources on you site you missed by reporting back a message to a service you can monitor to say a http resource was attempted to be loaded. This allows you identify and fix the http links to https so you don't have to depend on above automatic upgrade.

But neither is what you are really looking for.

Barry Pollard
  • 40,655
  • 7
  • 76
  • 92
15

You shouldn't... but you CAN, the feature is demonstrated here an HTTP PNG image converted on-the-fly to HTTPS.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

There's also a new permissions API, described here, that allows a Web server to check the user's permissions for features like geolocation, push, notification and Web MIDI.

nodws
  • 1,018
  • 14
  • 18
  • I have added this in header section of master page but it wont help, is there any IIS Configuration that I supposed to do? coz I heard that chrome wont allow us to convert from HTTP file to HTTPS – PK-1825 May 28 '19 at 11:02
  • 5
    I don't think it will help in your case, this solution assumes that you already have a valid secured URL with 'https', then this tag will help the browser to automatically call those ulrs will 'https' instead of 'http' without your need to manually change it in your page code, while if you don't have that secured URL, I believe you can this method. – Green Nov 20 '19 at 16:39
  • 2
    Huge -1, cuz upgrade-insecure-requests has nothing to do with allowing mixed content, it just changes request scheme to https, and that's what happening in the attached example, not "conversion on-the-fly to HTTPS" – lucifer63 Dec 14 '20 at 16:24
  • Irrelevant,OP wanted to know HOW to use the meta tag – nodws Dec 15 '20 at 15:15
  • 1
    no, the question he asked was "How can I allow Mixed contents". that meta tag doesn't allow it. – stt Jul 01 '21 at 14:12
  • Yes, It will allow you to use your old urls with your valid SSL – nodws Jul 06 '21 at 17:04
  • No, that's not allowing mixed content, that's trying to load insecure content via https and only works if the server actually provides the content via https. – sui Apr 26 '23 at 17:40
1

Although you cannot allow mixed content in the browser, you may be able to wrap the endpoint in a local endpoint that's served over HTTPS. Thus, HTTP/HTTPS mixing occurs backend-to-backend, which is allowed and should be safe enough. The wrapper endpoint could look like this in PHP:

<?php
    $endp = !isset($_GET['endp']) ? '' : $_GET['endp'];
    if ($endp === 'doit') {
        header('Content-Type: application/json');
        echo file_get_contents('http://problematic-server/doit');
    } else {
        echo '{"err":"unsupported-endpoint"}';
    }
// Don't close php tag to avoid unwanted whitespace in response.

In your case with video content, it may not be possible, though.

digory doo
  • 1,978
  • 2
  • 23
  • 37
  • This is a clever solution, but does mean increased traffic on your server, and if you don't control `problematic-server` then you open up a number of new potential attack surfaces. Just something to be aware of before using this solution – Freedom_Ben Jun 21 '23 at 17:17