Search code examples
javascriptirccross-site

"Inject" JavaScript in existing application to manipulate the UI (qwebirc)


I need to inject some JavaScript into an existing application.

The application is normally embedded with an iframe like this:

<html>
<body>
    <iframe src="http://webchat.quakenet.org/" width="647" height="400"></iframe>
</body>
</html>

It is an opensource JavaScript based IRC Client http://webchat.quakenet.org/ (source).

Now I like to inject some JS to Highlight special messages for example. For this I already found the HilighterClass to override.

The problem is, how could I do that? I guess injecting JS into an iFrame is not "allowed" by modern browsers, or?

If the iFrame is a problem, maybe I can add the client like they do:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <base />
  <title>QuakeNet Web IRC (qwebirc)</title>
 ...
  <script type="text/javascript">
    var ui = new qwebirc.ui.Interface("ircui", qwebirc.ui.QUI, {"appTitle":"QuakeNet Web     IRC","dynamicBaseURL":"/dynamic/leibniz/","baseURL":"http://webchat.quakenet.org/","validateNickname":false,"networkServices":["Q!TheQBot@CServe.quakenet.org"],"nickValidation":    {"maxLen":15,"validSubChars":"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_[]{}`^\\|0123456789-","validFirstChar":"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_[]{}`^\\|","minLen":2},"staticBaseURL":"/static/leibniz/","loginRegex":"^You are now logged in as [^ ]+\\.$","networkName":"QuakeNet"});
  </script>
</head>
<body>
  <div id="ircui">
    <noscript>
      <div id="noscript">Javascript is required to use IRC.</div>
    </noscript>
  </div>
</body>
</html>

Requirements:

  • The client should connect into the quakenet.org Servers. That could be a problem because of some Cross-Site-Scripting restrictions.
  • The best would be if no other plugin's for my users are required.

Solution

  • You could a Proxy server like Privoxy which can inject JavaScript into pages. Unfortunately your users would have to do all their browsing through Privoxy, so that might not be an option.

    Or you set up your own reverse proxy (e.g. Squid) and change the contents before relaying. You'd replace the requests to the JavaScript library with a call to your own library which contains the original JavaScript plus your highlighting code.

    Ans surely you heard of Greasemonkey, which is a browser plugin which can do exactly that - inject content.