Will protocol-relative URLs for HREFs perform as well as a relative path? - relative-path

Let's say I simply want to link to another page within my site. I can use the following options:
<!-- relative path -->
Order Pizza
<!-- absolute path -->
Order Pizza
<!-- protocol-relative path -->
Order Pizza
Is there a difference in response time when comparing protocol-relative to relative?
Are there any drawbacks when using protocol-relative paths with HREFs?

Relative, absolute, or protocol relative URLs are browser features.
The browser combines the new URL with the page URL to build a complete URL to send a request to.
It has no effect on the network.

Related

nuxt/vue route url to hashed-url

didn't manage to find much on this, but I am using anchors on my website, hence I will get a URL as such
localhost:3000/#about.
I am wondering if it's possible to route a URL as such localhost:3000/about to the hashed URL localhost:3000/#about without having a physical about-page.
Essentially, when I directly access the absolute link, I am routed to the hashed/anchored page.

Intrasite links breaking with S3 redirect

I've got a static website setup with S3 and CloudFront. When I navigate to a subfolder like example.com/nonexistant/, my example.com/index.html page loads (as I want it to), however it's text only and all of my intrasite links get messed up.
For example, my logo is located at example.com/img/logo.png. When I navigate to example.com/nonexistant/, the html for example.com/index.html loads, however it now looks for my logo at example.com/nonexistant/img/logo.png.
So links like <img src="img/logo.png"> are breaking because it is starting the search for the file from the wrong directory.
Is there a solution where I can fix something in my Redirection rules to have all pages ending in / redirect to example.com? I know I could probably just go edit my code to have all paths just appear as <img src="https://www.example.com/img/logo.png">, but I'm wondering if there is an easier fix here.
EDIT: I've already set up in CloudFront to have 404s go to /index.html with status code 200, and have in S3 set up my error document as index.html
Change your links to absolute paths, without the hostname.
<img src="/img/logo.png">
S3 redirect rules can only match the key prefix -- the left-anchored part of the string, so they can't be used to address this.
You could also use a Lambda#Edge function in an origin response trigger, if you really wanted to redirect 404 responses for paths ending in / back to the main page, but a redirect rewrites the path in the address bar (by definition -- otherwise, it is not a "redirect"), and I assume since you are doing the 404-to-200 transformation then you are probably doing something like an SPA where you need the path to remain the same, despite index.html being displayed.

Firefox: "Some parts of this page are not secure, such as images." What counts as insecure?

