Broken URLs for including js and css resources - javascript

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.

Related

JavaScript path doesn't load on Live Server extension (VS Code)

HTML and CSS files are working perfectly on my live server. But every time I lead to a .js script it will not be shown on my live server. If I try to load the .js file directly through the URL it shows "Cannot GET /line.js". I already tried out everything I've found on the internet but it's still not working. Here are the points I checked/did:
Installed Code Runner
Installed Node.js = node.js system path done
Settings = Live Server Config = specified browser
"liveServer.settings.CustomBrowser": "chrome" on JSON settings
.js file is in a separate folder and accessed via <script src="line.js"></script> on index.html
Chrome is set as default browser on my system
Thanks for your inputs.
If the js file is in a separate folder, you need to provide the exact route to the folder in the script tag, since in the current form it is trying to find the js file in the root directory. The script tag should look like this:
<script src="FOLDER_NAME/line.js"></script>
It's possible that your javascript file is being loaded before the HTML page is rendered. You can try adding "defer" to your script tag like this:
<script src="demo_defer.js" defer></script>

Unable to update a jquery script downloaded from github

I'm new to using jQuery.
I'm attempting to setup a local installation of code called 'scm-music-player' which I found on github.. There is a version of the script that works great using the author's server, the code seems to have external links to outdated jQuery scripts, I located within the zip file I download the files, but I just can not get it to work, I've been at it for days now.
Here is what I've done so far:
Downloaded files from here https://github.com/cshum/scm-music-player/archive/github.zip
Extracted & uploaded to my server root directory https://mohdish.com
Then ran the configuration script as advised http://scmplayer.co/#base=https://mohdish.com/
This generates a block of code:
Installed the generated script shown below in my index.php at the start of the script. It didn't work Next looked through the scripts and noticed that the config.js (root folder) file had outdated external links. I found all the scripts that were being referenced to on my server from the zip file I then made several attempts at modifying config.js with no success. All the links below point to the correct location, but I must be missing something.
This is what part of that looks like now: paths: {'jquery': 'https://mohdish.com/js/lib/jquery/jquery-1.8.2.min.js','jquery.ui': 'https://mohdish.com/js/lib/jquery/jquery-ui.min.js','jquery.scrollto':'https://mohdish.com/js/lib/jquery/jquery.scrollTo.min.js','underscore': 'https://mohdish.com/js/lib/underscore/underscore.js', 'knockout':'https://mohdish.com/js/lib/knockout/knockout-2.1.0.js','text': 'https://mohdish.com/lib/require/text.js','domready': 'https://mohdish.com/lib/require/domready.js'},
Anyone able to give me some advice?
<!-- SCM Music Player http://scmplayer.co -->
<script type="text/javascript" src="https://mohdish.com/script.js"
data-config="{'skin':'skins/aquaBlue/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'Million Dreams','url':'https://mohdish.com/ziv.mp3'}]}" ></script>
<!-- SCM Music Player script end -->
This is what I've modified, I am sure I've done something wrong!
{'jquery': 'https://mohdish.com/js/lib/jquery/jquery-1.8.2.min.js','jquery.ui': 'https://mohdish.com/js/lib/jquery/jquery-ui.min.js','jquery.scrollto':'https://mohdish.com/js/lib/jquery/jquery.scrollTo.min.js','underscore': 'https://mohdish.com/js/lib/underscore/underscore.js', 'knockout':'https://mohdish.com/js/lib/knockout/knockout-2.1.0.js','text': 'https://mohdish.com/lib/require/text.js','domready': 'https://mohdish.com/lib/require/domready.js'},
I expected it to work the same as it does on the author's server.
I did a lot of posts reading on Google, realised that I was incorrect in adding .js to the file path, when I took this off & corrected the path to the correct folders then the player started working, well on desktop devices anyway. Just need to work out why my site does not play on mobile devices.

Why isn't my stylesheet page working when using handlebars(javascript)?

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.

node.js to serve web page with access to resources on node.js server

