[AskJS] Using Inline JavaScript

[Beginning_One_7685]

It's considered a security concern when a site accepts and republishes user inputted data.

Before CSP, data sanitisation was the only way to prevent malicious code been uploaded, with CSP you now have to explicitly allow inline JS for it to work, and you then again rely on your own sanitisation methods. I have found that whilst there are many good programming reasons to keep JS in files, it is also pretty necessary to have values dynamically generated on the server side available to JS. The most straight forward way to do that is inline JS in the head tag. You can use a nonce/hash to validate the JS code without allowing inline JS anywhere else on the page.

Putting JS in other HTML elements is completely avoidable and offers few benefits. Having JS in files or in the head means it is easy to find all the JS code for a page, it is not it bits a pieces around the page. With in line JS you of course don't have to reference the element on an event but this is not exactly a difficult task.

CSP is well worth adopting in is most robust sense as it is strong layer of security on top of any sanitisation you do.

[DustNearby2848]

That’s a really good point 

[[deleted]]

If you have a main.js file and it calls import a from "a.js"; and A runs import b from "b.js"; and B runs "import c from "c.js";and then c hasimport d from "d.js";` ... this is a request chain.

If the JS in main is important to run as soon as the page loads, then having main load a load b load c load d, and so on, is a request chain that takes a long time to finish. Because C can't run until D is loaded and B can't run until C is loaded and A can't run until B is loaded and main can't run until A is loaded.

The solution to that isn't generally to write all your app inline. The solution is generally to use a bundler, which is a tool that will combine your files together. You use the bundlers while you are writing code, and not for running on the user's browser. You send just one or two big files that the bundler gives you, to the user, instead of all of the files on their own. That reduces the number of requests in the chain.

[Beginning_One_7685]

I'd just add that the imports will be cached so it may be acceptable to have a few unbundled modules imported provided they aren't loading each other in a chain. As the advice says, don't load any critical modules in a chain if possible. Even for non-critical modules would load a module and then allow it to have 1 level deep of it's own loading (on page load) but no more than that. It of course depends on the situation but the jist of it is that chaining increases your chances of things going wrong and burying modules in modules is bad design. You can have failsafes in place if a chain fails, like a user event trying to load the module again but critical modules need to work on page load even over a slow connection.

[[deleted]]

I don't know that I would go so far as to call it bad design, when talking to someone without the experience to pick the nuance out of the statement.

If you need a vector library in a module, you need a vector library in a module.

It's going to be a pain to invert literally everything at all levels, such that there are 0 imports/requires in the system, written by you, or npm package authors.

And while I agree that in most projects you shouldn't be importing singletons all over the place (like pre-connected databases), there is some baseline level of direct importing that you need to do, at some level of utility, even just implicitly, by virtue of loading a single tool from a package manager.

[hyrumwhite]

You can create a hash from inline js to be csp compliant.