Preventing XSS attack when using Javascript's CreateElement

Question

My company has partners that embed a few of our web pages into their site by way of a dynamically generated iframe. The source URL for the iframe comes from the query string on the partner's site so I want to make sure there is no risk of a cross site scripting attack since we are using untrusted input as the iframe's source.

The source URL is always a relative URL (our host name is hard coded in the Javascript and prepended to the relative URL) and we do some validation on the input URL to make sure it starts with "index.php" since all requests are routed through that page on our site. For example, if the following URL were accessed on the client site:

www.ourpartner.com/home.html?url=index.php%3Fid%3D999

The source URL for the iframe would be http://www.oursite.com/index.php?id=999. The iframe is generated in Javascript using createElement, as follows:

...
// We assign the url value from the query string to the variable urlparam

if(! urlparam.match(/^index\.php/i) ) {
    // Error.  Quit.
}
var myiframe = document.createElement('iframe');
myiframe.src = 'http://www.oursite.com/' + urlparam;
document.getElementById('iframe_container').appendChild(myiframe);

Is there any chace an attacker could inject a malicious URL into the source of the iframe? Browsers appear to escape any HTML entities that may appear in the URL, such as double quotes and left/right angle brackets. Should we be taking any further precautions with the URL?

Thanks!

Answer 1

No, this is fine.

When you are dealing with DOM properties like .src, there is no markup involved. You're writing a string directly to a string property. You would only have to worry about HTML-escaping if you're encapsulating values inside markup, for example when writing to innerHTML or document.write().