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.
Related
I have a Blazor Server 6.0 app where I have links to download .msg files.
I have setup IIS to serve that mime-type trying both application/octet-stream and application/vnd.ms-outlook (and restarting IIS)
I have also tried to put in web.config the staticcontent tag like suggested here:
.msg file gives download error
And obviously in my program.cs I have app.UseStaticFiles();
I try to put the .msg in a non-blazor app and they work ok, so I think is not IIS related
So why I cannot download (or open automatically in outlook) this type of file, while other (docx, pdf, zip, etc.) are Ok ?
ASP.NET Core -- on the server side -- also needs to know about the files it has to serve. You can enable serving all unknown file types (I'd rather not include the relevant code as it is a major security risk), or you can add you own additional mappings like so:
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".msg"] = "application/vnd.ms-outlook";
// app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions()
{
ContentTypeProvider = provider
});
More info in the official docs: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-7.0#fileextensioncontenttypeprovider
Additionally, Blazor Server registers custom options for serving static files (like .server.js, which is different from just .js). It's not directly exposed as a public API to configure, but you can look at the source here as to what the AddServerSideBlazor extension method actually does. The solution there relies on you calling UseStaticFiles without explicitly specifying the options, so that it can retrieve the StaticFilesOptions instance from DI.
Armed with this knowledge, you can override an already configured options instance as follows:
builder.Services.PostConfigure<StaticFileOptions>(o =>
{
((FileExtensionContentTypeProvider)o.ContentTypeProvider).Mappings[".msg"] = "application/vnd.ms-outlook";
});
This configures the already initialized options instance registered in the DI (after all other configurations happened on it, thus PostConfigure).
Note that if you would for whatever reason decide to use a different IContentTypeProvider, the unsafe cast above would need to be revised as well.
I'm running a few node.js servers on the same framework right now. Somewhere along the lines of code of the framework I have this little snippet:
//...
if (subdomain.staticFolder) {
let relativePath = subdomain.staticFolder + path.sep + path.normalize(url);
if (fs.existsSync(relativePath)) {
let fileStats = fs.statSync(relativePath);
if (fileStats.isFile()) {
//...
This snippet is located inside the handler that manages request traffic. In a nutshell, what it's doing is looking inside a static/ folder for the domain and seeing if any file matches the request.
My concern is that a malicious user may come along and attempt to gain access to the web server's files, exploiting this lookup method of static files. For example:
https://www.example.com/../index.js
https://www.example.com/../serverStructure.json
Is this possible, or am I just worrisome? And, if it is possible, what are some potential solutions? Would moving static files to an S3 bucket be viable? Even if it isn't possible, is this still bad backend practice anyway?
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'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)
How do I make WKWebview use local .js, .css and/or local image files, in place of remote files, in order to make the web page load faster.
Also, I noticed NSURLProtocol methods (when implemented through register class) do not get called when WKNavigationDelegate methods are implemented, any idea on why?
In iOS 9 API there is a new method for loading local resource
/*! #abstract Navigates to the requested file URL on the filesystem.
#param URL The file URL to which to navigate.
#param readAccessURL The URL to allow read access to.
#discussion If readAccessURL references a single file, only that file may be loaded by WebKit.
If readAccessURL references a directory, files inside that file may be loaded by WebKit.
#result A new navigation for the given file URL.
*/
#available(iOS 9.0, *)
func loadFileURL(URL: NSURL, allowingReadAccessToURL readAccessURL: NSURL) -> WKNavigation?
After going through a lot of documentation, I realized/learnt that I'll not be able to track URLs if I use WKWebviews. I have to resort to UIWebView for the moment.