Infinite requests on background-image:expression() with IE

I am adding a web application to a client’s existing site, so I adopted some of the code of the firm that wrote it. Since I am not allowed to refactor the entire site, my Yii instance simply runs on a subdomain and uses the same theme elements of the original site (images, CSS, etc). I cannot share much of the code since it is proprietary and I am under contract, but I can tell you as much as I can to reproduce the problem. Forgive me for any unanswered questions, as I am still learning the nature of the problem myself.

The site works fine in everything but IE. Not only do I encounter odd styling errors, the browser freezes after a few seconds while echoing "> where some images would be. To show you what I mean, I will link to two screenshots. The logo of the site has been blacked out in the normal shot (rendered in Chrome). Compare this to the other screenie, which has the bugged output underlined in red above a largely unstyled form. The cross you see is only but one image that is not related to the bug, although other images were superimposed on it.

I inspected the source of the bugged images and found that they had styles using expression() in their rules. All they do is take the innerHTML of the link the images are meant to go under and replace them with the markup of the image itself. Go figure.




/* MSIE PC */ #logo a {

background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML = '<img src="images/justia-kleinmediation-com.gif" border="0" alt="' + this.innerHTML + '">');

}


#tagline a {

background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML = '<img src="images/h2.gif" border="0" alt="' + this.innerHTML + '">');

}



Things get interesting when I notice that an entry in the runtime log shows the REQUEST_URI with the image name for expression()'d images as an action for the current controller.

The logs quickly hit their max size and rotate until IE freezes and/or crashes, which suggests that the requests are made infinitely. This may be related to the echoed &quot;&gt;. To test this, I made the following change.




/* MSIE PC */ #logo a {

background-image: expression(this.runtimeStyle.backgroundImage = "none", alert(this.innerHTML));

}



The alert boxes never stopped. I also found out from the content of the boxes that this was their way of doing black hat keyword injections. Fun!

[size="2"]Other Details[/size]

I do not know why this is relevant, but this issue ONLY occurs on IE, and ONLY when the page contains a CActiveForm (in my case). The expression()'d images do not wig out on pages with simple views with static content.

I will be talking to my client about removing the expression() rule, since I have never once seen that used and I doubt we even need it. I will inform you of any new information I come across.

What IE version are you using… from what I read the CSS expressions did work only in IE 6 and 7 and where dropped from IE 8

9, and I’m aware of this (I don’t even want expression() there, or anywhere). But what about the infinite requests?

I’m not sure about what you mean with “what about them”… if they are not supported in IE9… maybe it’s the reason why IE9 makes something strange with them… so first thing to do would be to remove it.

I already know it’s the reason. That’s been established. I’m just curious as to if this is just undefined behavior, or if is there some attempt on either Yii’s or IE’s part to handle it. If we are just going to accept deprecation as an answer without further analysis, wouldn’t we miss a good opportunity to learn something?

Okay, one more detail: If I visit the original site in question before Yii was ever used, this bug never occurs, even when expression() is used in IE9. Yii is involved.

Remember the use case: I have to add on to a site that uses CSS rules I might be asked to apply without modification.

The error tends to occur only on pages with CActiveForm on it. Is there anything I can do to add on to this information?

Without looking at the actual code it’s difficult to say what could be the problem here… and how would CActiveForm and the CSS expression() be connected.

As for the IE9 and expression() functionality… this is not supported so it’s just skipped (at least it should be)… so having a rule like “background:expression(…)” would be the same as having a rule like “background:redish”… as the browser does not understands that it should be skipped.

There should be other rules regarding the logo because if not it would not be displayed at all in other browsers, can you post them all (not the whole CSS, just those regarding the logo) ?

The only thing that seems responsible for displaying the image is this.


#logo a:before, #logo a:after {

content: url(../images/justia-kleinmediation-com.gif);

}

Visiting the dev tools shows IE9 standards are used, as implied by your suspicions, the expression rule did not even appear in the stylesheet in the console. What’s confusing me is that expression() is in the file server side. If it can be ignored there, why not on localhost?

On top of all that, it still does not say much about the infinite requests.

Your guess is as good as mine. All I can tell you is that the issue I started the thread over does not occur on my SiteController, which only renders static views.

The only thing I can infer is that AJAX is involved, not necessarily CActiveForm. Requests are being made, and the images styles with expression() get "> echoed into them even though no code explicitly targets them.

Let me ask my client if I can release some more code here so we can explore this further.

EDIT: Actually, let me just try and replicate the problem in a new instance. Give me some time to cook up some new code.

Hello,

Let me jump in.

From your 404 error description:

and in your CSS:


content: url(../images/justia-kleinmediation-com.gif);

It looks like a simple url problem: you are supposed to reach "images" folder, but the css file requests an incorrect relative path that ends to the "user" controller. Or, an .htaccess rule maybe redirects to the user controller path.

Edit : Wait, maybe it’s a third possibility: the "> that are echoed look like the trailing characters of an HTML tag. It may not be what I’ve suggested above, but just a PHP/HTML closing tags mismatch.

The path of the content rule works. The URL is fine there.

You are thinking on the right track, though. The OP describes that the path of the REQUEST_URI is interpreted as a route when the expression() rule is only meant to make an <img> tag.

The markup is fine. Check out the OP. I suspect it’s the last "> at the end of the expression rule, since removing the expression rule solves everything. I’m just trying to figure out why “expression()” makes Yii make infinite requests, while echoing "> each time.