CODEWITHSUNDEEP
androidruby-on-railsnginxreact-nativewebview
ogelacinyc
ogelacinyc

Reputation: 1372

Webview-android in react-native couldn't response data by https scheme

I made Webview on React-native and test in emulating android device.

App build completed and lanched on device.

But it can't rendered page. only show blank page.

It can load by using http scheme url in my local server(mac).

Changed url to google or yahoo is rendered both http and https.

My services can load in chrome and safari browser both http and https.

But iOS Device(emulating by XCode) can be.

But my service url in production can not load by using both http and https.

If remove force_ssl in rails server config, it can be only by http not https.

So I think it that rails configuration or nginx configuration are related to SSL.

But I couldn't found any clue.

no error log in server.

Can anyone help me?

relative infos

mobile framework - react-native 0.46.2

web framework - rails 4.2.8

language - ruby 2.2

server os - linux devian 3.2.65

http server - nginx

testing device - adv(emulating) 7.1.1 api 25

ssl certifacation - expired in July 2018

this is my react-native source

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  WebView
} from 'react-native';

export default class MyService extends Component {
  constructor() {
    super();
    this.state = {
      url: "https://MyService.com"
    }
  }

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'column' }}>
        <WebView source={{ uri: this.state.url }}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('MyService', () => MyService);

this is my nginx conf

upstream unicorn_my_service {

  server unix:/tmp/unicorn.my_service.sock fail_timeout=0;

}

server {

    listen 80;

    client_max_body_size 4G;
    keepalive_timeout 10;

    error_page 500 502 504 /500.html;
    error_page 503 @503;

    server_name my_service.com;
    root /var/www/my_service/current/public;
    try_files $uri/index.html $uri @unicorn_my_service;

    location @unicorn_my_service {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        proxy_pass http://unicorn_my_service;
        # limit_req zone=one;
        access_log /var/log/nginx/staging.access.log;
        error_log /var/log/nginx/staging.error.log;
    }

    location ^~ /assets/ {
        gzip_static on;
        expires max;
        add_header Cache-Control public;
    }


    location /videos/ {
      mp4;
      mp4_buffer_size     1m;
      mp4_max_buffer_size 10m;
    }


    location = /50x.html {
        root html;
    }

    location = /404.html {
        root html;
    }

    location @503 {
        error_page 405 = /system/maintenance.html;
        if (-f $document_root/system/maintenance.html) {
            rewrite ^(.*)$ /system/maintenance.html break;
        }
        rewrite ^(.*)$ /503.html break;
    }

    if ($request_method !~ ^(GET|HEAD|PUT|PATCH|POST|DELETE|OPTIONS)$ ){
        return 405;
    }

    if (-f $document_root/system/maintenance.html) {
        return 503;
    }
}

server {

    listen 443;

    ssl on;
    ssl_certificate /etc/ssl/certs/my_service.com.crt;
    ssl_certificate_key /etc/ssl/private/my_service.com.key;

    client_max_body_size 4G;
    keepalive_timeout 10;

    error_page 500 502 504 /500.html;
    error_page 503 @503;

    server_name my_service.com;
    root /var/www/my_service/current/public;
    try_files $uri/index.html $uri @unicorn_my_service;

    location @unicorn_my_service {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        proxy_set_header X-Forwarded-Proto https;



        proxy_pass http://unicorn_my_service;
        # limit_req zone=one;
        access_log /var/log/nginx/staging.access.log;
        error_log /var/log/nginx/staging.error.log;
    }

    location ^~ /assets/ {
        gzip_static on;
        expires max;
        add_header Cache-Control public;
    }


    location /videos/ {
      mp4;
      mp4_buffer_size     1m;
      mp4_max_buffer_size 10m;
    }


    location = /50x.html {
        root html;
    }

    location = /404.html {
        root html;
    }

    location @503 {
        error_page 405 = /system/maintenance.html;
        if (-f $document_root/system/maintenance.html) {
            rewrite ^(.*)$ /system/maintenance.html break;
        }
        rewrite ^(.*)$ /503.html break;
    }

    if ($request_method !~ ^(GET|HEAD|PUT|PATCH|POST|DELETE|OPTIONS)$ ){
        return 405;
    }

    if (-f $document_root/system/maintenance.html) {
        return 503;
    }
}

this is my rails application controller for setting force_ssl

class ApplicationController < ActionController::Base

  protect_from_forgery with: :exception

  force_ssl if: :ssl_configured?

  def ssl_configured?
    _ssl_configured = if /oauth/ =~ params[:controller] && /new_session|oauth/ =~ params[:action]
      false
    else
      Rails.env.production?
    end

    _ssl_configured
  end

rails production log when it connected by only http protocol

Started GET "/" for 11.123.123.123 at 2017-07-14 07:47:10 +0000
INFO -- : Processing by MainController#index as HTML
INFO -- : Redirected to https://123.123.123.123/
INFO -- : Filter chain halted as #<Proc:0x007f1999ba46b8@/var/www/my_service/shared/bundle/ruby/2.2.0/gems/actionpack-4.2.8/lib/action_controller/metal/force_ssl.rb:65> rendered or redirected
INFO -- : Completed 301 Moved Permanently in 5ms (ActiveRecord: 0.0ms)

nginx access log when it connected by only http protocol

[14/Jul/2017:08:06:19 +0000] "GET / HTTP/1.1" 301 101 "-" "Mozilla/5.0 (Linux; Android 7.1.1; Android SDK built for x86_64 Build/NYC; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/55.0.2883.91 Mobile Safari/537.36"

Upvotes: 0

Views: 1276

Answers (1)

ogelacinyc
ogelacinyc

Reputation: 1372

I solved it myself.

SSL Certificate Chaining caused to not connect by https. My web server's certificate had not intermediate and bundle. It only had a server certificate.

So I recevied new certificate and bundled, updated my nginx conf. Then it works fine!

It doesn't but relative with react, nginx settings, framework, version, only SSL Certificate.

check this https://developer.android.com/training/articles/security-ssl.html

Upvotes: 1

Related Questions