[TIMOB-19618] Android : add mixed content control to webview

GitHub Issue	n/a
Type	New Feature
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2018-08-24T01:50:14.000+0000
Affected Version/s	Release 4.1.1
Fix Version/s	Release 7.5.0
Components	Android
Labels	n/a
Reporter	grebulon
Assignee	Gary Mathews
Created	2015-03-31T09:40:02.000+0000
Updated	2018-08-24T01:50:18.000+0000

Description

Android 5 (21) adds WebSettings.setMixedContentMode to control how mixed content is handled (https that contains inlined http). Need to add access to this. https://developer.android.com/reference/android/webkit/WebSettings#setMixedContentMode(int) Description: Images doesn't load in webview if they are hosted on http server! E.g. if you assign webview url property to https://blogs-dev.vmware.com/vov/authors/ Some images get load properly but some which are hosted on http server or have http://xyz path they are not getting loaded. Test code:

<Alloy>
<Window class="container">
<WebView id="label" url="https://blogs.vmware.com/vov/authors/"></WebView> 
</Window>
</Alloy>

Error Log:

[INFO] : I/TiWebChromeClient.console: (main) [111,16675] Mixed Content: The page at 'https://blogs.vmware.com/vov/authors/#' was loaded over HTTPS, but requested an insecure image 'http://blogs.vmware.com/vov/files/2018/02/boney-francis.jpg'. This request has been blocked; the content must be served over HTTPS. (0:https://blogs.vmware.com/vov/authors/#)
[INFO] : I/TiWebChromeClient.console: (main) [1,16676] Mixed Content: The page at 'https://blogs.vmware.com/vov/authors/#' was loaded over HTTPS, but requested an insecure image 'http://blogs.vmware.com/vov/files/2018/03/Jerry_Griffin.png'. This request has been blocked; the content must be served over HTTPS. (0:https://blogs.vmware.com/vov/authors/#)
[INFO] : I/TiWebChromeClient.console: (main) [0,16676] Mixed Content: The page at 'https://blogs.vmware.com/vov/authors/#' was loaded over HTTPS, but requested an insecure image 'http://blogs.vmware.com/vov/files/2017/11/Bask-Iyer-170x170.jpg'. This request has been blocked; the content must be served over HTTPS. (0:https://blogs.vmware.com/vov/authors/#)
[INFO] : I/TiWebChromeClient.console: (main) [1,16677] Mixed Content: The page at 'https://blogs.vmware.com/vov/authors/#' was loaded over HTTPS, but requested an insecure image 'http://blogs.vmware.com/vov/files/2018/05/ankur.jpg'. This request has been blocked; the content must be served over HTTPS. (0:https://blogs.vmware.com/vov/authors/#)
[INFO] : I/TiWebChromeClient.console: (main) [1,16678] Mixed Content: The page at 'https://blogs.vmware.com/vov/authors/#' was loaded over HTTPS, but requested an insecure image 'http://blogs.vmware.com/vov/files/2018/03/romy-kaura.png'. This request has been blocked; the content must be served over HTTPS. (0:https://blogs.vmware.com/vov/authors/#)

Test Environment:


Android 8.0, Android 6.0
Operating System
  Name                        = Microsoft Windows 10 Pro
  Version                     = 10.0.16299
  Architecture                = 32bit
  # CPUs                      = 4
  Memory                      = 17091956736
Node.js
  Node.js Version             = 8.9.1
  npm Version                 = 5.5.1
Titanium CLI
  CLI Version                 = 5.1.0
Titanium SDK
  SDK Version                 = 7.1.0.GA, 6.3.0.GA

Thanks

Comments

Marian Kucharcik 2017-10-30

Hi guys, I get this error: Mixed Content: The page at 'https:// was loaded over HTTPS, but requested an insecure image. This request has been blocked; the content must be served over HTTPS. Webview cannot load website properly. Can you please look at it? Thanks
shumne 2018-05-25

Hi Guys, Any updates on this one!
shumne 2018-06-14

Hi Guys, This has been open and critical for a long time. Are we going to do anything about this?
Joshua Quick 2018-07-18

Everyone, If a web page is loaded via "https", then it's considered a security issue if you load content via "http" within that "https" loaded page. Particularly for http iframes. Desktop web browsers do not normally allow this unless you go out of your way to enable it. Now, I don't mind us providing a property to allow mixed https/http content on Android. It should be disabled by default because it is security issue. However, it does not appear that the native iOS WKWebViews supports mixed content (native UIWebViews are now deprecated). So, this would be a portability issue... where the only solution would be to move the http content to https.

Gary Mathews 2018-07-18

On iOS you can enable HTTP access for specific domains by adding this to your tiapp.xml:

   <key>NSAppTransportSecurity</key>
   <dict>
   	<key>NSAllowsArbitraryLoads</key>
   	<true/>
   	<key>NSExceptionDomains</key>
   	<dict>
   		<key>vmware.com</key>
   		<dict>
   			<key>NSExceptionAllowsInsecureHTTPLoads</key>
   			<true/>
   			<key>NSIncludesSubdomains</key>
   			<true/>
   		</dict>
   	</dict>
   </dict>

Gary Mathews 2018-07-18

master: https://github.com/appcelerator/titanium_mobile/pull/10186
Hans Knöchel 2018-07-19

[~gmathews] iOS actually allows it by default already, since the NSAllowsArbitraryLoads setting is enabled: <key>NSAllowsArbitraryLoads</key> <true/> This works with both UIWebView (currently used on iOS) and WKWebView (used in SDK 8+).
Vijay Singh 2018-07-19

[~hknoechel] is correct. Only if developer forcefully set key 'NSAllowsArbitraryLoads' to 'false' in tiapp.xml, then only key 'NSExceptionDomains' and corresponding value need to be added. Otherwise it allows for all domains.
Gary Mathews 2018-07-19

[~hknoechel] [~vijaysingh] Oh nice!

Samir Mohammed 2018-08-13

*Closing ticket.* Verified feature in SDK version: 7.4.0.v20180810061237 *FR Passed (Test Steps):*

Created a titanium application with the test case below

    const win = Ti.UI.createWindow({ backgroundColor: 'gray' }),
          webView = Ti.UI.createWebView({
              url: 'https://www.bennish.net/mixed-content.html',
              mixedContentMode: true
          });
    
    win.add(webView);
    win.open();

Ran the program

Able to see http content e.g. sound clips, iframes, images, videos

*Test Environment*

    APPC Studio: 5.0.0.201712081732
    APPC CLI: 7.0.4
    Nexus 6p Emulator (7.1)
    Operating System Name: Mac OS High Sierra
    Operating System Version: 10.13
    Node.js Version: 8.9.1
    Xcode 9.2

JSON Source