I've decided to add SRI to our CDN scripts, but I want to test if it's working. If I manually change the hash the script still loads. I'd be expecting some kind of error code or something in the console.
So for instance, this is the correct hash:
<script crossorigin="anonymous" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ= sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ=="
src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
If I then change the first characters in each of the sha hashes to:
<script crossorigin="anonymous" integrity="sha256-YosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ= sha384-mvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ sha512-iGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ=="
src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
I would expect it to fail. But it doesn't. Tested in Firefox 58.0.2 and Chrome 64.0.3282.140, both of which support SRI. Caching is turned off and I can see in the developer tools that the script is being re-fetched each time.
Is there anything else I can do to verify that SRI is being used? Have I fundamentally misunderstood something...?
I've tested it with some style sheets and it seems to be working there, including the Console in Firefox reporting:
None of the “sha384” hashes in the integrity attribute match the content of the subresource.
It's also far more obvious the stylesheets haven't loaded. I think there must be a caching issue with scripts.
Related
I am doing what I think is a standard Next.js build. It works fine in development mode but when I try to get a production build, I get:
(node:39333) UnhandledPromiseRejectionWarning: CssSyntaxError: <css input>:17:20: Missed semicolon
at Input.error (/node_modules/next/node_modules/postcss/lib/input.js:129:16)
But here is the strange things: I don’t have any CSS.
Actually, I had some CSS but I deleted it all to figure out what was going wrong. No change.
After an hour or so of frustration, I did what I should have done in the first 10 minutes, and edited the file postcss/lib/input.js to just print out the offending CSS, and got quite a surprise. Let me describe the sequence of events in the order they occurred, not the order I discovered them.
A few days ago, I received from the designer an HTML file with the layout she wanted. In the <head>, there were some <link>s to the fonts she had chosen, including:
<link
href="https://fonts.googleapis.com/css?family=FontAwesome"
rel="stylesheet"
/>
What I didn’t noticed (apparently the designer didn’t either) was that there is no such font-family (FontAwesome is the name of font toolkit), I dutifully copied the line into my React code. Next.js and the browser plowed right through the problem.
PostCSS did not. Instead, when attempting the production build, it tried to parse the error page that Google sent.
Unfortunately, the error page was, you know, just an error page. Nobody at Google had scrutinized it for strict standards-compliance. Sure enough, near the top I found:
body {
background: 100% 5px no-repeat;
margin-top: 0;
max-width: none:
That colon there at the end is supposed to be a semi-colon. Of course, removing the useless link to the nonexistent font solved the problem.
Now I don’t know who to blame:
Google for having a syntax error on an error page
Google for not running a check on their error pages
Google for returning a 400 instead of a 404 when it cannot find a font
PostCSS for trying to parse an error page (I don’t know if the 400/404 thing confused it, but still)
PostCSS for giving such an obscure error message
the designer for giving me a link to a bad font
Because, you know I am not blaming myself...
For people who couldn't still understand the issue or find out where's the mistake, check for any links like
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap"
rel="stylesheet"
/>
Please make sure your weights are in ascending order or else it will throw 400 error from google and still show the same error from PostCSS
Following code solved my problem.
Pre:
<link
href="https://fonts.googleapis.com/css2?family=Monserat:wght#300;400;500;900&display=swap"
rel="stylesheet"
/>
Post:
<link
href={`https://fonts.googleapis.com/css2?family=Monserat:wght#300;400;500;900&display=swap`}
rel="stylesheet"
/>
Try this in your Next.js app:
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Petrona"
rel="stylesheet"
/>
</Head>
Note that the only difference between your code and mine is: css2
As the title states, I am getting the following three warnings in Chrome (latest version):
1) A preload for 'https://use.fontawesome.com/releases/v5.8.2/css/all.css' is found, but is not used due to an integrity mismatch
2) The resource https://use.fontawesome.com/releases/v5.8.2/css/all.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally
3) A preload for 'https://use.fontawesome.com/releases/v5.8.2/css/all.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
While I understand that these are not errors, do they represent a bigger issue or can it be safely ignored? I recently switched to https but to be honest, it might have been showing this in the chrome inspect window before this (I only saw it because I was checking the SSL post installation.
I have Googled parts of these warnings but havn't found anything. I used the "pasted into your head" method of adding Font Awesome, like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
Would appreciate a little feedback, thanks in advance!
This is due to your use of crossorigin="anonymous", and you can safely ignore these warnings, but they will be visible to your users, so it is best to correct the problems.
To do so, you'll want to ensure that your font is preloaded with the rel preload (with rel="preload"), and an as attribute declaring it as a font (with as="font").
This would look like:
<link rel="preload" as="font" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.
When I make a page, link it to a CSS file, and open it in a browser, it works fine.
But if a make a change and refresh the page again between very short time periods, the change is not reflected. But after sometime, when i refresh the page again, the changes appear.
So, somehow the browser keeps the CSS file cached and expires it after sometime. How to make the browser cache no CSS or HTML file.
It would be better if i can block it on a particular domain.
I'm on Ubuntu, using Chrome and Firefox, trying to prevent browsers from caching CSS files on 'localhost'... How to do it...
Thanks...
Something as simple as this should work:
<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">
Just replace {CURRENT_TIMESTAMP} with the actual timestamp in your server side code. This makes the browser think it's a new file because of the query string and it will be downloaded again. You could also use the actual modification time of the file (filemtime('/path/to/css/screen.css') if you're using PHP) which should prevent unnecessary downloads.
You can open Developer Tools by pressing Ctrl+Shift+J and then you'll find a cog icon in bottom right. When you click on it you should see an option to disable caching.
It would help to know how the website is hosted, as you can configure this in most web servers.
Also, it's a good idea to introduce a cache busting mechanism which would modify the links to the CSS files in question when you change the CSS files' contents. Browsers would then reload the CSS file because the HTML refers to a different URL.
A good example of a cache busting mechanism is the ruby on rails 3.1 asset pipeline which also minifies files and gzips them if the browser supports them:
Rails 3 - Asset Pipeline -- What does it mean to me?
http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/
The seemingly-inelegant but rock solid approach is to give the asset a new name, when the content changes. This solves the problem for all your users, not just you:
<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">
Or maybe (but it's more of a pain to change in an IDE, and sometimes causes unrelated problems with caching):
<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">
Nothing else works quite as well in large scale production environments, where millions of copies of an older css file may be sitting in various intermediate or browser caches. Some clients ignore cache control headers, and you don't really want caching subverted anyway, at least not in production.
In development you can press Ctrl+Shift+J (Chrome) and turn off caching.
I'm trying to implement a TinyMCE plugin with ExtJs, with a demo as example, found here: link.
This fails because I receive an "Ext is not defined" error in Firebug. I basically copied the example, I only used a newer version of Ext. First of all the css and scripts are included:
<link href="scripts/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="scripts/extjs/ext-all.js" type="text/javascript"></script>
<script src="scripts/miframe/miframe-min.js" type="text/javascript"></script>
<script src="scripts/tinymce/jscripts/tiny_mce/tiny_mce_src.js" type="text/javascript"></script>
<script src="scripts/ux/Ext.ux.TinyMCE.js" type="text/javascript"></script>
Firebug does not complain, all the scripts are found on the specified paths and are included.
Next I call the Ext function in the head of my aspx document,
<script type="text/javascript">
console.log("Ready...");
Ext.onReady(function() {
console.log("set...");
Ext.get("cmdOpen").on("click", function() {
console.log("GO");
var dlg = new Ext.Window({
//etc
</script>
The console.log("Ready...") shows up in the console, then the code breaks. There are four references to "Ext is not defined", in ext-all.js(), miframe-min.js(), Ext.ux.TinyMCE.js() and in the code in the .aspx file. (Default.aspx)
I did not alter any aspect of the included files, they are official releases.
Am I perhaps missing a statement somewhere? Or do I have to include other things still? I have honestly no clue.
Even when including ext-all(-debug).js, you still need to include the ext-base.js file before that, otherwise you will get the "Ext is not defined error". Not sure by your last comment if you are already past this or not, but I thought I would point it out. Please see this page for complete details on how your includes should be set up:
http://www.extjs.com/learn/Tutorial:HTML_Page_Setup
there is a firefox extension called "jsview", it allows you to see what scripts and css files are included on a page.
When navigating to the link you include at the top of your post and opening the ExtJs file, you'll notice that the example provided is using version 2.1 of the code.
The Ext.ux.TinyMCE v0.6 has a corresponding blog post here. You will notice that it specifically requires:
Firefox 2+, Opera 9+, MSIE 7
ExtJS 2.1
TinyMCE 3.1.0.1
Ext.ux.ManagedIframePanel
Be aware that when plugging in a newer versions of the TinyMCE or ExtJs libraries, there might (read will) be breaking changes that you will then have to resolve. You could try scrape the files directly from the example to ensure you have a working version.
If you choose to use ExtJs v3+, get the latest components:
1) ux.ManagedIframe has been maintained more recently and even upgraded for ExtJS 3.x here
2) Read through the ux.TinyMce thread and download the latest version. I think it's 0.7b. If you're still having problems, that's probably the best place to find answers.
copy the lib folder in your eclipse workspace`s exjts project folder and just give the relative paths, is should than work
Go to ExtJs website and make sure you download and included all the necessary files and IN ORDER,also using a newer version might break the code.
try it with simpler examples and only reference the ext stuff and see if it loads