why do I see the source code (html) of some web pages? - html

Most web pages are normally parsed and of course I don't see tags like <html> or <a href=>.
But, when I open some web sites, the source code pops up.
Try this
http://mediacomp-jes.googlecode.com/svn-history/r68/jes/JESHelp/auxHelp/mediaToolsOverview.html
So I saved this web page and reopened locally using firefox, everything seems normal again.
any reasons?

You're viewing the file in an SVN repository browser. They must have the encoding for the documents in these directories set to render as plain text. I am using chrome and saw the same thing. It's by design in this case.

As everybody says, it is the server side (Apache) configuration. You can confirm this by issuing HEAD request.
curl -I http://mediacomp-jes.googlecode.com/svn-history/r68/jes/JESHelp/auxHelp/mediaToolsOverview.html
returns
HTTP/1.1 200 OK
Date: Thu, 29 Dec 2011 00:27:49 GMT
Server: Apache
Last-Modified: Thu, 16 Oct 2008 18:13:57 GMT
ETag: "2//jes/JESHelp/auxHelp/mediaToolsOverview.html"
Accept-Ranges: bytes
Expires: Thu, 29 Dec 2011 00:30:49 GMT
Content-Length: 1802
Content-Type: text/plain
Cache-Control: public, max-age=180
Age: 0
Notice that Content-Type says "text/plain"

You're looking at a svn repository, and the response type is text/plain instead of text/html, so the browser renders it as text instead of html

SVN or not the important for the browser is the header Content-Type - the most of the pages are rendered as html, no matter the extension or absence of such, because of the header. Another effect obviously will be that JavaScript won't be executed.
About the Content-Type ietf and MIME types list Wikipedia
Header Content-Type: text/html; charset=utf-8 - rendered
lynx -head -dump http://stackoverflow.com/questions/8662745/why-do-i-see-the-source-code-html-of-some-web-pages
HTTP/1.1 200 OK
Cache-Control: public, max-age=60
Content-Length: 41163
Content-Type: text/html; charset=utf-8
Expires: Thu, 29 Dec 2011 00:26:08 GMT
Last-Modified: Thu, 29 Dec 2011 00:25:08 GMT
Vary: *
Date: Thu, 29 Dec 2011 00:25:08 GMT
Connection: close
Header Content-Type: text/plain - displayed as text
lynx -head -dump http://mediacomp-jes.googlecode.com/svn-history/r68/jes/JESHelp/auxHelp/mediaToolsOverview.html
HTTP/1.0 200 OK
Date: Thu, 29 Dec 2011 00:26:00 GMT
Server: Apache
Last-Modified: Thu, 16 Oct 2008 18:13:57 GMT
ETag: "2//jes/JESHelp/auxHelp/mediaToolsOverview.html"
Accept-Ranges: bytes
Expires: Thu, 29 Dec 2011 00:29:00 GMT
Content-Length: 1802
Content-Type: text/plain
Cache-Control: public, max-age=180
Age: 0

This is because this page has been encoded and then put in the page. So if you look at the page source your see it is written like <html> <head> <title> obviously because some one wants to show the page mark up. Nothing wrong with your browser etc

Related

How to prevent Chrome from using disk cache when the assets change?

Setup
I have a static site served by Nginx. I use Webpack to build the assets with a contenthash in the filename:
index.html
main.723f2b08bd448896ca78.js
main.18a850dffbe46cca9feb.css
When I edit my JavaScript code and redeploy the site, the root directory changes to:
index.html
main.08ddcf9a702a6772ce2d.js # <- new hash
main.18a850dffbe46cca9feb.css
Problem
When I open a new tab in Chrome, type my domain name, and press Enter - in the Network tab, I see that Chrome is still loading the old files:
Name Status Type Initiator Size Time
mydomain.com 200 document Other (disk cache) 4 ms
main.723f2b08bd448896ca78.js 200 script (index) (disk cache) 17 ms
main.18a850dffbe46cca9feb.css 200 stylesheet (index) (disk cache) 13 ms
When I click example.com, the HTML in Response includes the old script:
<script src="/main.723f2b08bd448896ca78.js"></script
Also, the Response Headers on index.html are outdated:
Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: W/"63d06108-202"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT
X-DNS-Prefetch-Control: off
Furthermore, when I click on main.723f2b08bd448896ca78.js, the Response Headers are also out-of-date:
Accept-Ranges: bytes
Content-Length: 605458
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: "63d06108-93d12"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT
If I reload the page, Chrome loads the new files correctly. But if I then open a new tab again, type the domain, and press Enter - it still loads the old assets! This leaves me with a hard page reload (Ctrl + Shift + R) which finally resets the cache.
Expectation
When I load my site in Incognito I get the correct files as expected:
Name Status Type Initiator Size Time
mydomain.com 200 document Other 557 B 634 ms
main.08ddcf9a702a6772ce2d.js 200 script (index) 606 kB 1.28 s
main.18a850dffbe46cca9feb.css 200 stylesheet (index) 87.2 kB 497 ms
index.html Response:
<script src="/main.08ddcf9a702a6772ce2d.js"></script
index.html Response Headers:
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: W/"63d249c7-202"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT
Transfer-Encoding: chunked
main.08ddcf9a702a6772ce2d.js Response Headers:
Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 605595
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: "63d249c7-93d9b"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT
Question
I don't understand what I'm doing wrong - Nginx is returning new values for Etag and Last-Modified. The contenthash changes between deployments. Yet the JS file is still cached very aggressively. This problem happens to me and other people using the site. In this case, it caused a white screen of death, and I had to tell everyone to do a hard page reload (which is foreign and bewildering to the end users).
Is there a solution for this? I don't mind disk cache but how do I tell Chrome not to use it when the asset file changes? Is this an Nginx misconfiguration?
Thank you.
It's your job to tell the browser how long it can cache a resource. You do so by setting the Cache-Control response header (MDN). If you don't set it, the browser is free to decide for itself how long is appropriate. That seems to be what's happening in your case.
Simply set Cache-Control: no-cache on your index.html response header and this problem will go away. The page will still be cached by the browser, but the browser won't use it without first checking with the server to see if it's still current (that's what the ETag is for).
For your static resources, though, you should set a long cache time, since the whole purpose of versioning file names like that is to allow any given one to be immutable.

Cookie value is not getting set

I have made a module in nginx to secure cookie.I encrypted the cookie with AES and modified the original cookie with the encrypted value.
If i modify the original cookie with some other value, then its working fine, say i changed cookie value from abc to xyz it works but when i change abc to encrypted abc chrome is not able to save it.
I can see it in the response headers in chrome, but the cookie is not stored by chrome and not sent by chrome for further requests.
Connection:keep-alive
Content-Length:612
Content-Type:text/html
Date:Sun, 15 Feb 2015 14:00:59 GMT
ETag:"54c1c5ae-264"
Last-Modified:Fri, 23 Jan 2015 03:53:18 GMT
Set-Cookie:my_login=2%B9%B2C%BB%E3%B5 }%EA%E8o%DC%B4%BF%F1%BB%BD|%EA%BF%F2K%A4?m7S%88%A7
Also live http headers extension in chrome shows the value of set-cookie as undefined.
HTTP/1.1 200 OK
Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 612
Content-Type: text/html
Date: Sun, 15 Feb 2015 14:00:59 GMT
ETag: "54c1c5ae-264"
Last-Modified: Fri, 23 Jan 2015 03:53:18 GMT
Set-Cookie: undefined
Any insight will be help.Thanks
1st, you might need to remove whitespaces
2nd, apparently you're sending cookie in a binary format, which can't be set.
here is a quick solution, encrypt this cookie (further) to base64 before sending it to the browser. That should solve your problem.

