Home > Uncategorized > Intercepting #Ajax requests in #CEFSharp (Chrome for C#)

Intercepting #Ajax requests in #CEFSharp (Chrome for C#)

diagram7

The webbrowser control for .NET is a version of IE. That version of IE can be configured via the registry, but it’s still IE, and Chrome is the daddy of browsers. So, if you want to embed a Chrome browser in a C# application, then using CEFSharp is the way to go.

Firstly, you need to install the NUGET package as follows;

Install-Package CefSharp.WinForms

You then will have to change your project to either x86 or x64, since this won’t work as AnyCPU.

Define a reference to ChromiumWebBrowser in your app as follows;

private static ChromiumWebBrowser browser;

Then initialise it using the code;

CefSharpSettings.LegacyJavascriptBindingEnabled = true;
var settings = new CefSettings();
Cef.Initialize(settings);
var strInitialUrl = “http://www.yourwebsite.com”;
browser = new ChromiumWebBrowser(strInitialUrl)
{
RenderProcessMessageHandler = new RenderHandler()
};
InteractionHandler.browser = browser;
var jsInterface = new jsMapInterface
{
onHookEvent = InteractionHandler.HookEventHandler
};
browser.RegisterJsObject(“jsInterface”, jsInterface);
Controls.Add(browser);
browser.Dock = DockStyle.Fill;

Now, I have introduced a few new classes here, that haven’t been defined yet, but we’ll get to them

  • RenderHandler
  • jsMapInterface
  • InteractionHandler

So, let’s start with RenderHandler. This will be used to inject Javascript into the page once it is loaded. The Javascript will call out to jsMapInterface to record the Ajax event.

class RenderHandler : IRenderProcessMessageHandler
{
public void OnContextReleased(IWebBrowser browserControl, IBrowser browser, IFrame frame)
{
}

public void OnFocusedNodeChanged(IWebBrowser browserControl, IBrowser browser, IFrame frame, IDomNode node)
{
}

public void OnUncaughtException(IWebBrowser browserControl, IBrowser browser, IFrame frame, JavascriptException exception)
{
}

void IRenderProcessMessageHandler.OnContextCreated(IWebBrowser browserControl, IBrowser browser, IFrame frame)
{
var strScript = File.ReadAllText(@”inject.js”);
frame.ExecuteJavaScriptAsync(strScript);
}
}

This class does nothing apart for waiting for OnContextCreated to fire, and read the content of Inject.js and put it into the page.

Inject.js contains the following

document.addEventListener(‘DOMContentLoaded’,
function () {
(function(open) {
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
this.addEventListener(“readystatechange”,
function() {
if (this.readyState === 4) {
window.jsInterface.hook(this.responseText, method, url, async, user, pass, “Context”);
}
},
false);
open.call(this, method, url, async, user, pass);
};
})(XMLHttpRequest.prototype.open);
});

This file should be set to “Copy Always”. Note the window.jsInterface.hook – this is the call back to the C# Code.

Next we define jsInterface

public class jsMapInterface
{
public Action<hookEvent> onHookEvent = null;

public void hook(string message, string method, string url, bool async, string user, string pass, string context) // Must be lowercase!
{
if (onHookEvent != null)
{
onHookEvent(new hookEvent()
{
message = message,
url = url,
async = async,
user = user,
pass = pass,
context = context
});
}
}

public class hookEvent
{
public string message {get; set;}
public string url {get; set;}
public bool async {get; set;}
public string user {get; set;}
public string pass {get; set;}
public string context { get; set; }
}
}

A very important point to note here that the method MUST be lowercase!

And Finally, we define InteractionHandler as follows;

class InteractionHandler
{
public static ChromiumWebBrowser browser;

 

 

public static void HookEventHandler(jsMapInterface.hookEvent hookEventArgs)
{

// And your AJAX response will be caught here!

}
}

You can set a breakpoint on the comment above, to log, or otherwise handle your ajax response that you capture.

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: