Struggling with IIS URL rewrite affecting CSS url() values

Last week, I posted a question about running two different app/web servers on a VPS, but using only one main incoming URL/port (using site.com instead of site.com:8080).

I received an answer that helped me make the solution work by utilizing URL Rewriting and creating inbound and outbound rules for the rewrite.

Everything works perfectly except when I have a CSS property with a relative URL value. For example:


.rule{
    background-image: url(/images/picture.jpg);
}

Here are my current inbound and outbound rules:

<rewrite>
        <rules>
            <rule name="ReverseProxyInboundRule1" stopProcessing="true">
                <match url="java/(.*)" />
                <action type="Rewrite" url="http://s17857763.onlinehome-server.com:8080/{R:1}" />
            </rule>
        </rules>
        <outboundRules>
            <rule name="RewriteRelative" preCondition="IsHtml" enabled="false" stopProcessing="true">
                <match filterByTags="A, Area, Base, Form, Frame, Head, IFrame, Img, Input, Link, Script" pattern="/(.*)" />
                <action type="Rewrite" value="/java/{R:1}" />
            </rule>
            <rule name="RewriteAbsolute" preCondition="IsHtml" enabled="false">
                <match filterByTags="A, Area, Base, Form, Head, IFrame, Img, Input, Link, Script" pattern="http(s)?://s17857763\.com/(.*)" />
                <action type="Rewrite" value="/java/{R:2}" />
            </rule>
            <preConditions>
                <preCondition name="IsHtml">
                    <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
                    <add input="{URL}" pattern=".*/java/.*" />
                </preCondition>
            </preConditions>
        </outboundRules>
    </rewrite>

If you want to see the issue firsthand, open your dev console and visit

The outbound rules load normal CSS and JS links fine because they come from HTML tags, but I'm unsure if it's possible to fix the CSS URL() path.

Answer №1

It seems like you may have inadvertently overlooked the need for quotation marks.

Here is a suggestion to rectify this:

.newRule{
    background-image: url("/images/image.jpg");
}

Answer №2

The issue you're facing is likely related to the preCondition rules in your code. By limiting it to only recognize HTML, you may be missing out on the necessary styles from CSS. Consider adding preconditions for "^text/css" and "^application/javascript", or simply removing the precondition altogether for more flexibility. I personally recommend going with the first option as it provides finer control over the styling. I'm currently working on a similar project myself, which led me to this page. If I manage to solve the problem, I'll share my solution here.

Answer №3

After successfully completing the CSS rewriting process, I made some necessary additions in the preconditions section:

<preCondition name="IsCSS">
    <add input="{RESPONSE_CONTENT_TYPE}" pattern="^/text/css" />
</preCondition>

Subsequently, in the outBoundRules segment, I included the following code snippet:

<rule name="RewriteCSSRelativePaths" preCondition="IsCSS">
    <match filterByTags="None" pattern="url\(&apos;" />
    <action type="Rewrite"  value="url(&apos;/<path>/" />
</rule>

