HTTP/2 server pushed asset downloading twice - cloudflare

I am trying to use HTTP/2 server push, powered by Cloudflare. I am trying to push two assets using the following HTTP Header...
Link: </img/whysoslow-hero.jpg>; rel=preload; as=image, </lib/bootstrap.min.css>; rel=preload; as=style
The image is reference as a background image in a stylesheet and this is being pushed and then used correctly (downloaded once).
However, I am referencing the stylesheet in the HTML of my page like this...
<link rel="stylesheet" href="/lib/bootstrap.min.css">
...and it's being pushed but then also being fetched as well (downloaded twice).
My website is... https://whysoslow.co.uk
Here's a screenshot of the Network tab in Chrome showing that the assets are pushed, but then the stylesheet is downloaded again...
Can anyone explain to me why this is happening and how I can resolve it?
EDIT:
I've since noticed that the console is saying...
A preload for 'https://whysoslow.co.uk/lib/bootstrap.min.css' is found, but is not used due to an integrity mismatch.
So it's the SRI check that's failing. But I don't understand why, it's fetching the same file, so it should be identical. Why would they not be identical?

Now that I've figured that out, I've also managed to find the answer...
How to preload script using integrity and crossorigin
Short answer: You can't preload and use SRI, it's not supported yet.

Related

Vue favicon doesn't change in ios chrome & safari browser

I alredy change the favicon.ico to the logo file which I want to use In Vue-cli's public folder, and named it the same file name.
In web browser the Favicon and title be changed successful
but in the mobile browser neither safari or chrome are fail
I didn't use pwa so probably not have manifest.json problem
And I already tried to clean both browser's cache or open it on Incognito Windows, but still the same, is anything I neglect to do with my index.html or vue-cli config?
You can add <link rel="apple-touch-icon" href="/custom_icon.png"> so that your favicon is shown when you favorite the page or view it in that tabs view. This is mentioned here.
For the webpage itself its very likely your iPhone is still caching the old icon regardless of your attempts to clear said cache. In my experience trying to load the page with no network connection, waiting for the time out error and then connecting to the network and reloading the page is the best way to "force" the device to clear its cache. Alternatively with the dev tools open and a keyboard attached type command + option + r. If not, patience, it'll update... eventually.

My custom 404 error view laravel does not display online but works on local server

I have an application that use laravel 8.75. I made custom views for 404 and 500 errors.
When I deployed my website, custom error view shows but seems that styles doesn't work on it.
So I realized that I made a mistake on the stylesheet call. I made correction and the css file is correctly call. But style still doesn't work on my error view.
So I clear the framework cache data and views and I clear the serviceworker cache.
Now my custom error does not appear at all, only standard navigator error (and not laravel standard error).
I want to precise that it works on local server.
I think it's due to cache but I don't understand the problem.
Has anyone had this problem before?
Do you have any idea of the cause of the problem?

Dojo Combobox not rending properly in XPages

My team is having a strange issue with the dojo combobox. When we moved the code to the integration environment, the dojo combobox started to render improperly. We verified that the code is the same. Strangely other dojo comboboxes in the same application render normally.
The integration server is on a older version: 9.0.1 HF32 64 bit
The unit server where it works is at: 9.0.1 FP3 HF632
UNIT SERVER rendering on left, INTG Server rendering on right.
My question is has anybody seen this and do they know how to fix it?
Notes:
this happens in IE and Chrome. It is coming wrong from the server.
We are using CIAO to promote between environments (which I hate).
Upgrading the server is not an option for me
I can post code if requested, but I suspect that it isn't a code issue.
UPDATE: For some reason the following two CSS files are not loaded on that particular page. They are loaded on every other page in the application. I can't find any property or setting that would effect this. The admin verified that these files are on the server and the dates are identical. These are system generated resources.
<link rel="stylesheet" type="text/css" href="/oneuiv2.1/base/dojo.css">
<link rel="stylesheet" type="text/css" href="/oneuiv2.1/defaultTheme/dojoTheme.css">
Does anyone know why these two stylesheets are not being loaded??
I've seen some strange positioning issues depending on where Dojo comboboxes are relative to the browser screen, i.e. if there's not enough space left in the screen to position relative to the field they're bound to. That may have been in XPiNC and was in older versions. The thing to check is whether the rendering issue is related to where the field is relative to the page in the browser.

Adobe AIR won't include remote files !

