A posthtml plugin create whitelist for specific inline scripts,styles,images,media using a cryptographic nonce
The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks (XSS).
Used in conjunction with the
middleware
npm i -S posthtml posthtml-nonceNote: This project is compatible with node v6+
import {readFileSync, writeFileSync} from 'fs';
import posthtml from 'posthtml';
import posthtmlNonce from 'posthtml-nonce';
const html = readFileSync('input.html', 'utf8');
posthtml()
.use(posthtmlNonce({tags: ['links'], nonce: '4f90d13a42'}))
.process(html)
.then(result => {
writeFileSync('output.html', result.html);
});input.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img data-src="logo.svg" alt="">
<script src="script.js"></script>
</body>
<html>output.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" nonce="4f90d13a42">
</head>
<body>
<img data-src="logo.svg" alt="">
<script src="script.js"></script>
</body>
<html>will be added nonce attribute with nanoid
Type: Array(required)
Default: []
Description: You can also expand the list by adding the tags you need...
Type: String(required)
Default: ``
Description: nanoid