The specified pattern specifically targets url('. To customize and broaden the control scope, adjust the pattern accordingly. Also, note the use of parentheses within the pattern – I had to carefully escape them as they usually indicate capturing groups in regex. In this scenario, my goal was simply to redirect the path through our software proxy.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...

Creating a seamless transition effect while toggling classes in CSS and JS

I am looking to create a slideshow that features images with text overlay, and I want to implement next and previous buttons for image navigation. However, I am having trouble getting the opacity transition to work when switching between images by toggling ...

Experiencing a problem with sequelize that is preventing me from utilizing the findAll method

As I dive into the world of Sequelize, I've hit a roadblock. In my attempt to connect my controller, route, model, and other components, I encountered an error when trying to access my route (localhost:3000/api/carousel): TypeError: Cannot read proper ...

What steps can I take to create a versatile JavaScript function that can be used across my entire form? (Don't Repeat Yourself -

Apologies in advance for my beginner question, but I'm facing an issue with a function that is specific to one field in a large form. While hard coding every possible field is an option, I prefer keeping my code DRY. Any suggestions on how I can imple ...

Retrieve the appended element's object

I am currently facing an issue with accessing elements that are automatically added by a library in my code. In my HTML, I have the following line: <div class="bonds" id="original" style="display:block;"></div> The library appends some elemen ...

JavaScript is repeatedly invoking window.location in IE-8

I have implemented a mechanism to track the last visited page using cookies in my JavaScript code, triggered by onload. However, I am facing an issue where the script keeps refreshing repeatedly, almost as if it's triggered by mouse movement even thou ...

css: varying container heights for columns in Chrome and Safari using Bootstrap 4

In my code snippet below (this is just a prototype, in the actual application everything is different but follows a similar structure): <body> <div class="row"> <div class="col-3 d-none d-sm-block"> <div class="h-1 ...

Inability to input text into a textbox with AngularJS

I am currently working on developing an AngularJS app. I have encountered a problem where I am unable to input text into a textbox. The issue lies with my zoomService which handles zoom increments and decrements. While the user can zoom using a slider and ...

How can I transform Json data into a jQuery datatable using ajax call?

I have successfully stored the JSON data in a variable named "msg" using AJAX. Currently, I can only display the data by alerting(msg) on the page. However, I am looking for a way to visualize this data with columns in AJAX or JavaScript using something li ...

Handling various JSON responses in Java without relying on Plain Old Java Objects (POJO) classes

I am working with JSON responses from a REST API in Java, but I am looking for a solution that doesn't require creating a Java class (POJO) for each response due to the varying data structures and fields. Is there a more versatile JSON parser in Java ...

Personalized designing of each letter

Is there a way to style numbers without using something like <span></span>? I'm looking for a clean way to do this for each sign. Attached is an example showing a "flip clock" effect that I would like to achieve. I have come across plugi ...

Looking to eliminate the pesky mystery padding that's wedged between the background and border

Can anyone assist with getting rid of the mysterious padding that appears between a border and its background? The design looks perfect in the preview, but when exported, there is unwanted padding inside the frame. Here's the snippet of code: < ...

Retrieving all raw data in jqGrid: Issues with accessing nested objects

In my grid, the data is structured as follows: Within the rows (0,1,2 and 3 objects), there are additional objects. Of particular note is an object called 'datosPersonales' ('personalData') which contains sub-objects like nombre (name) ...

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

What is the best way to align text on the right side of a mui AppBar/Toolbar component?

How can I modify the menu bar to include a log out button on the right side? Here is the current code: <main> <AppBar> <Toolbar> <Typography style={{ marginRight: 16 }} variant="h6" className=" ...

Is there a way to assign multiple paths to a single page within the NextJS pages directory?

I'm currently working on a project that has two different themes, and I have the ability to switch between them based on the environment. Everything works perfectly, but I'm encountering an issue with paths. Some pages should open with different ...

Arrange the div next to each other

Looking to position two divs side by side with widths totaling 100%? The left div will have a specified width in pixels that can change, while the right div should expand to fill the remaining space. Having trouble with this layout? Check out my example o ...

How can you resolve redefinition warnings detected by the CSS Validator?

After running my site through the W3C CSS Validator, I was surprised to see that it returned a total of 3146 warnings. The majority of these warnings are redefinition alerts, such as: .fa.fa-check Redefinition of color .fa.fa-check Redefinition of ...

The function Joi.validate is not defined at this time

I am currently working on creating a validation function for user input async function validateUserInput(user) { const schema = Joi.object({ password: Joi.string().pattern((new RegExp('^[a-zA-Z0-9]{3,30}$'))), repeat_password: Joi.a ...

What is the reason for the visibility of my API key when utilizing next.js alongside environment variables?

I recently went through the next.js documentation and implemented a custom API key on my now server. However, I encountered an issue where when I execute now dev and navigate to the sources tab, my API key is visible. https://i.stack.imgur.com/kZvo9.jpg ...