Call an external .js script with cf

[idesdema]

I have seen several sites use a script declaration at the top of their page to an external file with a .php extension.  I did a little research and found that they are just calling a .js file with that php page so the contents of the .js is not viewable.

Can you do the same thing with coldfusion?

[JMF3]

Yes, a JS file can be named with a .cfm extension and included as such in a

<script type="text/javascript" tag

[idesdema]

I thought this may be the approach... however it did not work.  I took the contents of the original .js, saved it as .cfm,

and then called it using <script type="text/javascript" src="myjsfile.cfm"></script>

It did not work.

[Adam Cameron.]

What do you mean by "did not work"?

--

Adam

[idesdema]

Adam, more specifically, I meant that when I added the .cfm to the script reference, it did not load like it did when I called it with the .js extension.   <script type="text/javascript" src="myjsfile.cfm"></script>.  Maybe I'm supposed to do something else to get it to load correctly?

I am able to use the suggested cfinclude method and if I think of some clever ways to protect the file from certain users or from being used from outside my domain I'll be pleased.

I do agree with you Adam that this isn't entirely answered.  Someone could still easily navigate to the cfm file and see the javascript code....

[Adam Cameron.]

idesdema wrote:

Adam, more specifically, I meant that when I added the .cfm to the script reference, it did not load like it did when I called it with the .js extension.   <script type="text/javascript" src="myjsfile.cfm"></script>.  Maybe I'm supposed to do something else to get it to load correctly?

When you say it did not load, did it 404?  500? Was it not JavaScript?

As we're not looking over your shoulder, you need to be a bit more verbose in your descriptions of what's going on 😉

--

Adam

[Adam Cameron.]

How does that work?  The JS has to be delivered to the browser as JavaScript, so irrespective of what the URL is, it has to deliver JavaScript.

What's an example of one of these URLs?

To answer your question, yeah of course you can do it with CF.  The source URL for a SCRIPT tag can be anything you like, as long as it returns JavaScript.

--

Adam

[idesdema]

Hi Adam.  Here is the page that explains the php method...

http://www.javascriptkit.com/javatutors/externalphp.shtml

[Adam Cameron.]

In what way does that make "the contents of the .js [...] not viewable" ?

--

Adam

[idesdema]

I suppose the cfinclude method could work if you added some logic to the cf file that contains the javascript.  I think I can make that

work.

[Adam Cameron.]

Yeah, but don't.  That's a poor solution as you end up with your JS inline in your doc.  You don't want that, you want to refer to an external file.

--

Adam

[idesdema]

Adam, you are absolutely correct.  I used IE's view source function and like you said, the contents of my .cfm (which is really javascript) was all inline.

That's heading down the wrong path.

Again, I just want to do the same thing that php is doing here http://www.javascriptkit.com/javatutors/externalphp.shtml with coldfusion instead.

[12Robots · Accepted solution]

I think you misunderstood Adam.  The JS generated by the PHP is also viewable. You cannot hide JavaScript. If it needs to execute on the client, then the end user will be able to see it. Period.

[Adam Cameron.]

Yes.  *I* know that.  I'm trying to clarify why the OP thinks otherwise.

--

Adam

[12Robots]

Notice the lack of comma. 

I didn't say "I think you misunderstood, Adam", I said "I think you misunderstood Adam".  I was addressing the OP and stating that I thought he misunderstood you.  Sorry if that wasn't clear.

[Adam Cameron.]

Heh: fair cop.

So that was your cue to say "I think you misunderstand, Adam" 😉

--

Adam

[12Robots]

Anyway, to keep it from showing up inline with the CFM, and to make it work like the PHP example, you need to change the header information, like the PHP example is.

Header("content-type: application/x-javascript");

In CF you would use <cfheader>

<cfheader name="content-type value="application/x-javascript" />

This will tell the browser that it in a JS file and should not be loaded inline but should be referenced externally.

But note, this will not prevent your end users from being able to see the JS (just like with the PHP example)

[Adam Cameron.]

<cfheader name="content-type value="application/x-javascript" />

This will tell the browser that it in a JS file and should not be loaded inline but should be referenced externally.

I was sceptical of this, but I wanted to get home and try it before commenting.

Firstly, if one was just setting the MIME type of a response, wouldn't CFCONTENT be the better fit?  Sure, one can do it with CFHEADER, but CFCONTENT is specifically for effecting this sort of thing, really, innit?

Also, the thing that tells the browser to load the resource as an external JS file is the SRC attribute of the SCRIPT tag, and the MIME type is defined as the TYPE attribute in that.  One can set the MIME type of the returned JS as image/gif if one likes, and the browser will just go "yeah, nice try", and will treat it like JavaScript (interesting that doing this will defeat FireBug though).  Equally, it doesn't matter if the MIME type is specified or not: if one specifies an external file via the SRC attribute, it's treated as an external resource.  It's not like the browser loads it and then inserts it into the head block of the mark-up if one doesn't specify the MIME type.

So I think setting the MIME type (be it via CFHEADER or CFCONTENT) is one of those "for the sake of completeness" sort of things.  It's not a requirement.

Unless, Jason, there's some edge case or subtlety I'm not seeing here?

--

Adam

[12Robots]

I chose CFHEADER because the PHP example was using a header() command. I think ultimately the <cfcontent> method and the <cfheader> will result in the same changes to the HTTP response. 

As for my explaination of the content-type I misunderstood what the OP was saying. I thought he was saying that the result of the CFM page was rendering in the script attribute, i.e.:

<script src="alert(123)">

It was just a misunderstanding on my part. I just tested this myself and neither cfcontent or cfheader was required for it to work for me.

Thanks for the clarification.

[WolfShade]

js.cfm:

<script type="text/javascript">
 function doThis() {
   blah blah blah
   }
 function doThat(param1) {
   blah blah with param1
   }
function wiffleBallBat() {
   you get the point 
   }
</script>

index.cfm:

<html> <!--- don't forget to declare your doctype!  --->
  <head>
    <title>test</title>
    <cfinclude template="js.cfm">
  </head>
  <body>
      yadda yadda yadda
  </body>
</html>

The nice thing about doing it this way is that you can use CF variables in the JavaScript, CFLOOP, CFOUTPUT, etc.

[idesdema]

Adam and 12robots... sorry for wasting your time.  You guys are correct.

I did more research and found a lengthy thread about client side javascript... and what I've determined is that the code is viewable no matter what.

It seems like there are a lot of methods that developers use to delay the view/use of their javascript but the end result always seems the same.

I will go back and try the method 12robots suggests and see if that gives me any piece of mind.

Thanks everyone.

[12Robots]

These methods of creating the JS server-side are not to hide anythign, they give you the ability to create the JS code dynamically using variables from the server. It is very powerful and useful funcitonality, but it is not there for security.

If you do not need to generate the JS server-side, then there is no point to doing it.

Any code that needs to be secure *MUST* be on the server. 

[idesdema]

Well, I wanted to give what 12robots suggested a try and I can't seem to get it right.

Here is the .cfm include that I want to do the same as a .js would if I called it directly with the <script src

This is called was_js_once.cfm...

<cfheader name="Content-Type" value="application/x-javascript; charset=ISO-8859-1">
var i=0;

And my main.cfm page...

<html>
<head>
<cfinclude template="was_js_once.cfm">
</head>
<body>
Stuff
</body>
</html>

When I try to run the main.cfm page it opens a dialog box and asks if I want to open or save main.cfm.

[Adam Cameron.]

Try text/javascript.  It's not strictly speaking "correct", but it's perhaps more likely to work.

--

Adam

[12Robots]

try value="text/javascript"