I'm doing a node project where I expose my public folder like:
app.use(express.static(path.join(__dirname, '/public')))
So now, all my public files are accessible through localhost:8080/*
I have also created a folder called "views" where I save private views, javascript and css files associated with them. They are private views so I don't want any user to access them.
As I have html linked with my css files and javascript, when the browser try to GET them, it says "not found" because they are not in the public folder.
I'm sending the html as sendFile in the express route.
Is there any way to put all files in the public folder and then protect them for not being accessible to public users? Or is there any alternative to sendFile, so the file is rendered locally and it doesn't need to request the css and javascript files
Thank you in advance
Views are technically private. Because they are rendered server-side, and not directly accessible by the visitors.
But you generally don't want stuff like Javascript, CSS nor views to be private. They will be seen anyway by the user. The only reason to have things like Node.js views private is the fact that they need be rendered by Node.js prior sending them to the user.
If you have private files, you might want to do same.
Otherwise, simply place them on the /public folder. You should not be hiding any secrets inside your JS / CSS code.
Edit (following comment):
You have a couple ways to do that.
Either you build a unique response that contains all necessary HTML / views - CSS - JS.
render('view.ejs', { css: 'body { color: blue }' })
You will need render that variable into your view, just like you might already be doing with your other views.
You might also want to read it from a file:
fs.readFile(`${__dirname}/css/style.css`, (error, styles) => { ... }
Or you handle each file request separately:
Node.js - external JS and CSS files (just using node.js not express)
(if you use Node.js views simply render these one instead of HTML files)
Related
I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.
Let's say I have a directory called staticWebPage that contains:
an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files
Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.
I'd like to do something like this:
import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'
router.map({
'/acomponent': {
component: AComponent
},
'mystaticwebpage': {
component: MyHtmlFile
}
})
Of course, this doesn't work as I can only reference Vue components in router.map.
Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?
So for your case you can do something that uses Webpack’s code-splitting feature.
More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.
In large applications, we may need to divide the app into smaller
chunks and only load a component from the server when it’s actually
needed. To make that easier, Vue allows you to define your component
as a factory function that asynchronously resolves your component
definition. Vue will only trigger the factory function when the
component actually needs to be rendered and will cache the result for
future re-renders.
It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.
I've read that files in the public folder are accessible via a web browser in Laravel. When I type in the path to files in my public folder, I don't see the file, unless I defined the path in the routes.
I am making a downloads page so that a user can download encrypted/classified materials via a from.
I do not want the ability for a user to access the files in any other way other than the download form or other controlled methods.
Do I need to create lets say a private folder and store the files their. If I do, will I still have access to the files in the back end?
Or are files in the public folder not accessible unless defined by the routes? If thats right could I just store the files under public?
Files under public folder are accessible by anyone, unless your webserver has a policy set to a particular directory.
If you are currently not able to access a file in your public folder is because, maybe, you are not writing the url correctly, ie:
A file in
/var/www/myapp/public/img/logo.png
Will be accessible via:
http://myapp.com/img/logo.png
Note that the public part of your folder is not present in your URL ONLY IF your webserver is correctly configured and your .htaccess file is in place and able to rewrite your URL.
For sensitive files, what you can do is to store them insite your app folder (or any other folder outside public), where just your application will have access to, something like this can be ok:
/var/www/myapp/app/storage/<create a new folder here>
And then, yes, create a route to read and present your secure files:
Route::get('readfile/{fileName}', ['before' => 'auth', 'use' => 'ReadFileController#read']);
The filter 'before' => 'auth' will assure that one not authenticated will never be able to access a file.
In your controller you could do something like this to check if one can see a file:
class ReadFileController extends Controller {
public function read($fileName)
{
if(Auth::user()->id == 1) // of course this is not a good way, just an example
{
return $this->getFile($fileName);
}
else
{
return Response::make(null, 403); // forbidden
}
}
private function getFile($fileName)
{
...
}
}
Also, you can use authentication "middelware" in your routes to add better access control.
Route::get('routeName', ['middleware' => 'auth', 'uses' =>'XController#action']);
Hi I created a sails app completely for api using. It doesn't has a view file, now I have a html, css, js directory structure, which I want to show as a front page of my app. My html directory structure is following.
+-ApiDocumentationApp
|
-script
|
-css
|
-images
|
--index.html
Now I don't want to use any templating engine like jade or ejs. Also I don't want to change the directory structure to sailsjs', asset and view system. Is there any way I can do it inside sailsjs?
Whatever your reluctance may be, by far the easiest solution here is to place all of your assets (scripts, css, images and index.html) under the /assets folder of your Sails app, and remove the default / route in /config/routes.js. Then your index.html file will be served up by Sails by default.
The alternative would be to modify the default Gruntfile.js (in Sails v0.9.x) or the individual Grunt tasks under /tasks/config (in Sails v0.10.x) to point directly to your top-level asset folders and files rather than ./assets. It's do-able, but error prone and less sustainable!
What is the procedure for securing static assets (javascript and css) behind the firewall?
I have an admin section which uses javascript heavily. I don't really want to expose the code to the public.
I currently compile all my javascript using assetic to files in /web/admin/js/xyz.js
Is there a simple way to do this that I'm overlooking?
You could use a controller to serve the static file and secure that controller. Something like:
/**
* Serves static javascript file.
* We have configured /secure to be secured by some firewall
*
* #Route("/secure/xyz.js", name="static_xyz")
*/
public function staticXyzAction()
{
$headers = array(
'Content-Type' => 'text/javascript',
);
return new Response(file_get_contents($this->get('kernel')
->getRootDir().'../web/admin/js/xyz.js'), 200, $headers);
}
This is just an example with the data you provided. Obviously in your final code the file being served should be located in some directory which is not directly accesible by the web server.
The obvious downside to this approach is performance. PHP is much slower for serving an static file than your web server but depending on your load this may not be an issue.
Why do you want to "hide" these admin js files? The js should not perform critical auth or check rights, but just converse with your Sf2 Apis / Controllers which do that, and should not be critical if read. This is a conception matter.
If you are afraid that a lambda user / hacker sees these js files, you could set a very complicated random js output in Assetic. The Symfony .htaccess allows user to access static files only if they know their exact url, they cannot list your repository where you store your builded assets, the firewall catch that.
And last security mesure, use yui-minifier with Assetic to minify and obfusacate your builded js files.
I've got a weird issue which I can't seem to figure out with expressjs. I've specified a public folder for all static files such as js, css and images. I'm using app.use(express.static(__dirname + '/public')); to specify the folder. This works perfectly except for one case.
Inside the public folder, I've got 3 folders called js, css and images. Within one of my css files, I'm doing background-image: url(/images/bg.png) no-repeat; but this url is not resolving and the image is not showing on the page.
However, if I do something like img(src='/images/bg.png') from within one of my views, the image shows. I'm assuming that this has to do with the fact that I'm linking from a static file and node/express are ignoring all routes(?) from within the static files.
How would one go about linking to images in css files located inside a static folder in express?
Your CSS urls are relitive to the STYLESHEET so the url you have is looking for the path /css/images/bg.png you want to have the url be ../images/bg.png