IIS outbound wordpress site URL in css

Question

I am using IIS and it's listening on port 80 & 443. Now, we need to configure a wordpress site on Apache and to make it work on the defaults port we tried creating a proxy in IIS using URL rewrite and ARR and forward the request to a different port. Both servers are on the machine. Everything is working fine except the absolute URLs in background-image() or url() in css.

Following are the rules on IIS:

<rules> <!-- Forward request to apache. SSL offloading enabled. --> <rule name="Forward Request to Apache" stopProcessing="true"> <match url="(.*)" /> <action type="Rewrite" url="http://mysite.xyz:8080/{R:1}" /> </rule> </rules> <outboundRules> <rule name="Apache Outbound" enabled="true" preCondition="IsHtml"> <match filterByTags="A, Area, Base, Form, Frame, Head, IFrame, Img, Input, Link, Script" pattern="^(.*)mysite.xyz:8080(.*)$" /> <action type="Rewrite" value="https://mysite.xyz{R:2}" /> </rule> <preConditions> <preCondition name="IsHtml"> <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" /> </preCondition> </preConditions> </outboundRules> 

The problem is that some content were added in the page by some component( I think ) and it's on http( as the site url is set on http ) and creating mixed content error on loading over SSL:

<div class="wpex-parallax-bg" data-direction="top" data-velocity="-0.2" style="background-image: url("http://mysite.xyz:8080/wp-content/uploads/2018/02/beach-sunset-2-1.jpg"); opacity: 1; background-position: 50% -297.956px;" ></div> 

I think it's by some JS. Is there any way to fix it by adding outbound rules on IIS or anything on wordpress side?

Any suggestions greatly appreciated!

P.S:- I am not a wordpress guy so please bear with me. :)

Answer 1

In WordPress philosophy, every site has a canonical URL, and WordPress uses absolute URLs everywhere. Using relative URLs has been discussed and using absolute URLs is well-grounded. (While I haven't liked it, I've used to accept it.)

Here, the port Apache is listening is merely a technological requirement and it could also only listen connections from localhost. Your site should never be visited using http://example.com:8080/, meaning it can have canonical address of http(s)://example.com/ (or a sub-folder).

As your site has a canonical name, you could take some time to adjust your WordPress site to use it everywhere:

1. On Settings > General, adjust the WordPress Address (URL) & Site Address (URL).
2. Using plugins like Search & Replace you can replace both all the wrong and the relative URLs in your database with the canonical URL.
3. If someone has really done something differently, you may have to change this manually.

While it's possible to do this using IIS rewrites, this method makes things easier for the future: whenever you need to change the web server software stack or even the canonical URL, you have a native way of doing it within the WordPress. Consider this as a one-time work for portability.