I load any web page. Then open firebug console and run the below javascript, which creates a link element in the head of the page. the code is below.
var s = document.createElement('link');
s.setAttribute('href', 'file:///home/simha/.public_html/new1.css');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
the content of the file:///home/simha/.public_html/new1.css
body { background-color: #0000ee !important; }
I run the code in the firebug console and the following appears in the head of the html
<link type="text/css" rel="stylesheet" href="file:///home/simha/.public_html/new1.css">
But there no change in the background color (change to blue) of the body.
I checked the css rule independently from editing the css in firebug, the background color changes to blue.
I have apache web server installed. So i also tried instead of "file:///home/simha/.public_html/new1.css" to "localhost/~simha/new1.css" still it does not work.
I am using firefox browser.
That's because for security reasons external resources can be loaded from a local URI scheme (like file:) only if the document has been loaded from a local URI too.
Try this,
s.setAttribute('href', 'new1.css');
Your stylesheet named new1.css needs to be referenced in relation to the server's document root.
So you're using Apache, which means you setup the apache2.conf (or httpd.conf, etc) as well as the site conf file(s). The path you used in this config for DocumentRoot will be the reference point. From there you simply put /path/to/new1.css.
So in your case,
file:///home/simha/.public_html/new1.css
will translate to
/new1.css
So your final code will be
<link type="text/css" rel="stylesheet" href="/new1.css">
When you put file:/// prefixing an address, it's not using the server filesystem to load the file, it's using the client/user. This is due to the blank string where the hostname should be - file://_BLANKHOSTNAME_/. Here's more info if you're curious.
For your localhost/new1.css to work, it needs to be prefixed with http:// like this:
href="http://localhost/new1.css"
Otherwise it's interpreting localhost as if it were a directory name and not the hostname.
I think the problem is with file: or localhost in firefox, I saved the file in dropbox and used that link it worked.
var s = document.createElement('link');
s.setAttribute('href', 'https://dl-web.dropbox.com/get/new1.css?w=AACLoomOT900PfGVqEuu9rHP4NlewdOq0KaSZbhzmgyG1A&dl=1');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
But is there any setting in the linux for apache and file to make it work locally.
One possible problem might be the path you have
file:///home/simha/.public_html/new1.css
When you allow per user directories in Apache, it is usually public_html without a leading dot. So, when you rename the directory to /home/simha/public_html, http://localhost/~simha/new1.css should work as expected.
Your code works as is, at least when you use an absolute URL
<button type="button" class="btn btn-info">Info</button>
In the Javascript, I replaced your CSS with the publicly accessible Bootstrap CSS
s.setAttribute('href', 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
everything else is left as is, see JSFiddle
As you can see, the button is coloured like the Info button in the docs at Bootstrap - Buttons.
If you did not solve this problem yet,
Serve all static content from a (http) server of your choice. Do not use file system paths. Firefox wont load them ( in a web page context )
Try to put all the static resources along with your
html, and serve them with relative url.
Now try this thing. open view source, and check if the css path is clickable and is fetching the content according to your expectation. If not, directly access that file from address bar of the browser. (Make sure your localhost is running and you have put all your files related to this in the web server - I normally use /var/www/). Use the path that works like this in your html too. (no file:// protocol, remember).
If you are not success by these, WWJD.
Also tell us when you are successful.
Related
I have a problem where I'm trying to to load a local css file (e.g. theme.css) as follows:
<link rel="stylesheet" type="text/css" href="theme.css">
I am using Chrome (but I've tried in Microsoft Edge, as well), and the file won't load. It will be stuck as (pending) forever. If I remove the "rel" property than the file will load properly, without any problems.
I have been a developer for a few years now (although I haven't been working this low level for some time) and I don't remember ever encountering this problem.
I understand this might seem a bit inane for some, but I am very curious why this happens.
EDIT:
I am using Nodejs to return an using this code:
var server = http.createServer(function(req, res) {
var page = url.parse(req.url).pathname;
if (page == '/') {
index = 0;
fs.readFile('index.html', function(err, data) {
res.writeHead(200, {"Content-Type": "text/html"});
res.write(data);
res.end();
I think I am starting to understand the problem. Is it because I am using Nodejs to read an html file, and that file cannot dynamically return css files locally specified inside?
I've realised what the problem was. Because I am using node.js to serve the server (in this case localhost) files, I needed to serve specifically the files in my requests (such as having a route to script.js and theme.css). I thought that simply returning the html that contains the files (locally) would suffice, since opening index.html would return the js and css files without any problem. I am not sure why rel="stylesheet" would affect whether the file could be loaded anyways.
Thank you for the help.
Judging from your comment the problem appears to be related to accessing a non https resource from https.
See this link about referer policy: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
Importantly the section on integration with CSS:
CSS can fetch resources referenced from stylesheets. These resources
are following a referrer policy as well.
External CSS stylesheets use the default policy
(no-referrer-when-downgrade) unless it's overwritten via an HTTP
header that is set for a CSS stylesheet specifically.
For inline styles or styles created from APIs like HTMLElement.style,
the owner document's referrer policy is used.
My guess is that when the rel attribute is set then it uses the default policy, but when it isn't then it uses the documents policy. This is a curious interaction and I'm not sure it's supposed to work like that.
EDIT: I can see from your update that you aren't using HTTPS, so I'm not sure why this would be relevant. The message in your comment definitely referenced the referrer policy, and I saw this and made a logical conclusion.
Now I'm not sure. For now I'm going to leave this answer and then I may delete it if another, correct, idea comes up
When working on a handlebars demo, I am noticing that the stylesheet does not show up when viewing the page. I have provided links to the code and the live page below. Does anyone know why the stylesheet isn't working?
The code is here:
https://github.com/sutri001/DA670/tree/master/week7_handlebars
The live page is here:
http://67.205.184.187:1000
Your rendered page does have the link tag that references the stylesheet you're looking for. What's happening is your server is throwing a 404 when a request is made for the stylesheet.
Looking at the code for your express server, I see you're telling express to serve files staticly from the public directory (good)... but you don't have a public directory, and even more your css directory is located outside of such a place.
My advice is to move your css directory into a new public directory (so you'll have public/css/style.css). That should resolve your issue.
Also, remember that it's the browser that's handling your link tags, not the server! That means browsers are currently trying to go to http://yoursite/../../css/style.css. Thankfully your browser understands how to handle this, but this is definitely not what you want.
Your link tag's href attribute should be set to /css/style.css because, from the browser's perspective, that's where the stylesheet is located.
I have a very strange issues in production servers. In VbScript application in pages i've linked it to js or css resources. Somehow part of the url, for download js or css resource, connect with some other part of code on the page or in included pages (this is seen in logs already). Other part can be js, css or html code.
For example: full path to resourse
../mydomain/admin/somefolder/css/la-core-main.css
Instead this in logs i see error (System.Web.HttpException (0x80004005): A potentially dangerous Request.Path value...) with next URL:
../mydomain/admin/somefolder/css/lead>
Without a code example it's hard to nail down your problem. On your activation of the download links target _blank instead so it does not try to navigate the user to the file directly.
Download
EDIT: to better address OP's question.
Includes for CSS and javascript only fail due to improperly linked paths. It is possible that you are trying to link the css and js files from the server end of the folder structure and not the client end of the folder structure. Trying to link the css and js files from the server end, you would use the Scripting.FileSystemObject to read in the files and populate them as part of the page. You would NOT use <link rel""...> or <script src=""...> to connect the scripts in the vbscript/asp code.
If you are trying to connect the scripts to the website on the client end, you need to verify the paths of the js and css documents from the website directly. Open the webpage from your browser and build off of the direct path from the website. So that way it specifically matches the containing folders in the website.
Examples:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Final note: Also verify that your js and css documents are in your hosting web application folders so that you can actually get to them via website.
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/
I have a plugin that runs off my customer's websites. The plugin is at http://mycompany.com/Tool.js, and needs to pull in some images. The problem is that the javascript seems to try to pull images from the customer's site, rather than from my own site. Here is the JS:
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(/Resource/Button.png);
In the above JS, the retrieval URL is CUSTOMER.com/Resource/Button.png (the site where the plugin runs), rather than my sites mycompany.com/Resource/Button.png.
Note that I cannot use absolute paths, as they become a pain between environments (test/prod) and also because my image retrieval must use http/https based on the client environment (otherwise you can errors if http is used on an https site).
Just replace it with
background-image:url(http://mycompany.com/Resource/Button.png);
Instead of using Javascript or anything you can actually just use // before the URL in the stylesheet and it will use http or https depending on how the client came to the site. You can do the same on the HTML page when you link the stylesheet to the page. So your HTML page will be:
<link href="//mycompany.com/stylesheet" />
And in your stylesheet you can have
background-image:url(//mycompany.com/Resource/Button.png);
edit
I forgot to mention that you can do the same when attaching javascript files to the page as well.
For eg: <script type="text/javascript" src="//mycompany.com/javascript"></script>
The javascript will run in the context of where it runs, not where it is downloaded from. If the resource URL is not absolute, the domain will be assumed to be the one your browser is currently accessing.
You'll need an absolute URL. E.g. http://mycompany.com/Resource/Button.png
absolute path should be included!!
switch (window.location.protocol) {
case "http:":
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(http://yourcompany.com/Resource/Button.png);break;
case "https:":
button.style.cssText = 'position:absolute;top:-20px;right:-20px;background-image:url(https://yourcompany.com/Resource/Button.png);break;
}