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

StackOverflow https://stackoverflow.com/questions/12915187

  •  07-07-2021
  •  | 
  •  

Question

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.
Was it helpful?

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.

OTHER TIPS

you cannot manipulate the contents of an iframe. cross site scripting is not the problem here.

To make the injection easiest you can the the Gatejs SPDY/HTTP proxy and use the injection gatejs opcode - it works both on forward and reverse proxy.

Gatejs injection will try to add you html code into a content of type HTML (text/html).

Below a forward proxy example using injection.

var serverConfig = function(bs) { return({
    hostname: "testServer0",
    runDir: "/tmp/gatejs",
    dataDir: "/path/to/dataDir",
    logDir: "/var/log/gatejs",

    http: {
        testInterface: {
            type: 'forward',
            port: 8080,
            pipeline: 'pipetest'
        },
    },
    pipeline: {
        pipetest: [
            ['injection', {
                 code: "<h1>w00t injection</h1>"
            }],
            ['proxyPass', { mode: 'host', timeout: 10 }]
        ],
    }
})};

mk-

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top