After successfully adding Helmet to my Node/Express/EJS project and configuring my CSP to allow inline scripts, styles, and certain external sources on my Windows laptop in Opera, Chrome & Edge, I encountered a problem when connecting via iOS Safari on mobile. Despite Bootstrap loading correctly, it seems none of my custom stylesheets or scripts are being applied.
Here is the code snippet I am currently using:
app.use(
helmet({
contentSecurityPolicy: {
directives: {
scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "*.googleapis.com", "*.jsdelivr.net", "*.jquery.com"],
styleSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "*.googleapis.com", "*.jsdelivr.net", "*.jquery.com"],
baseUri: ["'self'"],
fontSrc: ["'self'", "https://fonts.gstatic.com"]
}
}
})
)
Additionally, I observed that whenever I click a link on my site using iOS Safari, it automatically switches to HTTPS even though I'm running on an HTTP localhost server. This behavior may be causing my stylesheet links to be requested over HTTPS rather than HTTP, which could explain why they are not loading properly.
<link rel="stylesheet" href="/style.css" />
Could Safari possibly be trying to access
https://(laptop-private-ip):3000/style.csshttp://(laptop-private-ip):3000/style.cssIf anyone has any insights or suggestions on how to troubleshoot this issue, I would greatly appreciate the help. Thanks in advance!