I use the browser Firefox, and sometimes, on certain webpages, the SSL icon says "Some parts of this page are not secure, such as images." What, exactly, counts as an insecure element?
Thanks!
Anything that is delivered over an insecure channel.
What this generally means is that the developer of the web page is combining HTTP-based URLs with HTTPS-based URLs in the same page. The URLs could be for images as well as JavaScript, CSS, or anything else that can be referenced from a web page. As a user, there's not much you can do about this -- it's a warning that there is a possibility that your data could be delivered to other servers in an open, unencrypted manner over the Internet. This is a Bad Thing, but you can't do much except avoid that site, or contact the support or webmaster for the site.
If you're the developer, most of the time you can use a scheme-relative URLs when referencing images or javascript, etc.
i.e. Instead of this:
<img src="http://example.com/dot.png">
use this:
<img src="//example.com/dot.png">
YMMV.
See also: https://url.spec.whatwg.org/
In firefox you can see in Inspect Element=>Network Tab=>Domain Columns.
And also please check in Console tab too.
I hope it will solve your problem.
"Insecure" simply means "not loaded via HTTPS".
This is insecure:
<img class="media-object" src="http://placehold.it/50x50">
This is secure:
<img class="media-object" src="https://placehold.it/50x50">
"Some parts of this page are not secure, such as images."
means not all content are are loading with secure https you can use this online tool to determine which resource is loading with http whynopadlock
This is My Solution
To resolve this issue make sure that the page code does not pull data directly from a non-secure URL.
View the page source html code to check for non-secure items. This can be done in a web browser by doing a right click and selecting 'view source'.
To identify non-secure elements view the source code of the page and search for the text src="http://
This will then highlight elements on your page being loaded from a non-secure URL.
The source code (HTML) needs to be checked for NON SECURE tags. (i.e. http://www.symantec.com/images/seals/Secure...) Ensure the following references are changed to HTTPS or a virtual directory.
Note: The webmaster should always be consulted prior to any adjustments made to a web site.
Thank You and I hope this will Help out
For wordpress users that can't find any 'http:' in the page source check if you have a favicon set. Wordpress will default to their W icon (w-logo-blue.png) and I've had a couple sites continue to serve it from http even after fully converting to ssl.
Dashboard -> Appearance -> Customize -> Site Identity -> add a site icon
FOR IMAGES
First of all, check whether your image file has HTTP instead of HTTPS if so change it to https or rather save those images and put in in the Server.
For instance,
<img src="http://example.com/images/image.jpg">(http image source)
to
<img src="https://example.com/images/image.jpg">(https image source)or into
<img src="//example.com/images/image.jpg">(server image)
Firefox throws an error when you have mixed active content. This is having a combination of HTTP and HTTPs requests; it's a security issue as it leaves room for man in the middle attack- intercepting HTTP content requests with malicious or unwanted requests.
Tip: Check all the following urls in your active content:
< script >
< link >
< iframe >
< XMLHttpRequest >
fetch()
urls in CSS (#font-face,cursor,background.image)
< object >
Navigator.sendBeacon (look for url)
Another tip: make sure to check all files (css gets overlooked)

Set Base URL using .htaccess

I'm setting up a clients area so my customers can review their site during development. I want to set it up so the URL is http://clients.mydomain.com/clientname/
Is there a way in the .htaccess file to set that as the base URL? I'm using the leading / format for my URLs in the page (ie /about/ or /css/), which will is fine locally & when I deploy to production, but doesn't work in the scenario outlined above.
The proper way would be to use relative links in your HTML, it's unreliable to try to track the referer and rewrite every subsequent request to shove the /clientname/ back in as a prefix.
If you make a subdomain for each customer, and develop sites there, you don't have to change the base URL. This will prevent other htaccess rules to break also when deploying to the live server...
So use:
http://clientname.mydomain.com

Why do I have both HTTPS and HTTP links on site, need them all secure!

I am getting the security alert: "You are about to be directed to a connection that is not secure. the information you are sending to the current site might be transmitted to a non-secure site. Do you wish to continue?" when I try to login as a customer on my clients oscommerce website. I noticed the link in the status bar goes from a https prefix to a nonsecure http prefix. The site has a SSL certificate, so how do I ensure the entire store portion of the site directs to the secured site?
It is likely that some parts of the page, most often images or scripts, are loaded non-secure. You'll need to go through them in the browser's "view page source" view one by one and eliminate the reason (most often, a configuration setting pointing to http://).
Some external tools like Google Analytics that you may be embedding on your site can be included through https://, some don't. In that case, you may have to remove those tools from your secure site.
If you can't switch all the settings, try using relative paths
<img src="/images/shop/xyz.gif">
but the first thing is to identify the non-secure elements using the source code view of your browser.
An immediate redirection from a https:// page to a http:/ one would not result in a warning as you describe. Can you specify what's up with that?
Use Fiddler and browse your site, in the listing it should become evident what is using HTTP and HTTPS.
Ensure that the following are included over https:
css files
js files
embedded media (images, videos)
If you're confident none of your own stuff is included over http, check things like tracking pixels and other third-party gadgets.
Edit: Now that you've linked your page, I see that your <base> tag is the problem:
<base href="http://balancedecosolutions.com/products//catalog/">
Change to:
<base href="https://balancedecosolutions.com/products//catalog/">
If the suggestion from Pekka doesn't suit your needs you can try using relative links based on the schema (http or https):
e.g.,
I am a 100% valid link!
The only problem with this technique is that it doesn't work with CSS files in all browsers; though it does work within Javascript and inline CSS. (I could be wrong here; anyone want to check?).
e.g., the following :
<link rel="stylesheet" href="/css/mycss.css" />
<!-- mycss.css contents: -->
...
body{
background-image:url(//static.example.com/background.png);
}
...
...might fail.
A simple Find/Replace on your source code could be easy.
It sounds to me like the HTML form you are submitting is hardcoded to post to a non-secure page.