How do I rewrite a background: url('/<path-to-png-file>') in a <div>'s style attribute?

Question

User720127584 posted

I have a domain, mydomain.com, and I successfully reverse proxy it with a self-hosted localhost website like so:

    Inbound:
    mydomain.com/app/page --> localhost:217/app/page

    Outbound:
    localhost:217/<relative resource> --> mydomain.com/app/<resource>

The app was recently updated to include a background image that won't load. The image is defined in the style tag of a <div> like so:

    style="background: url('/images/somekindof-purple.png') no-repeat fixed;"

And my Outbound rule fails to rewrite the '/images/somekindof-purple.png' as 'mydomain/app/images/somekindof-purple.png'; thus, causing the image load failure.

I tried this stackoverflow approach: 

    https://stackoverflow.com/questions/25576268/iis-url-rewrite-trouble-with-css-url-values

but it seems to have no effect, possibly because it targets a .css file's content directly as opposed to the inline style of a <div>. 

So, my question is, how do I fix this? These are my inbound/outbound rules for reference:

    <rewrite>
        <rules>
            <rule name="AppRProxyInbound" stopProcessing="false">
                <match url="^app\/(.*)|app$" />
                <action type="Rewrite" url="http://localhost:217/{R:0}" />
            </rule>
        </rules>
        <outboundRules>
            <rule name="AppRProxyOutbound" preCondition="IsHtmlResponse">
                <match filterByTags="A, Form, Img, Link, Script" pattern="(.*)" />
                <action type="Rewrite" value="http://mydomain.com/app{R:1}" />
                <conditions>
                    <add input="{URL}" pattern="^\/app\/" />
                </conditions>                    
            </rule>
            <preConditions>
                <preCondition name="IsHtmlResponse">
                    <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
                </preCondition>
            </preConditions>                
        </outboundRules>
    </rewrite>

In case you're wondering, the base href of the self-hosted localhost website is '/app/'.

Answer 1

User1065476709 posted

Hi JackieMaus,

And my Outbound rule fails to rewrite the '/images/somekindof-purple.png' as 'mydomain/app/images/somekindof-purple.png'; thus, causing the image load failure.

Did you get any error message? if so, can you show me it?

The app was recently updated to include a background image that won't load. The image is defined in the style tag of a <div> like so:

    style="background: url('/images/somekindof-purple.png') no-repeat fixed;"

I couldn’t understand your requirement clearly, please post more details information about your requirement.

Best regards,

Sam

Answer 2

User720127584 posted

Hi Sam,

The error message is:

     Failed to load resource: the server responded with a status of 404 (Not Found) - somekindof-purple.png

Let me simplify the scenario. The app has a:

   <div style="background: url('/images/somekindof-purple.png') no-repeat fixed;">

   </div>

I want to rewrite the url as: http://mydomain.com/app/images/somekindof-purple.png. I am not sure how to do this.

Answer 3

User1065476709 posted

Hi JackieMaus,

   <div style="background: url('/images/somekindof-purple.png') no-repeat fixed;">

  <outboundRules>
            <rule name="AppRProxyOutbound" preCondition="IsHtmlResponse">
                <match filterByTags="A, Form, Img, Link, Script" pattern="(.*)" />
                <action type="Rewrite" value="http://mydomain.com/app{R:1}" />
                <conditions>
                    <add input="{URL}" pattern="^\/app\/" />
                </conditions>                    
            </rule>
            <preConditions>
                <preCondition name="IsHtmlResponse">
                    <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
                </preCondition>
            </preConditions>                
        </outboundRules>

There is a problem with your outboundRules, you can use failed request tracking to view detailed error information.

https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-failed-request-tracing-to-trace-rewrite-rules

You can also refer to this link about how to create outbound rules.

https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/creating-outbound-rules-for-url-rewrite-module

Best regards,

Sam

Answer 4

User720127584 posted

Hi Sam,

Yep, the problem is certainly in the outbound rules (and thanks for the link on failed request tracking). For this particular <Div>'s style, I am honestly not even sure where to start with creating an outbound rule for it. As far as I can tell, it doesn't appear to conform to any particular tag filter. I'm really at a loss on how to approach this one.

Answer 5

User1065476709 posted

Hi JackieMaus,

Yep, the problem is certainly in the outbound rules (and thanks for the link on failed request tracking). For this particular <Div>'s style, I am honestly not even sure where to start with creating an outbound rule for it. As far as I can tell, it doesn't appear to conform to any particular tag filter. I'm really at a loss on how to approach this one.

You can use custom tag in outbound rule.

 <customTags>
       <tags name="test">         
            <tag name="div" attribute="style" />
       </tags>
</customTags>

Best regards,

Sam

Answer 6

User720127584 posted

Hi Sam,

That may be the key piece of information that I am missing. I am going to take another stab at this tomorrow and see if I can make headway with that tidbit that you have provided.

Answer 7

User1065476709 posted

Hi JackieMaus,

That may be the key piece of information that I am missing. I am going to take another stab at this tomorrow and see if I can make headway with that tidbit that you have provided.

If you solve the problem, please share your answer here.

Best regards,

Sam

Answer 8

User720127584 posted

Hi Sam,

But of course.

Answer 9

User1065476709 posted

Hi jackmaus,

If you have any questions please let me know.

Best regards,

Sam

Answer 10

User720127584 posted

Hi Sam,

I was able to resolve the problem. The custom tag solution unfortunately didn't work at all. It's almost as if outbound rules flat out ignore div styles.

Answer 11

User720127584 posted

Ok, so the problem was resolved by modifying the source application. Specifically, the inline div style 'background: url('/<path-to-png-file>')' was moved into a CSS file and the URL path was modified to be relative to the CSS folder:

.somename {
    background: url('../<path-to-png-file>');
}

That completely removed the need for rewriting this particular URL. In case you're wondering why I didn't shoot for using a rewrite rule to modify the CSS itself, I had actually tried that and successfully rewrote the in-CSS URL. The rewritten URL was absolute and that was rejected by almost every browser. Something about breaking a MIME rule when using full URL paths from a CSS file.

Sam's suggestion of using custom tags doesn't work for an inline div style of 'background: url('/<path-to-png-file>')'. I am chalking that up to a bug / limitation in the IIS outbound rules. 

Interestingly enough, if I made a generic outbound rule targeted at a 'None' tag that found entire <div> elements, then I was able to successfully rewrite the inline div style. But then I ran into a secondary problem. The application in question is a Blazor Server app and goes through two UI refreshes. On the first one I could see the background image for a fraction of a second. For the second one, the background image could not be found. Looking at the runtime markup, the URL is clearly re-written. I don't know if the behavior is a problem in Blazor Server or IIS's outbound rules.