Announcement

devman

Member

Registered: 2014-09-20

Posts: 76

Co-Browsing missing css

Configuration: 2.34, automated hosting, nodejs for chat, but not for co-browsing(yet).

A. When a co-browse session is started by a manager operator, the web site displays properly.
B. When a co-browse session is started by a client operator in an instance, the web site display an unformatted site.  Highlighting and navigation works ok.

1. I could not find any settings in the instance configuration for co-browsing.  Is each instance dependent on the manager configuration?
2. I am not sure if this is an issue with automated hosting/co-browse configuration or http vs https.  The manager site is all https.  The web site in A is https.  The web site with the issue in B is only http.  What can I check to determine if this is an issue with css proxy through LHC as mentioned in the docs?

Update: I took the chat widget code from the manager and put in the http only site.  Co-browsing displays correctly from a manager operator session to the http site.

Last edited by devman (2015-07-27 23:35:03)

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Co-Browsing missing css

1. Make sure that operator has permission to use https://github.com/LiveHelperChat/liveh … le.php#L48 I ques it does as it can open co-browser window.
2. Make sure you have overridden these https://github.com/LiveHelperChat/autom … lhcobrowse

My overridden files content:
operator.ini.tpl.php

var lhcbrowserOpeator = new LHCCoBrowserOperator(window,document,{'lhcbase':'<?php echo (erLhcoreClassSystem::$httpsMode == true ? 'https://' : 'http://').$_SERVER['HTTP_HOST']?><?php echo erLhcoreClassDesign::baseurl('cobrowse/proxycss')?>','httpsmode':<?php echo erLhcoreClassSystem::$httpsMode == true ? 'true' : 'false'?>,'disablejs':<?php echo erLhcoreClassModelChatConfig::fetch('disable_js_execution')->current_value == 1 ? 'true' : 'false'?>,options:{opcontrol:$('#status-icon-control'),opscroll:$('#sync-user-scroll'),opmouse:$('#show-operator-mouse'),scroll:$('#scroll-user-window')},'cpos':{w:<?php echo $browse->w?>,wh:<?php echo $browse->wh?>},'cursor':'https://<?php echo $_SERVER['HTTP_HOST']?><?php echo erLhcoreClassDesign::design('images/icons/cursor.png')?>','nodejssettings':{'nodejssocket':'https://cdn.socket.io/socket.io-1.1.0.js','nodejshost':'https://wscboh.livehelperchat.com','path':'','secure':true},'nodejsenabled':1,'chat_hash':'<?php echo $browse->chat->hash?>','chat_id':<?php echo $browse->chat_id?>, 'base':<?php echo json_encode($browse->url)?>, 'initialize' : <?php echo $browse->initialize != '' ? $browse->initialize : 'null'?>});

user.init.tpl.php

this.cobrowser = new LHCCoBrowser({'chat_hash':this.sharehash,'nodejssettings':{'nodejssocket':'https://cdn.socket.io/socket.io-1.1.0.js','nodejshost':'https://wscboh.livehelperchat.com','path':'','secure':true},'nodejsenabled':1,'trans':{'operator_watching':<?php echo json_encode(htmlspecialchars_decode(erTranslationClassLhTranslation::getInstance()->getTranslation('chat/getstatus','Screen shared, click to finish'),ENT_QUOTES))?>},'url':'https://<?php echo $_SERVER['HTTP_HOST']?><?php echo erLhcoreClassDesign::baseurlsite()?>'+lh_inst.lang+'/cobrowse/storenodemap'+inst.getAppendCookieArguments()+'/?url='+encodeURIComponent(location.href.match(/^(.*\/)[^\/]*$/)[1])});
this.cobrowser.startMirroring();

devman

Member

Registered: 2014-09-20

Posts: 76

Re: Co-Browsing missing css

I created the override files and changed the following since I am not using nodejs cobrowse: 'nodejsenabled':0, 'secure':false.
I assume I don't need to change nodejshost since it is not being used.  The files are now in both the manager and client.  The cache was cleared on both manager and client.

I noticed the file in your reply above is different than the one in the automated hosting on github.  Are there other files that have not been updated on github?

The client operator is still only displaying the unformatted html from the web site.
When inspecting the operator co-browse window it appears that it wants to download js and images that should be on web site, but it is trying to get them from the chat server (where they don't exist) and receiving a 404 not found.  Is this what the css proxy is supposed to do?

Does automated hosting only work if using the nodejs co-browse server?

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Co-Browsing missing css

The things i pasted are just my override, files location in
https://github.com/LiveHelperChat/autom … lhcobrowse

automated hosting should work without nodejs also i ques. Just hard to say...

I ques you will have to figure-out yourself

devman

Member

Registered: 2014-09-20

Posts: 76

Re: Co-Browsing missing css

So I have been debugging all day and have tried every combination that I can think of and still no luck.  I have compared all the automated hosting and cobrowsing files with github. I changed each of the parameters in multiple versions of the operatorinit file.  I have changed nginx config to be more permissive.

It works still in manager but not in client.

Currently I have nodejs co-browsing server set up and running. It is using nginx proxy and ssl.  I have the console with debug true so I can see all the traffic from the web site (data, cursor movement, etc.) and the operator.  The base functionality seems to be working ok: it is still not loading all the files from the client web site.

I am using the operatorinit override from the post with values for my chat server.

Where it is failing is when the chat server tries to pull content from the site.  There are messages on the console of the operator co-browse window with the following(ust a couple samples):

Mixed Content: The page at 'https://testchat-website.example.com/site_admin/cobrowse/mirror' was loaded over HTTPS,
 but requested an insecure script 'http://testchat.website.com/js/jquery.js'. This request has been blocked; the content must be served over HTTPS.

and 

Mixed Content: The page at 'https://testchat-website.example.com/site_admin/cobrowse/mirror' was loaded over HTTPS,
 but requested an insecure image 'http://testchat.website.com/img/dog.png'. This content should also be served over HTTPS.

If I delete your modified override and just let the default configuration load, the files are blocked or throw a 404 (samples):

GET https://testchat-website.example.com/site_admin/cobrowse/js/jquery.js 
GET https://testchat-website.example.com/site_admin/cobrowse/img/dog.png 404 (Not Found)

I don't understand why the same site works within the manager (by using an embedded widget from manager) but not within automated hosting instance.
It seems like the proxycss.php is either not getting called properly or it is not masking the http calls to the web site and returning https to the operator or it is trying to access the web site via https when it is http.

I am willing to do some more troubleshooting but am not sure what to look for.  I need some suggestions on what to check next or ideas on how to trace the http/https calls happening within the cssproxy.

Thanks!

Last edited by devman (2015-07-29 00:24:47)

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Co-Browsing missing css

Hi,

It's really hard to say what's exact reason it is. Basically ideally is then both site and lhc isntance matches protocols. Otherwise lhc proxy css have to be used. But it's complex part and perhaps in your case it does not parse css correctly most likely.

1. Try to open /site_admin/cobrowse/mirror under same protocol as site. http or https

These are caused most likely by some issue in lhc proxy css script and it just could not determine a path.
GET https://testchat-website.example.com/si … /jquery.js
GET https://testchat-website.example.com/si … mg/dog.png 404 (Not Found)

devman

Member

Registered: 2014-09-20

Posts: 76

Re: Co-Browsing missing css

I went back to trying co-browsing with a manager operator and looked at the browser console.  I found that when co-browsing to a site with http there are still resource that are not being loaded.  I went to the demo.livehelperchat.com site, grabbed the chat widget and put it on an http page.  It acts the same.  There are some resources that do not get loaded.

Regarding using co-browsing with an instance operator.  I found that the $browse variable is not getting the base url populated.  Is this a bug?  I have not been able to determine how it is supposed to get the value when running in automated hosting.  This might be keeping the items like bootstrap.js and other from loading.  I tried substituting the correct url directly in 'base' in the operator.init.php.  It looks like it will load, but is getting the 'Mixed Content' error and the browser is blocking it.  How does the erLhcoreClassModelCoBrowse Object get populated when using automated hosting?  Any insight would be helpful.

<b>Undefined index: base in <b>/var/www/chatserver/lhc_customer/modules/lhcobrowse/proxycss.php</b> on line <b>18</b>

Last edited by devman (2015-07-29 22:36:15)

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Co-Browsing missing css

Perhaps it's some strange page you have.

Because base argument is always passed
https://github.com/LiveHelperChat/liveh … #L193-L201

Without live seeing this issue it's really just impossible to tell where to look for an issue.

devman

Member

Registered: 2014-09-20

Posts: 76

Re: Co-Browsing missing css

So I can confirm that the $browse object does not have the url populated before the lhcbrowserOpeator is created in an instance.  I'll have to start tracking back to see why it is not getting a value.

Details:
In the operatorinit.tpl.php I added another js var to output the $browse:

var lhcTEMP = <?php   print_r($browse); ?>;
var lhcbrowserOpeator = new LHCCoBrowserOperator(window,document,{'lhcbase':'<?php echo (erLhcoreClassSystem::$httpsMode == true ? 'https://' : 'http://').$_SERVER['HTTP_HOST']?><?php echo .......

The resulting lhcTEMP has the following values.  Since the url is not populated here, the base is not populated in the lhcbrowserOpeator variable ('base':<?php echo json_encode($browse->url)?>)

var lhcTEMP = erLhcoreClassModelCoBrowse Object
(
    [id] => 21
    [mtime] => 1438327025
    [chat_id] => 29
    [url] => 
    [modifications] => 
    [initialize] => 
    [online_user_id] => 1
    [finished] => 1
    [w] => 1595
    [wh] => 876
    [x] => 0
    [y] => 0
    [chat] => erLhcoreClassModelChat Object
        (
            [id] => 29
            [nick] => test
            [status] => 1
            [status_sub] => 0
            [time] => 1438325943
            [user_id] => 1
            [hash] => c645e8c3c393e74f71655fee815edf41a39d1283
            [ip] => 68.2.238.7
            [referrer] => 
            [dep_id] => 1
            [email] => ***.colm
            [user_status] => 0
            [support_informed] => 1
            [country_code] => us
            [country_name] => United States
            [phone] => 
            [user_typing] => 0
            [user_typing_txt] => 
            [operator_typing] => 0
            [has_unread_messages] => 0
            [last_user_msg_time] => 0
            [last_msg_id] => 101
            [mail_send] => 0
            [lat] => 38
            [lon] => -97
            [city] => 
            [additional_data] => 
            [session_referrer] => 
            [wait_time] => 2
            [chat_duration] => 0
            [priority] => 0
            [online_user_id] => 1
            [transfer_if_na] => 0
            [transfer_timeout_ts] => 0
            [transfer_timeout_ac] => 0
            [wait_timeout] => 0
            [wait_timeout_send] => 0
            [timeout_message] => 
            [user_tz_identifier] => America/Denver
            [na_cb_executed] => 0
            [nc_cb_executed] => 1
            [fbst] => 0
            [operator_typing_id] => 0
            [chat_initiator] => 0
            [chat_variables] => 
            [remarks] => 
            [operation] => 
            [operation_admin] => 
            [screenshot_id] => 0
            [wait_timeout_repeat] => 0
            [unread_messages_informed] => 0
            [reinform_timeout] => 0
            [user_closed_ts] => 0
            [tslasign] => 0
            [chat_locale] => 
            [chat_locale_to] => 
            [updateIgnoreColumns] => Array
                (
                )

        )

)

devman

Member

Registered: 2014-09-20

Posts: 76

Re: Co-Browsing missing css

Update

When co-browsing from the operators window:
Working backwards to lib/core/lhcobrowse/lhcobrowse.php it looks like the base parameter in the $browse variable which is an erLhcoreClassModelCoBrowse object will never get an initial value from the url because the object is populated from a erLhcoreClassModelChat object that does not contain a url key.  This is when the co-browse window is first opened by an operator.

The 'base' key in the javascript lhcbrowserOpeator variable gets populated once the operator clicks the blue eye button and the co-browse session is initialized.  So this does not seem to be the issue.

After digging more I found that the browser debug console for the operator co-browse was always calling resources from the visitor site with http:.  I investigated the visitor web site and found that the resources (e.g. <script>)  inserted into the DOM all started with //.  It looks like when the operator tries to load the resource it appends http: then fails when the chat manager only allows https:.  I traced back and found that the default template for the user init is different than the one in the instance customer override.  The default theme used 'explicit_http_mode'; the override php just has http: for the url parameter. 

I found that the explicit http mode is set in the instance for that site in "Sytstem configuration >Live help configuration > Chat configuration > Misc".  I set this to https: even though the site is http (it was blank before and it is not a required field).  This added https: to all the to the scripts on the visistor site.  This allowed those resources to load in the operator co-browse window but there is still an issue because there are other scripts from the widget that still have just //, like the call to getstatus. At least I am down to only 4 calls that are being blocked.

It appears the issue is not with the visitor site but the injected code relying on the explicit http mode in the instance.

Configuring an http site for https when it does not use it does not seem to be the answer.  Adding https into the userinit.tpl.php does instancecutomeroverridetheme does not seem to work.  It gets stripped off.  It seems for injecting script urls into any site should depend on the http mode of the manager (in settings.ini.php) and not the explicit http mode of each instance since the script always point back to the chat server.
   

Is there a way to always add https: to the resource injected into the visitor web site that point to the chat server when the chat server uses https only without using the explicit http mode? If not, any suggestions in how to override?

remdex

Administrator

From: Lithuania

Registered: 2012-09-23

Posts: 3,661

Website

Re: Co-Browsing missing css

Well,

1. You should not set "explicit http mode" it influences how cookies are stored just. Now how resources are loaded.
2. Most logical way is just to have // instead if http and https
3. Co-Browsing should never execute JS found in user site. Executing JS most of the time breaks co-browsing session. So just always have "Disable JS execution in Co-Browsing operator window" on
4. About everything else I'm not sure. Like i told test it with automted hosting I have and will find differences if there is any.