salesforce RemoteAction and Chrome developer tools -> Network log exposing data - salesforce

Question

I created a VF page and RemoteAction there is no system.debug or console.log anywhere in apex class or vf page respectively, as a result of which in Chrome developer tools -> console log there is not output but surprisingly in Network tab if you select apexremote you get to see the data returned from the query even the encrypted fields in the object.
If you see the code below, credit_card__c field is encrypted, and I am not even exposing it in my VF, still in chrome developer tools network tab I see the entire data.
How can I stop any log in my network tab of chrome developer tools ?
global class AccountRemoteService {
public String accountName { get; set; }
public static Account account { get; set; }
global AccountRemoteService(){}
#RemoteAction
global static Account getAccount(String accountName)
{
account = [SELECT id, name, credit_card__c FROM Account WHERE name = :accountName ];
return account;
}
}
VF Page
<apex:page controller="AccountRemoteService">
<script type="text/javascript">
function getRemoteAccount()
{
//get the values of input text and place into the variable.
var paramAccountName = document.getElementById('accName').value;
AccountRemoteService.getAccount( paramAccountName,
function(result, event)
{
alert('event.status==>'+event.status);
alert('event.type === '+event.type);
alert('event.message ==>'+event.message);
if (event.status)
{
// demonstrates how to get ID for HTML and Visualforce tags
document.getElementById("{!$Component.theBlock.thePageBlockSection.accountId.Id}").innerHTML = result.Id;
document.getElementById("{!$Component.theBlock.thePageBlockSection.accountName.Nam}").innerHTML = result.Name;
}
else if (event.type === 'exception')
{
document.getElementById("errors-js").innerHTML = event.message;
} else
{
document.getElementById("errors-js").innerHTML = 'No Records Found..';
}
}, {escape:true});
}
</script>
Account Name :<input id="accName" type="text" />
<button onclick="getRemoteAccount()">Get Account</button>
<div id="errors-js"> </div>
<apex:pageBlock id="theBlock">
<apex:pageBlockSection id="thePageBlockSection" columns="2">
<apex:pageBlockSectionItem id="accountId">
<apex:outputText id="Id"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="accountName" >
<apex:outputText id="Nam" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>

Answer 1

There are a lot of things here that you are doing that should probably be done a different way, that I would just mention as an aside.
You are querying account by name not by a unique value which can lead to possibly more than one account in the result or no results and you are returning to a single Account record. In either of those cases an exception would be thrown. Use a List instead.
If you are going to use remote action you should perform an access to ensure the user has access to the field you are returning so as not to expose data unintentionally
I would recommend that you use the platform safeguards in visualforce to enforce field encryption. Use the to reference the object from your controller, you already have the account accessible to the visualforce page it's public with get; set;
In short there are certain situation where encrypted fields are not masked, I would recommend using the platform feature that helps make this easier. See here for more details.
You can achieve the same or a similar effect using actionRegion commandButtons and partial page re-rendering.