A mixed-content is when a resource is loaded with the HTTP protocol, from a website accessed with the HTTPs protocol, thus mixed-content are not encrypted and exposed to MITM attacks and could break the entire level of protection that was desired by implementing encryption with the HTTPs protocol.
The main threat with mixed-content is not only the confidentiality of resources but the whole website integrity:
There is a risk if you answered yes to this question.
Implement content security policy block-all-mixed-content directive which is supported by all modern browsers and will block loading of mixed-contents.
In Express.js application the code is sensitive if the helmet-csp or helmet middleware is used without the blockAllMixedContent directive:
const express = require('express');
const helmet = require('helmet');
let app = express();
app.use(
helmet.contentSecurityPolicy({
directives: {
"default-src": ["'self'", 'example.com', 'code.jquery.com']
} // Sensitive: blockAllMixedContent directive is missing
})
);
In Express.js application a standard way to block mixed-content is to put in place the helmet-csp or helmet middleware with the
blockAllMixedContent directive:
const express = require('express');
const helmet = require('helmet');
let app = express();
app.use(
helmet.contentSecurityPolicy({
directives: {
"default-src": ["'self'", 'example.com', 'code.jquery.com'],
blockAllMixedContent: [] // Compliant
}
})
);