Im building an AIR application using the HTML/JS SDK.
I can include scripts and stylesheets as long as they are in the same folder as my website, but no remote content fetched from the Internet can be included ! No remote scripts, neither from jquery nor from google... I put <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> and nothing happens ! It is the case for every file, not only this one.
Have you ever run into this issue ? In the AIR documentation they seem to present us with big mashups and remote inclusions all the time, still it won't work for me !
You can definitely do this in AIR, but you need to work around the security restrictions as by default you can't do this from the first frame that is loaded. Thankfully it's not too hard.
You need to create an iframe in your main html page (e.g. index.html) and load all of your content into this. Your main html page then acts as a controller of sorts allowing you to call methods which require enhanced security permissions (file system etc..), while any code loaded into the iframe is allowed to load external media and scripts and also allowed to use JavaScript eval and other methods which are otherwise blocked in the main frame of the application.
You can read about it here http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f08.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7f07
Read the full page so you understand the concept, but pay particular attention to the sandboxRoot and documentRoot attributes when you are setting up the iframe.

Find out what resources are not going over HTTPS

I have an ASP.NET site which should transport completely over HTTPS. However, in Google Chrome I get a warning that the page includes resources which are not secure. How can I find out which those resources are and why they wouldn't be going over HTTPS?
I've just had this problem in Chrome also. I checked in the Network tab but all resources were loaded over https.
Solution: close Chrome and re-open.
Chrome must cache its secure-content detection so that even when you fix the problems the insecure content message won't disappear.
Usually this occurs because you are loading Images, javascript include files or external CSS files without using https. You can use a program such as FireBug: http://getfirebug.com/
FireBug will tell you how your elements are loading and which aren't going through the ssl layer. If you don't have firefox, then I am pretty sure Chrome also has something similar to FireBug built in.
Here's how to use firebug:
Open firebug
Click on the Console Tab
Reload the page
Any https errors will show in the console and tell you which resource is not working.
Hope this helps
I have nothing to do with the people providing this online script, but it's easy and can be bookmarked in any browser.. works well and quickly to solve the problem.. http://www.whynopadlock.com
In Google Chrome: You can view the offending resource in the Console tab of the Inspect Element window.
It will be listed as:
The page at https://example.com/page displayed insecure content from http://example.com/resource
Of course you might have to reload the page with the Inspect Element window already open.
One of the easiest ways to do it is to right-click the page in Firefox and select View Page Info. Then go to the Media tab and find anything that is loading from http instead of https.
We've scratched our own itch and wrote a tool that crawls your web-site and tells you what pages have non-SSL resources on them. You just need to enter the root URL of your web site – no need to check every page manually.
http://www.jitbit.com/sslcheck/
I noticed that when I had this problem that a toolbar(uTorrent) was causing the error. I removed the toolbar and the error went away. Not sure why a toolbar would cause an error on my site, but no more problems here with the SSL certificate.
To add to this I right-clicked on the column headings in the Network tab view and selected Protocol.
If you then click on the Protocol heading, the contents of the report will be grouped by HTTPS, etc
In Chrome, you can find out which resources were loaded via http versus https by doing the following:
1) In Wrench menu, choose Tools > Developer tools
2) Click on "Resources" toolbar icon
3) Expand the Frames folder to see the different pages. Expand the page whose resources you want to see. The individual Resources for the page are then listed, broken down by Images, Scripts, and Stylesheets
4) To see the URL that was used to load that resource, just hover the mouse over the resource name and the URL will appear, either with http or https. You can also click on an image name to see the image on the right side, along with its URL
Chrome has their own developer tool.
you can right click a page, inspect it.. and then click the "network" tab and reload the page. you'll see the workflow.
I dont know if any one will be checking this answer
Or you might have found the solution already, but anyway, my answer might help other people suffering from similar issue
http://www.whynopadlock.com/
This is the link that I used to check the insecure content /file which was being loaded to my page.
Hope it helps. :)
I just discovered same behaviour in chrome (firefox showed a green lock), even though all resources were loaded via https.
The reason in my case was that the server supported broken (google poodle) SSLv3.
Setting ssl_protocols to exclude SSLv2 in nginx.conf like so
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
fixed the problem for me.
I consider it unfortunate that chrome doesn't make this reason more transparent. "this page loads some resources insecurely" is very misleading if not wrong.
If you want to crawl your own site from your own desktop for a list of all reasources loaded (not loaded by javascript though, which is worth bearing in mind), if using windows you can use Xenu's link sleuth. Export the TSV file and then right click and open with excel, then sort by URL, you can then find those pesky http resources for all pages on the site!