How can I allow Mixed contents (http with https) using content-security-policy meta tag?

Question

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="????">

Deirdre

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. – Apollonian

Answer 1

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.

Aldrich

can the security be loosened via the origin response header? I was looking into the meta tag as it sounded easier to add. – Hirschfeld

No. It's only used to tighten security policy - not loosen it. As mentioned in my answer. – Aldrich

Answer 2

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.

Leukoderma

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 – Sublimity

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. – Alcestis

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" – Maximilianus

Irrelevant,OP wanted to know HOW to use the meta tag – Leukoderma

no, the question he asked was "How can I allow Mixed contents". that meta tag doesn't allow it. – Blackandblue

Yes, It will allow you to use your old urls with your valid SSL – Leukoderma

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. – Microscopy

Answer 3

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.

Chiropractor

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 – Intramolecular