Access-Control-Allow-Origin error in Chrome

Got this in Chrome dev console:
Font from origin 'http://cdnjs.cloudflare.com' has been blocked from
loading by Cross-Origin Resource Sharing policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://xx.xx.xx.xx:8000' is therefore not allowed
access.
However, I did this:
curl -I http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0
HTTP/1.1 200 OK
Date: Thu, 11 Dec 2014 15:51:47 GMT
Content-Type: application/font-sfnt
Content-Length: 112160
Connection: keep-alive
Last-Modified: Thu, 28 Aug 2014 04:30:29 GMT
Expires: Tue, 01 Dec 2015 15:51:47 GMT
Cache-Control: public, max-age=30672000
Access-Control-Allow-Origin: *
So what's going on??
EDITED
Oh never mind, I resolved it by using https: instead of just // ..
I resolved it by using https: instead of just // ..

Why I'm not able to view the source of any js file in Google Chrome?

This one works:
view-source:http://code.jquery.com/jquery-2.0.3.min.js
This one does not:
view-source:http://pagead2.googlesyndication.com/pagead/show_ads.js
The network status is "canceled". Response headers:
HTTP/1.1 200 OK
P3P: policyref="http://www.googleadservices.com/pagead/p3p.xml", CP="NOI DEV PSA PSD IVA IVD OTP OUR OTR IND OTC"
Content-Type: text/javascript; charset=UTF-8
ETag: 18135184975683587730
Date: Thu, 11 Jul 2013 10:00:44 GMT
Expires: Thu, 11 Jul 2013 11:00:44 GMT
X-Content-Type-Options: nosniff
Content-Disposition: attachment
Content-Encoding: gzip
Server: cafe
Content-Length: 6489
X-XSS-Protection: 1; mode=block
Age: 2014
Cache-Control: public, max-age=3600
Without "view-source" I'm able to download the file and view the source but I want to know why this happens.
A strange thing in addition is, that it is not possible to open the web delevoper tools after opening this view-source url. If you do, the tools are completely blank:
I'm taking a guess here: it has to do with the Content-Disposition setting in the Response Header.
Reference: http://support.microsoft.com/kb/260519.

Google Drive Web View returns wrong content-type

Google Drive should be able to serve html according to this blogpost: http://googleappsdeveloper.blogspot.nl/2012/11/announcing-google-drive-site-publishing.html
But on my account I just get my html code between <pre></pre>.
I created a test folder with a test html file: https://googledrive.com/host/0BxVNvXP_dI5QTEstTEtmMXNkOFU/
Contents of the html file:
<html>
<head>
<title>Test 123</title>
</head>
<body>
Test 123.
</body>
</html>
The example in the blog post has the following HTTP Response Headers:
HTTP/1.1 200 OK
status: 200 OK
version: HTTP/1.1
cache-control: private, max-age=315360000
content-length: 1724
content-type: text/html
date: Thu, 29 Nov 2012 12:55:22 GMT
last-modified: Tue, 06 Nov 2012 23:57:41 GMT
server: HTTP Upload Server Built on Nov 21 2012 16:10:52 (1353543052)
My page has the following HTTP Response Headers:
HTTP/1.1 200 OK
status: 200 OK
version: HTTP/1.1
cache-control: private, max-age=315360000
content-length: 96
content-type: text/plain
date: Thu, 29 Nov 2012 12:51:00 GMT
last-modified: Thu, 29 Nov 2012 12:50:28 GMT
server: HTTP Upload Server Built on Nov 21 2012 16:10:52 (1353543052)
The difference thus is the content-type header. Somehow I need to tell Google Drive my html is indeed an html. file.
The MIME type for a file is set at upload time. Did you maybe upload the file with a .txt extension and rename it? If you delete and re-upload the HTML file I bet it will work.