Skip to content

Commit

Permalink
Add test for external script/style hash generation
Browse files Browse the repository at this point in the history
This adds css-loader and mini-css-extract-plugin in order to test hash
generation for CSS files.
  • Loading branch information
sersorrel committed Mar 17, 2021
1 parent 591276c commit ee19fd5
Show file tree
Hide file tree
Showing 7 changed files with 231 additions and 2 deletions.
162 changes: 162 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"devDependencies": {
"babel-jest": "^26.6.3",
"codecov": "^3.8.1",
"css-loader": "^5.1.3",
"eslint": "^7.16.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^7.1.0",
Expand All @@ -47,6 +48,7 @@
"html-webpack-plugin": "^5.0.0-alpha.15",
"jest": "^26.6.3",
"memory-fs": "^0.5.0",
"mini-css-extract-plugin": "^1.3.9",
"prettier": "^2.2.1",
"webpack": "^5.10.1",
"webpack-sources": "^2.2.0"
Expand Down
42 changes: 42 additions & 0 deletions plugin.jest.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ const path = require('path');
const crypto = require('crypto');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { RawSource } = require('webpack-sources');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
WEBPACK_OUTPUT_DIR,
createWebpackConfig,
Expand Down Expand Up @@ -144,6 +145,47 @@ describe('CspHtmlWebpackPlugin', () => {
});
});

it('inserts hashes for linked scripts and styles from the same Webpack build', (done) => {
const config = createWebpackConfig(
[
new HtmlWebpackPlugin({
filename: path.join(WEBPACK_OUTPUT_DIR, 'index.html'),
template: path.join(
__dirname,
'test-utils',
'fixtures',
'external-scripts-styles.html'
),
}),
new MiniCssExtractPlugin(),
new CspHtmlWebpackPlugin(),
],
undefined,
'index-styled.js',
{
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
}
);

webpackCompile(config, (csps) => {
const expected =
"base-uri 'self';" +
" object-src 'none';" +
" script-src 'unsafe-inline' 'self' 'unsafe-eval' 'sha256-IDmpTcnLo5Niek0rbHm9EEQtYiqYHApvDU+Rta9RdVU=' 'nonce-mockedbase64string-1' 'nonce-mockedbase64string-2';" +
" style-src 'unsafe-inline' 'self' 'unsafe-eval' 'sha256-bFK7QzTObijstzDDaq2yN82QIYcoYx/EDD87NWCGiPw=' 'nonce-mockedbase64string-3' 'nonce-mockedbase64string-4'";

expect(csps['index.html']).toEqual(expected);
done();
});
});

it('inserts a custom policy if one is defined', (done) => {
const config = createWebpackConfig([
new HtmlWebpackPlugin({
Expand Down
13 changes: 13 additions & 0 deletions test-utils/fixtures/external-scripts-styles.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en-US">
<head>
<meta name="author" content="Slack">
<title>Slack CSP HTML Webpack Plugin Tests</title>
<link rel="stylesheet" href="https://example.com/example.css">

<script type="text/javascript" src="https://example.com/example.js"></script>
</head>
<body>
Body
</body>
</html>
1 change: 1 addition & 0 deletions test-utils/fixtures/index-styled.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
require('./index.css');
3 changes: 3 additions & 0 deletions test-utils/fixtures/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
color: red;
}
10 changes: 8 additions & 2 deletions test-utils/webpack-helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,22 @@ function webpackCompile(
* @param {string} publicPath - publicPath setting for webpack
* @return {{mode: string, output: {path: string, filename: string}, entry: string, plugins: *}}
*/
function createWebpackConfig(plugins, publicPath = undefined) {
function createWebpackConfig(
plugins,
publicPath = undefined,
entry = 'index.js',
extra = {}
) {
return {
mode: 'none',
entry: path.join(__dirname, '..', 'test-utils', 'fixtures', 'index.js'),
entry: path.join(__dirname, '..', 'test-utils', 'fixtures', entry),
output: {
path: WEBPACK_OUTPUT_DIR,
publicPath,
filename: 'index.bundle.js',
},
plugins,
...extra,
};
}

Expand Down

0 comments on commit ee19fd5

Please sign in to comment.