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

Question

I'm facing an issue with my ReactJS code since I added the react-native-google-cast library in my project.
The issue is the following :

I want to cast to my Android TV a HTTP video source coming from the web. I added the CastButton in my application, which works fine and detects devices around me.
But the problem is that, when I want to launch the cast to my Android TV box (under Android 9), it fails with the following message : "Mixed Content: The page at 'https://www.gstatic.com/cast/sdk/default_receiver/1.0/app.html?skin=https://www.gstatic.com/eureka/player/0000/skins/cast/skin.css&google_cast_bg=true' was loaded over HTTPS, but requested an insecure video 'XXXX'. This content should also be served over HTTPS.".
After many researches over the Web I found that using the solution of this topic should do the trick, but it does not the error keeps coming. (Android 8: Cleartext HTTP traffic not permitted). I've found that the file android/app/build/intermediates/instant_app_manifest/debug/AndroidManifest.xml:4 contains android:targetSandboxVersion="2", but I can't override it as it's reload from somewhere (?) every rebuild.

Here is my AndroidManifest.xml file :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.iptvapp"
  android:targetSandboxVersion="1"
  android:usesCleartextTraffic="true">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:networkSecurityConfig="@xml/network_security_config"
      android:theme="@style/AppTheme">
      <meta-data
        android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
        android:value="com.reactnative.googlecast.GoogleCastOptionsProvider" />
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

score 0 · Answer 1 · answered Nov 12 '20 at 22:06

If you want to cast HTTP video, you need to load cast_receiver_framework via HTTP to avoid mixed content. Google's cast receiver uses schemeless URLs like:

<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>

// www.gstatic.com means it will be loaded via current page loading scheme. Your app should be loaded via HTTP, then all libs will work via HTTP too.

Alternatively you can use an upgrade-insecure-requests CSP directive and place:

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

into <head> section. In this case browsers "magilally" replace all HTTP requests to HTTPS one. This variant is much secure then HTTP, but played videos should be accessible via HTTPS.

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

1 Answers1