Care to be taken when serving static content (JS, CSS, Media) from different domain? - cookieless

Let me try to explain by example. Say website is hosted at example.com (NOT www.example.com). In order to serve static content cookie-free, I've chosen to use a different domain example-static.com.
Now, lets consider that my static content is currently served like this:
http://example.com/js/script.js
http://example.com/css/style.css
http://example.com/media/image.jpg
** Now I create a CNAME record aliasing example-static.com to my main domain i.e. example.com so that the static content is served as such:
http://example-static.com/js/script.js
http://example-static.com/css/style.css
http://example-static.com/media/image.jpg
** Is that all I have to do? Will all browsers execute JavaScript files and load web fonts without any security concerns? OR should I be using some .htaccess rules to modify header information and the like?
PS: It would be great if you can provide what rules should be added, if need be.
EDIT: The reason why I added a bounty to this question is that people I know have advised me against serving JS from a different domain. They aren't able to give me a clear explanation either.

It will work without extra config. However: does it worth the pain? If you use some real content delivery network that's fine, but simply faking one, to be cookie-free? A much better approach would be to minimize cookie size IMHO.

Gergely's answer answers my question. And I've also found an alternative. Since my website is served from example.com, instead of serving static content from a different domain, I am planning to serve the cookies themselves from a different sub-domain www.example.com.
Simple, and should do the job.

Related

Force browser to only cache images (not scripts and links)

