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

  • 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/'.

    Saturday, May 1, 2021 9:01 PM

Answers

  • 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. 

    • Marked as answer by Anonymous Tuesday, September 28, 2021 12:00 AM
    Saturday, May 22, 2021 9:20 PM

All replies

  • 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

    Monday, May 3, 2021 2:35 AM
  • 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.

    Monday, May 3, 2021 2:54 AM
  • 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

    Tuesday, May 4, 2021 9:12 AM
  • 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.

    Wednesday, May 5, 2021 4:46 AM
  • 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

    Wednesday, May 5, 2021 9:07 AM
  • 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.

    Friday, May 7, 2021 2:45 PM
  • 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

    Monday, May 10, 2021 7:51 AM
  • User720127584 posted

    Hi Sam,

    But of course.

    Tuesday, May 11, 2021 6:37 AM
  • User1065476709 posted

    Hi jackmaus,

    If you have any questions please let me know.

    Best regards,

    Sam

    Tuesday, May 11, 2021 9:07 AM
  • 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.

    Saturday, May 22, 2021 9:04 PM
  • 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. 

    • Marked as answer by Anonymous Tuesday, September 28, 2021 12:00 AM
    Saturday, May 22, 2021 9:20 PM