I'm fairly new to the world of JavaScript and ExpressJS. My goal is to create a web application with a working login page. I'm currently in the process of setting up the helmet JS middleware to allow for external CSS and scripts. However, despite my efforts, I keep encountering this issue:
Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self'”
.
I'm having trouble pinpointing where exactly the inline script is located within my HTML file.
Here's a breakdown of my folder structure:
-> public
-> Login_Page_template
- logo.jpg
- login_page_client.js
- static_login_page.html
- static_login_styles.css
-> src
-> routes
- LOGIN_PAGE.js
- Entry_Point.js
The contents of Entry_Point.js
are as follows:
// Date Created: September 11 2024
// Date Last Updated: September 23 2024
const express = require("express");
<!-- More code here -->
LOGIN_PAGE.js
consists of:
// Date Created: September 16 2024
// Date Last Updated: September 24 2024
const express = require("express");
<!-- More code here -->
As for the content of static_login_page.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- HTML content goes here -->
And the JavaScript code in login_page_client.js
:
// Date Created: July 23 2024
// Date Last Updated: August 26 2024
const login_form = document.querySelector('form');
<!-- More JavaScript code here -->
One observation worth noting is that when I apply the styles using Fire Fox's append style sheet option, the styles load without any issue or error.