I maintain a website that receives regular updates and style changes. Following these changes, often my client will protest that I've somehow 'broken' their website purely because their browser has cached the old CSS stylesheets and/or scripts, sometimes even after a refresh.
This question (How to control web page caching, across all browsers?) explains how I can overcome the problem with just about any of the technologies at my disposal but I don't want a blanket no-cache solution, I would like the browser to maintain the images - particularly the larger ones that rarely change.
Is this possible using, say, PHP, HTML, or even JavaScript?
Call me OCD but I'd prefer not to modify the file names each time there is a change to the content (though I'm willing to resort to this), I'm looking for a control mechanism if one exists.
I understand this can be achieved via Apache Expires module (as explained here: Website image caching with Apache) but the hosting account my client uses doesn't appear to grant me the access to do it and if I'm honest I'm far from an Apache expert.
If you don't have access to the Apache configuration itself, you can try setting expiration rules via an .htaccess file. Contrary to popular belief, not only Rewrite rules, but any Apache configuration rules can be contained there … if the Apache config allows it. But, it's worth giving it a try.
To only cache certain files, you can use a directive like:
<FilesMatch "\.(ico|pdf|jpg|png|gif|js|css)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
(You can remove those extensions you don't want to cache, and add others.)
Now, as for CSS and JS, it is generally recommended to do the following: Instead of changing the file name itself, simply change the references to theses files by adding a (meaningless) query string to them.
For example, when embedding a JS file, do it like this:
<script src="/path/to/file.js?rev=123" type="text/javascript"></script>
Next time you update that file, simply increment the rev number.
You can use caching with your PHP script. Create an PHP script, and pass the image name as parameter.
In php script, just use header() function, to control browser cache. Set cache expire time in header function. As Browser maintains cache via HTTP headers.
Then after sending header for cache control. Send another header for image, After sending image header, read the raw contents of image, just send the output of image contents in binary stream.
Here is a good example of code explained
http://www.informatics-tech.com/how-to-leverage-browser-caching-without-htaccess.html
Happy Coding
Atul Jindal

Accessing Stylesheet Rules for CSS Loaded From CDN

I'm currently working on converting browser-drawn SVG to PNG. In order to do this, I wrap the SVG data into an Image, write it to a Canvas, then use its data URI to open it in a new window as a PNG.
Moreover, I need to inline styling information. To do this, I iterate over each of the stylesheet's rules and check if any are used in the SVG. If it is used, I inline it. I learned this approach from this article.
This works on my local machine, which doesn't use a CDN. On our production server, we're using Cloudfront to serve up CSS/Images, however, CSS files aren't actually loaded into document.styleSheets, apart from a place-holder with an href pointing to where they're located on Cloudfront.
How can I access these stylesheets? They must exist somewhere in the browser, if they're being used in the DOM.
Thanks
This is long overdue, but thanks for pointing me in the right direction Steve Sanders. Here's an explanation of what I tried.
This approach didn't work: I edited the CORS settings of the s3 bucket hosting our assets such that cross-origin GET requests are allowed, then tried to make an ajax request to the cdn to get the css files I needed. My browser complained about cross-origin resource sharing, and it didn't work.
This approach did work: Because I couldn't make an ajax request to our cdn, instead I made an ajax request to our web server (same origin). Although it isn't ideal to get assets from your web server, it works.

things to consider before site goes live

Morning. I have finished my first site, which will be going live soon.
There's a lot of PHP and therefore I have been working/testing on xaamp/apache.
I just wanted to confirm exactly what will happen to my links once the site goes live - most of them contain no http:// prefix and are simply 'home.html' or 'about_us.php'.
I assume apache automatically inserts the localhost prefix once I click on a link, so will this be the same when the site goes live? And for pics etc I currently just have something like the following.
<img src="img/logo.png">
Will this suffice?
One more thing - I am pretty sure (obviously I will check!) that some PHP header locations include the localhost prefix - I presume this will need to be removed?
Many thanks.
Apache has nothing to do with it. The browser handles resolution of incomplete URLs.
There are three kinds of relative URLs, which all resolve relative to the URL you're currently on. For the examples below, assume you're on http://example.com/abc/xyz.html:
relative URLs like foo/bar.jpg resolve to http://example.com/abc/foo/bar.jpg
absolute paths like /foo/bar.jpg resolve to http://example.com/foo/bar.jpg
protocol relative URLs like //example.com/foo/bar.jpg resolve to http://example.com/foo/bar.jpg
Relative links will work, you don't have to explicitly prefix your website name, if you go with that, you have to change the name every time your domain name changes.
You need to optimize the website. Follow these simple steps:
Minify Javascript and css files.
If there is no need avoid using htaccess for performance. Using .htaccess files slows down Apache. If you can, modify the main server config file (usually called httpd.conf)
.htaccess performance hit , Using .htaccess file in Apache
Compress Javascript and css files.
Include Meta and title tags.
Avoid using frames if possible.
Validate Your HTML Code
Follow this excellent article for more information:
Web optimization tips best practices
Optimize Your Website
Most likely things to consider before you let your website live:
Let all your links be in absolute path, which is full url of your file or link
Confirm you have changed your database host, username, password and database name to the server's one
Make sure you have your homepage url changed from development environment to http://firstsite.com/
error_reporting();
Manage error logs and log paths
Look for your first echo. Not even a white-space before any change in header information
Prevention of SQL Injections
Don't just let your login information to easy like admin / admin

Can you make an external .js file only work on one domain?

I have an external .js file that I load on one of my sites to popular a jquery chart. I don't want someone else to be able to just copy my code and have it work for them, so is there a way to keep a .js file working only on a single domain? Kind of like how you can prevent images from being hotlinked to other domains.
Depending on what your plugin does, there might be a solution. A limited way to do this is CORS - you load the script from your domain, and have it load the data from the same (sub)domain. If that server has cross-origin requests disabled, then if somebody just used your source file, their request for data would fail - because of the same-origin policy.
Of course, this does not limit the people to just copy/paste your code to their sites and work with their own code - but if you simply want to prevent your server to be a host for their javascript file, then that could do it.
Check this link for more info on Same-origin:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript
Alternatively, use server-side code to generate those graphs - as nothing can prevent clients to download your javascript source.

The page at https://xyz.com/test/checkout ran insecure content from http://xyz.com/test/checkout/css/styles.css

In chrome My SSL related page got blank on other browser it works fine.
It gives the error message
"The page at https://xyz.com/test/checkout ran insecure content from http://xyz.com/test/checkout/css/styles.css"
In my website some pages are on SSL,I have only one masterpage which is used in both type of pages(http and https),I want to use my css and js which will work on both conditions.
Check any resources in the CSS file (like images and background images).
If they link to the HTTP domain see if you can rewrite them to be a relative path, so the HTTP/HTTPS switching is automatic.
It is safe (and permitted) to include CSS that is served over HTTPS in a web-page that is served over regular HTTP; so, one option is to use https://xyz.com/test/checkout/css/styles.css in all cases.
Another option, since the path seems to be the same for both versions, is to use //xyz.com/test/checkout/css/styles.css (not specifying the protocol); then the same protocol will be used for the CSS as is used for the HTML.
There are probably links in your CSS file that relate to a non-secure location.
I would suggest checking that file so you can make any updates.
Alternatively, on your server you could do a URL rewrite so anything that comes through on HTTP is re-written to HTTPS.
Using a protocol-independent absolute path is what you can leverage:
http://blog.httpwatch.com/2010/02/10/using-protocol-relative-urls-to-switch-between-http-and-https/

Resources