"Do you want to view the webpage content that was delivered securely...."
Is this message displayed only because http resources are used in a https resource?
Yes. Usually this is static content, such as image, CSS, and JS files.
It is best to avoid mixing content sources on HTTPS pages, as it will cause these sorts of warnings, and can lead to some of your content not displaying to the end-user.
As you said in your question, it's because of the mixing of both http and https content.
If you are using Firefox you could go and install the Firebug addon to look up all resources that are loaded and then use only one source. You'll find all loaded content under tab 'Net' after you do a reload.
That's correct. It's unsecure to request HTTP resources from a HTTPS page. You need to replace all absolute URLs to resources by scheme relative URLs.
E.g.
<link rel="stylesheet" href="http://example.com/resources/style.css" />
<script src="http://example.com/resources/script.js"></script>
<img src="http://example.com/resources/image.png" />
must be
<link rel="stylesheet" href="//example.com/resources/style.css" />
<script src="//example.com/resources/script.js"></script>
<img src="//example.com/resources/image.png" />
See also:
What are those URL's that are starting with // - that you can see within Google+ html source?
Related
In a Vue.js project created with Vue CLI (internally using webpack), I implement code splitting and lazy loading with dynamic imports like so:
import(/* webpackChunkName: "my-feature" */ "./my-feature.js");
As a result I get the expected set of files:
dist/myApp.umd.min.js
dist/myApp.umd.min.vendors~my-feature.js (my-feature dependencies)
dist/myApp.umd.min.my-feature.js
The Vue application is built as a library and then used for an existing web site. What I do is include myApp.umd.min.js in <head> (common to all pages), and then in <body> request code I need for that page (for example myApp.umd.min.my-feature.js). Dependencies (myApp.umd.min.vendors~my-feature.js) are automatically requested by the earlier script.
Problem
When I navigate to a page, that uses the Vue app (and specifically my-feature), all 3 of the above files are loaded. That is expected for the first visit, but if I move to a different page and then return, only the first file (myApp.umd.min.js) is loaded from cache. The other ones are loaded from server every time I visit the page.
What approach to take for the lazy-loaded scripts to come from cache once already loaded? Thank you!
So far I have not found anything better than including all the scripts, I need on the page, in its <head> section. Moreover only using <script> tag helped; <link href="..." rel="preload" as="script"> was useless.
Use a version parameter for the script url.
There's a code snippet that showcase this:
<script type="text/javascript" src="myApp.umd.min.js?v=123"></script>
Also this is a valid solution:
<link rel="preload" href="myFont.woff2" as="font"
type="font/woff2" crossorigin="anonymous">
From docs:
A rel value of preload indicates that the browser should preload this resource with the as attribute indicating the specific class of content being fetched. The crossorigin attribute indicates whether the resource should be fetched with a CORS request.
At first I didn't have any SSL certificate in my site because hosting providers didn't allow it.
So, I've transferred my domain to CloudFlare & got a SSL certificate for my site.
For a SSL certificate the contents in the site should be like <img src="**https**://www.example.com/image.png (not <img src="http://www.example.com/image.png">), otherwise it will show an issue about Mixed-Content..
So, by following the rules, I did the same thing.. But at the bottom some third-party ads were placed owned by hosting providers which contains http:// connection. So as a result I got an untrusted certificate error in the Browsers.
Hosting providers doesn't allow to edit or remove those items by paying or something else.
But CloudFlare already has a system to change all <script src="http://www.example.com/script.js"></script> into <script src="https://www.example.com/script.js"></script> automatically. But my problem is, it can't change <img src="http://www.example.com/image.png"> into <img src="https://www.example.com/image.png">.
Is it possible to modify <img src="http://www.example.com/image.png"> into <img src="https://www.example.com/image.png"> using JavaScript?? And will it be resolved if I use JavaScript??
Try using String.replace on the document HTML.
Edit: Upon more research, you might want to try using:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Instead of a JavaScript solution
document.documentElement.innerHTML = document.documentElement.innerHTML.replace("http://", "https://");
console.log(document.documentElement.innerHTML);
<html>
<head></head>
<body>
</body>
</html>
<img src="http://somethingsomething">
I am having two JSP files in my main application whereas one is MAIN.jsp and another one is CSS & JS import.jsp file.
MAIN.jsp is the main page of main application.The import.jsp file will import the CSS and JS of partner application in MAIN.jsp file which is used for support the few functionality with main application as partner.
But all the application (Main and Partner) are deployed in same server. So basically the host name of both the application will not change but context root alone will get change.
i have used jsp import tag to import the import.jsp in MAIN.jsp like mentioned below code.
MAIN.jsp
<html>
<head>
<c:import url="resourceImport/import.jsp">
</head>
<body>
</body>
</html>
import.jsp
<html>
<head>
<link url="http://hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="http://hostName/DifferentContext/sample.js" > </script>
</head>
<body>
</body>
</html>
Currently i have hard coded the partner HTTP URL in import.jsp for load all the resource in MAIN.jsp file. But moving forward we are planing to run the application in HTTP and HTTPS environment.
So how can i make it dynamic way of getting protocol in import.jsp file. I have tried following methods to get the protocol dynamically but its not working.
Method 1:
Removing Protocol and make it relative URL
<head>
<link url="//hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//hostName/DifferentContext/sample.js" > </script>
</head>
Method 2
Removing Protocol and Host name and make it relative URL
<head>
<link url="//DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//DifferentContext/sample.js" > </script>
</head>
So could you please anyone help me to get resolve this issue.
If there is anything that makes it worth to use https (and these days there is), I'd opt for less hassle and just go https everywhere.
No more worries, no accidental information leak and protocol change. Easier maintenance and no later update will inadvertently bring back a wrong protocol link.
Check HSTS as an option to force compliant browsers to not bother with any http connection attempt in the future.
That being said, relative links are another way to stay in the same protocol and probably beneficial: You rarely want to hard code domain names into your applications - Depending on the programming style that you're using in your app, you might want to use page-relative links (../DifferentContext/example.css) or server-relative (/DifferentContext/example.css). Protocol relative is fine as well, but hardcodes the domain name.
Yet another option is to make that location completely configurable. This way you can decide later (provided that you've changed all occurrences to the configured value): ${config.theOtherAppBaseUrl}/example.css. With this, you can try out all the different options yourself and within 10 minutes. And change your mind later, when you come to the conclusion that it's worth to go https everywhere.
(Note: You have an issue in your question's code: The last link refers to //DifferentContext...., which would assume that DifferentContext is a hostname - this is a protocol relative URL)
Here is a screenshot
Here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/united/bootstrap.min.css">
<link rel="stylesheet" href="../../style.css?v=3">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Open+Sans+Condensed:300|Russo+One">
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
I am not including these files anywhere else. I am using cloudflare. JavaScript files load only once. The issue is only with stylesheets.
There are a few things I would check:
This may be an issue with the tool you are using to view network
traffic, not the actual webpage. Try an alternative tool such as
FireBug. To view the naked HTTP requests use Fiddler2.
Does your webpage use Frame/IFrame? If so, each frame is will make
an independent set of HTTP requests.
To remove all doubt, I would personally restart your computer. The number of times I see 'weird' tool behaviour that vanishes on a restart is astonishing.
CloudFlare wouldn't be adding additional stylesheets to your site. It looks like those resources are coming via Google and MaxCDN.
I have javascript file, located on one domain, e.g:
http://mydomain.com/script.js
Some pages (from other domains) include my javascript using SCRIPT tag. They can include it via http or https
<script src="http://mydomain.com/script.js"></script>
or
<script src="https://mydomain.com/script.js"></script>
Also they can include my script using 3rdparty iframes, e.g:
<iframe src="http://3rdparty.com/frame.php">
where http://3rdparty.com/frame.php outputs
<script src="http://mydomain.com/script.js"></script>
or
<script src="https://mydomain.com/script.js"></script>
I can edit only static javascript file script.js on mydomain.com.
How I can detect what protocol used to load my javascript (https://mydomain.com/script.js or http://mydomain.com/script.js)?
You can use a protocol relative URL:
<script src="//mydomain.com/script.js"></script>
You can use this:
document.location.protocol + "//mydomain.com/script.js"
I do not believe that you have any ability to identify within the code how it has been loaded. The best suggestion I can come up with is to have the http and https point to different locations ( i.e. be different sites ) and have something within the code that indicates which one is being picked up.
var protocol='http'
or
var protocol='https'
It does mean maintaining two files, and two sites though.
ETA: I thought James Wiseman had the answer, but of course that will only return the protocol of the PAGE, not the SCRIPT. If you know these are related, that would work ( often the https is loaded on https pages and vv ). But it is not definitive.
It is a good solution if you can be confident that the protocol on hte page is the same as on the script.