I have an html page which references a number of local script files, and in turn those script files reference other local resources. By local I mean local to the html file.
Is it possible to serve such a web page using a node.js server approach? So far as I've been able to work out so far, the node.js server can return html content, but when that is displayed in the user's browser, I can't easily see how it would be able to reference the various scripts, because the html isn't being served from a normal folder on the server, with relative access to the folders and resources around it.
Is there any way of doing this, or is it mad to even contemplate such an approach? Better just to stick the html and related resources on a standard server and be done with it?
EDIT: I should explain that the motivation for serving the html from node.js is that I'm already serving images from the node.js server, where those images are generated using the same scripts that the html will be using. So there are two ways for the user to get the same content: as a png file or as a web page, and in both methods the work is done by the same core scripts... one has an html front end and the other has a node.js front end. So it would be nice to be able to keep all the code in a single location, rather than having to duplicate stuff and have it in two places, and have to remember to update the code in the secondary location when I update it in the primary location.
EDIT to add folder structure to help debug this (see comments below):
mypage.html
myLibFile.js
/lib/*.js (various js resources including jquery)
/lib/modules/*.js (various js resources)
/lib/fonts/* (various resources)
/themes/*.js (various js resources)
In mypage.html I have:
<script type="text/javascript" src="/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/lib/libFile.js"></script>
<script type="text/javascript" src="/lib/modules/modFile.js"></script>
<link href="/lib/fonts/awesomefont.css" rel="stylesheet">
<script type="text/javascript" src="/myLibFile.js"></script>
<script type="text/javascript">
$(function () { // On DOM ready...
// ... code ...
});
</script>
and in my node.js I have attempted to set up express as follows:
self.app.use(express.static(__dirname));
self.app.use('/lib', express.static(__dirname + '/lib'));
self.app.use('/themes', express.static(__dirname + '/themes'));
Of course your relative paths will work when using your own custom built nodejs server, which can serve files, .html .css .js and such.
I assume you have some sort of public folder from where you serve your assets. If you don't use any special routing magic, and just reffer to structure of your public folder, then relative paths in your HTML, will work.
<link rel="stylesheet" href="styles/main.css">
Code above could load something like: public/styles/main.css

How do I link JS external files outside of my PHP project root directory?

On my site I have my resources folder outside of the root, for example:
/var/www/html/ is the root directory
/var/www/resources/
I currently have a config file that sets the location of the library so I can include it with php like so:
defined("LIBRARY_PATH")
or
define("LIBRARY_PATH", realpath(dirname(__FILE__) . '/library'));
which works perfectly when I use:
<?php include_once(LIBRARY_PATH . "/file.php"); ?>
but it doesn't work when trying to add Javascript files:
e.g.
<script src="../resources/library/js/test.js"></script>
links to 'www.website.com/resources/library/js/common.js'
or
<script src="<?php echo LIBRARY_PATH; ?>/js/test.js"></script>
links to 'www.website.com/var/www/resources/library/js/test.js'
neither of which work.
Any suggestions on how I can do this without having the js files in or above the root?
Your JavaScript files have to be accessible to the browser because they are executed by the browser and not by the server.
This requires that they have a URL.
Putting the files under the webroot is the standard way to give a static file a URL.
Alternatively, you could write a program (e.g. in PHP) that will read the file and then output it's content to the browser. This is more complicated and makes dealing with cache control headers more fiddly and is not recommended.
Assuming you understand what you're doing and security implications of that!..
You create the linkjs.php script that takes the relative path to the script (from some root dir, perhaps /var/www/resource/js) as a parameter, like:
<script src="/linkjs.php?p=test.js">
In your PHP script you resolve the full file path, check that it's indeed a file under the root dir (to protect against ../ in the parameter), that it's readable by you PHP user, read the content and output it into the response. Don't forget to set content type to text/javascript of course.
Ideally, you should also provide proper caching headers based on the source file modification time, but that is a topic in itself. See the guidelines in other SO questions about proper caching headers for dynamic content.
The upside is that you can do on-the-fly script minification/combining/wrapping/substitutions if you like/need.

Categories