How to fix URL Rewriting for links inside CSS file

Question

I'm trying to set up a proxy server for my friends back at home. I'm currently following the tutorial on the web site (http://blogs.iis.net/carlosag/archive/2010/04/01/setting-up-a-reverse-proxy-using-iis-url-rewrite-and-arr.aspx) but I've come across a strange problem.

I've tried making /pandora redirect to www.pandora.com but the links inside the CSS files are not changing. Furthermore they are still linked to the localhost/img/.. path. They should be redirected to the localhost/pandora/img/.. path.

sniplet from the first webpage

<link rel="shortcut icon" href="/pandora/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/ico" href="/pandora/favicon.ico" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css/compiled.css?v=95845013">
<link id="valanceStyle" rel="stylesheet" type="text/css" href="/pandora/static/valances/pandora/default/design.css"/>

Can you guys help me fix this problem?

Answer 1

It is possible to do this with a outbound rewrite rule in combination with ARR. The following rule should do it:

<system.webServer>
    <rewrite>
        <outboundRules>
            <rule name="Rewrite image URLs in CSS response" preCondition="IsCSS">
                <match pattern="localhost/img/" />
                <action type="Rewrite" value="localhost/pandora/img/" />
            </rule>
            <preConditions>
                <preCondition name="IsCSS">
                    <add input="{RESPONSE_CONTENT_TYPE}" pattern="text/css" />
                </preCondition>
            </preConditions>
        </outboundRules>
    </rewrite>
</system.webServer>

You should of course replace localhost with the proper domain names. If you are rewriting from a different domain name then the match tag should contain the domain name you want to replace and the action tag should contain the domain name you want it to replace.

As CSS is not HTML you can not use tag filtering feature of the URL rewrite module. So it can only do regular expression matching against the whole content of the CSS file which can potentially be CPU intensive on large CSS files. If you know how many URL's need to be replaced you can add the occurrences="x" attribute to the <match> tag to limit the number of matches the URL rewrite module has to look for. Also try moving the CSS rules to the top of the CSS file. E.g.:

<action type="Rewrite" value="localhost/pandora/img/" occurrences="3" />

You can also enable user mode caching in IIS and add the attribute rewriteBeforeCache="yes" to the <outboundRules> tag to let IIS cache the rewritten content. E.g.:

<outboundRules rewriteBeforeCache="yes">

More useful info and tips about outbound rewrite rules can be found in this blog post.