Setting a CORS header, and allowing my Javascript modules that are inlined

jkirkerx

I'm at the end of the project finally, and I'm putting the wraps on it. I started programming headers in PHP for cache, and then it expanded into security as well. I built a system of ECMAScript modules, and my entry point module is being blocked by my CORS header. I can't figure this out, and could use some guidance on the subject. Here is what I have. /assets/scripts/core /assets/scripts/core/coreExternal.module.js coreExternal.module.js content

window.coreExternal {
setCommissionStartDate,
setCommissionStopDate, and so forth

On the WebPage, I use a script tag to load coreExternal This call to the module, makes the window.coreExternal functions look like dangerous inlined script. This is my PHP header for CORS

$nonce = base64_encode(random_bytes(16));
header("Content-Security-Policy: default-src 'self' *.fontawesome.com; script-src 'self' 'unsafe-inline' /pcad/assets/scripts/core/ https://kit.fontawesome.com/ 'nonce-".$nonce."' 'sha256-...'; style-src 'self'; img-src 'self' data:;");

From reading the documentation from Content Security Policy, I added 'unsafe-inline' which should sledge hammer out my modules, but they are still blocked. Error Message: Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). Source: coreExternal.setCommissionStartDate(this… assignCommission.phtml My Questions I don't do CORS stuff everyday, just once every few years, and this is the first time I've done it in code, and not used the web server to program this. Perhaps I have the concept going but failed in execution, well I'm sure that's it. 1. Do I need the access-control headers? 2. Did I paint myself into a corner using modules the way I did? 3. Is one policy canceling another policy? I still have issues with these error messages as well

Quote:

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). Source: --bs-breadcrumb-divider: '>'; viewVendors.phtml

The manual style I added to the table element

Quote:

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). Source: width: 100%; border: none; viewVendors.phtml

These are my headers in PH

jkirkerx

I replaced the script tags on the web pages to this ...

So I don't have COR errors, I have Content-Security-Policy errors. This error is from the input element onchange event, where I wasn't able to add an event listener, because of the data I needed to popular the function call. I'll have to rethink this. Content-Security-Policy: The page’s settings observed the loading of a resource at inline (“script-src”). A CSP report is being sent. Source: coreExternal.setCommissionFinishedDate(t… 72 assignCommission.phtml OK, so this is not easy, and will require me to do way more research on the subject, and rethink some of the code in this project.

If it ain't broke don't fix it Discover my world at jkirkerx.com

jkirkerx

This is what is being outputed by the web server IIS server on server somnething version. { "name": "content-security-policy", "value": "default-src 'self'; script-src 'self' swanpools-pcad-dev.occloud9.com; style-src 'self' 'unsafe-inline'" }, Not even close to the header I wrote in PHP. I looked at IIS and didn't see any prepared headers. I'll dig down in PHP.ini and expand my search. And run the header in report only mode until I fix it. Chrome is telling me I'm in report only mode, but not Firefox.

If it ain't broke don't fix it Discover my world at jkirkerx.com

jkirkerx

I ended up with this, a compromise between using a hammer to nail it through with no more console errors, and fixing several security issues for the better. By hammering it, I can get the app running for the owner to evaluate and test, and then consider more security fixes and upgrades. Font-Awesome or the FortAwesome free version I removed all the Font-Awesome errors, but removing the all.min.js JavaScript file from the header elements. Turns out I don't need that JavaScript, and what it does is this.. Instead of using the fonts from Node_Modules, it fetches the latest version of the fonts and other stuff, to replace what Node_Modules has, and does things like monitor the use of the product, and causes licensing issues where it's no longer the free version. Well, the files it fetched were the free version files at least, so I got something right that I tossed in the trash. Diagnostics I used Mozilla FireFox at first, but it gave me generic information back, that never changed. I assume the headers I was inspecting was for public consumption. I ended up having to use Chrome in Developer mode, to see the real headers being returned from the response of the web page loading. ECMA Script Modules I used this to solve that issue in CSP. The use of a nonce. Declaring a master module that references child modules on a web page.

script type="module" src="/assets/scripts/core/core.module.js" nonce="">

Inline scripts I used this in the CSP rule below, to solve script within a element, calling onclick or onchange

script-src-elem 'self' 'unsafe-inline' 'unsafe-hashes';

onclick="core.setProjectType('', 'landscape')"

SVG like spinners and things you embed on the web page

img-src 'self' data: w3.org/svg/2000;

Warning This is not my best work, and not completed yet, but gets the project back up and running so I can finish it and be done with it. This work does leave me with a little more work to beef up the security some more, but on my terms and not the web server or browsers terms. If your clueless about this subject, then you can use this as a reference to model something for yourself. Remember I'm not an expert on this subject, but do understand the point. And I spent many hours doing research and reading, plus testing. It doesn't matter that this is PHP, because the principals are the same with most w