When using npm, run npm audit to check for vulnerabilities in your dependencies.
Run it with --fix to automatically fix issues when possible.
When loading a 3rd party-script like this:
<script defer
src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js">
</script>
What happens if unpkg.com gets hacked and the script is replaced with a malicious one?
To prevent this, we can use the integrity attribute:
<script defer
src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
integrity="sha384-R1+zrYTQk6y5F9GQMXZ..."
crossorigin="anonymous">
</script>
The integrity attribute contains a cryptographic hash of the file.
The browser will check the file against this hash, and if it doesn't match, the file won't be loaded.
In this case, just add the ?meta query parameter to the URL to get a JSON object containing the hash:
https://unpkg.com/smoothscroll-polyfill@0.4.4/?metaWhat are Security Headers?
Security headers are HTTP response headers that help protect your website from common attacks by controlling browser behavior.
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Forces browsers to use HTTPS, protecting against protocol downgrade attacks and cookie hijacking.
If missing: Attackers can intercept traffic over HTTP, making users vulnerable to man-in-the-middle attacks.
HSTS Preloading: Submit your domain to hstspreload.org to be built into browsers.
Prevents your site from being embedded in iframes, protecting against clickjacking.
X-Frame-Options: DENY
If missing: Attackers can trick users into clicking hidden buttons or links on your site.
Stops browsers from MIME-sniffing a response away from the declared content-type.
X-Content-Type-Options: nosniff
If missing: Browsers may interpret files as executable scripts, increasing risk of attacks.
Controls how much referrer information is sent with requests, protecting user privacy.
Referrer-Policy: no-referrer
If missing: Sensitive URLs may be leaked to third-party sites.
Explicitly controls link security behavior (though modern browsers default to safe behavior).
<a href="https://external-site.com" target="_blank"
rel="noopener noreferrer">External Link</a>Restricts access to browser features like camera, microphone, geolocation, etc.
Permissions-Policy: geolocation=(), camera=()
If missing: Malicious sites may abuse browser features without user consent.
accelerometer=(), ambient-light-sensor=(),
autoplay=(), battery=(), camera=(), cross-origin-isolated=(),
display-capture=(), document-domain=(), encrypted-media=(),
execution-while-not-rendered=(), execution-while-out-of-viewport=(),
fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(),
magnetometer=(), microphone=(), midi=(), navigation-override=(),
payment=(), picture-in-picture=(), publickey-credentials-get=(),
screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(),
xr-spatial-tracking=()Content-Security-Policy (CSP) is a powerful security header that helps prevent cross-site scripting (XSS), data injection, and other attacks by specifying which sources the browser can load resources from.
Why use CSP?
Fallback for other resource types if not specified.
Content-Security-Policy: default-src 'self'
Controls allowed sources for JavaScript.
Content-Security-Policy: script-src 'self' https://apis.example.com
Controls allowed sources for CSS.
Content-Security-Policy: style-src 'self' https://fonts.googleapis.com
Controls allowed sources for images.
Content-Security-Policy: img-src 'self' data: https://images.example.com
Base64-encoded images embedded directly in HTML/CSS using the data: scheme.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="1x1 pixel">Common use cases:
Controls allowed endpoints for XHR, WebSockets, and fetch.
Content-Security-Policy: connect-src 'self' https://api.example.com
Content-Security-Policy:
font-src 'self' https://fonts.gstatic.com;
media-src 'self';
object-src 'none';
frame-src 'self' https://trusted-frames.example.com
If missing: Attackers can inject malicious scripts, styles, or other resources, leading to data theft, site defacement, or malware distribution.
Tips:
Configurable CSP with secure defaults, allowing editors controlled exceptions per page.
Approach:
# Default strict policy
Content-Security-Policy: default-src 'self'; script-src 'self'; img-src 'self' data:
# Page-specific relaxation (editor configurable)
Content-Security-Policy: default-src 'self'; script-src 'self' https://widgets.example.com; img-src 'self' data: https://cdn.images.comWhile many security principles apply to both frontend and backend, backend developers should pay special attention to the following areas:
Rate limiting restricts how many requests a user or client can make to your API in a given time period.
Why is rate limiting important?
Best Practices:
Brute-force attacks occur when an attacker tries many username/password combinations in rapid succession to gain unauthorized access.
Best Practices:
Example: Lock an account for 15 minutes after 5 failed login attempts.
CORS controls how web applications interact with resources from different origins (domains).
Best Practices:
Access-Control-Allow-Origin to specific domains, not *
Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Session Management:
File Upload Security:
Security Testing:
Keeping your web application secure is an ongoing process. Here are some do's and don'ts to help maintain a strong security posture:
Do's:
Don'ts:
Recommended Tools:
We might consider: