Is it possible to achieve wordpress + nginx + https for just a single page?

I am facing a challenge with my WordPress site, which is hosted on Nginx running on Windows Server 2012 R2. I want to enable HTTPS on specific pages like /cart/, /my-account/, and /checkout/, but all the resources are still being loaded over HTTP, resulting in mixed content warnings and affecting the page's CSS and JS.

Even after trying to change the site address settings in WordPress from HTTP to HTTPS, the issue persists. Now, the entire site is attempting to load over HTTPS, which is not what I intended. Despite researching extensively on Google and various tutorials on setting up Nginx with SSL, most of them focus on securing the whole site or non-WordPress paths.

In my development environment, I have successfully used a self-signed SSL for non-WordPress pages (plain HTML files). However, testing on the production server with a purchased SSL certificate also works fine.

Therefore, my question is: Can I configure WordPress and Nginx to serve only certain pages via HTTPS while the rest remain on HTTP, including CSS, JS, and images?

I have set up two server blocks for HTTP and HTTPS, along with configurations for PHPMyAdmin and JWPlayer self-hosted JS library to play Wowza streams. The site runs smoothly on HTTP without any issues so far.

For my complete Nginx configuration, refer to this link: https://pastebin.com/2ZzmDgDR

Below is the code snippet from self-signed-ssl.conf:

# From https://cipherli.st/
# And https://raymii.org/s/tutorials/Strong_SSL_Security_On_nginx.html

ssl_certificate C:/nginx/ssl/server.crt;
ssl_certificate_key C:/nginx/ssl/server.key;


ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH";
ssl_ecdh_curve secp384r1;
ssl_session_cache shared:SSL:10m;
ssl_session_tickets off;
ssl_stapling on;
ssl_stapling_verify on;
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;
# Disable preloading HSTS for now. You can use the commented out header line that includes
# the "preload" directive if you understand the implications.
#add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;

# ssl_dhparam C:/nginx/ssl/dhparam.pem;

Answer №1

Combining HTTP with HTTPS is an unconventional strategy. This is the reason why the WordPress setup does not support it and requires you to choose between using either HTTP or HTTPS.

If you are including external content via HTTP on your secure SSL website, consider transitioning these sources to HTTPS. If this isn't feasible, relocating the resources to your own server for HTTPS delivery is recommended - especially for better page loading times.

Are there any obstacles preventing you from utilizing HTTPS for resource loading?

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

Display checkboxes on all TableRow elements as soon as one of them is checked

I've incorporated a material-ui Table into my project and have successfully implemented multi-select functionality. Here are the requirements I've fulfilled so far: Checkboxes are initially hidden - COMPLETED Hovering over a row reveals its che ...

Why does this function properly on every browser except for Opera?

I have implemented a script that allows me to replace the standard file upload input with a custom image. The script also ensures that an invisible 'browse' button appears underneath the mouse pointer whenever it hovers over the custom image. Thi ...

Can someone explain the process of unescaping characters in an API response to me?

I have created an application that leverages AngularJS to pull data from the WP Rest API V2. The response includes escaped characters, like the example below: "excerpt": { "rendered": "<p>When we go shopping, we encounter many different labeling ...

Transforming navigation bar icons to active using Django and JavaScript

I recently created a navbar using Bootstrap 4 and I'm looking for a more efficient way to toggle the active icon on the current page. Here's my current setup: <li class="nav-item"><a href="/" id="A" {% if request.p ...

How can I create a label with a full width in Bootstrap?

Currently, I am utilizing bootstrap in the following manner: <label> <input type="text"> </label> The issue at hand is that the label element comes hardcoded with display: inline-block;. Is there a way to remove this or make it look ...

jQuery function causing lag in speed

Is there a reason why this particular function is running so slowly? If no obvious issue is found, I may have to rule out jQuery as the culprit and focus on my CSS. $("#dialog-modal").dialog({ modal: true, autoOpen: false, resizable: false, ...

Failure to trigger Bootstrap modal upon button activation

I am currently working on developing a basic student list webpage using bootstrap. My goal is to create a modal that pops up when the user clicks a button, allowing them to enter the required details. However, before implementing this feature, I decided to ...

A guide to creating a personalized horizontal dashed separator in Material UI

I'm looking to customize a divider template by turning it into a horizontal dashed divider, but I'm struggling to override it. Even when attempting an sx edit with a borderRadius, the divider doesn't change as expected. source code: import ...

Exploring the Design of Autocompletion Lists on Chrome

Today, I need to bring a problem to your attention. For the past few weeks, there has been a design issue on my website in Chrome. My autocompletion list has become a total nightmare... Previously : Current situation : I want the list to be more promine ...

Mobile Styling Needs Improvement: iOS 6 "Choose File" Button Size Concern

I am currently in the process of styling a couple of basic form pages that were originally created in ASP.NET for mobile devices. In order to enhance the display for mobile users, I am utilizing CSS3 media detection to identify when the device is mobile an ...

Switching Logo Image when Menu Button is Clicked

I'm looking to adjust the color of my logo when the menu button is clicked to match the overlay style. Currently, I managed to switch from a black logo to a white logo. However, when attempting to close the menu, it doesn't revert back to the bl ...

CSS code that fixes a textarea at the bottom of a div

I need help placing a textarea at the bottom of a fixed div: <div id=msg> <div id=content> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> aaaaaaaannnnnnnnnn<br> </div> <div id=text> <textar ...

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

Add a decorative frame around the heading and text block

I'm looking to encase both the header and paragraph in a single border. Right now, they each have their own separate borders. How can I combine them into one? <style type="text/css> h1, p { font-family: consolas; border: 2px solid #73AD21; bor ...

How can you trigger a modal to appear when an image is clicked?

There are images inside <div> tags. When one of the images is clicked, a modal appears to display information about the specific image. Each modal has a unique id or class, such as modal4. My example: <image type="image" src="Images/Drake.jpg" ...

Struggling to vertically center a div using the Sticky footer method?

I'm working on implementing the Sticky Footer technique on my website, but I'm running into an issue with aligning my content both horizontally and vertically within the #main section. The problem arises from the fact that the bottom padding is s ...

Unable to reveal hidden text with invisible formatting (font-size: 0)

I have a Joomla 3 website where I created a blog using a design-controll template. I made a "new-article" page but realized that some buttons were missing text. Upon inspecting with Firebug, I found that there was a font-size:0 property causing this issue. ...

Center-aligned Bootstrap column with a width of 50% and centered vertically

I am looking to have images and videos displayed side by side on my webpage. The code below functions properly, however there is an issue with the alignment. While the horizontal center alignment is correct, the video and images are not centered vertically ...

The challenges with implementing makeStyles in React Material UI

const useStyles = makeStyles((theme) => ({ toolbarMargin: { ...theme.mixins.toolbar, marginBottom: "3em", }, logo: { height: "7em", }, tabContainer: { marginLeft: "auto", }, tab: { ...theme ...

Rather than overwriting it, append a new value to the localstorage

I am trying to insert the value of newUsername into the localStorage setUsernamesArray. However, my current code overwrites the existing value instead of adding to it. Code $('#signUpButton').click(function() { var newUsername = $('#userna ...