{"id":18131636,"url":"https://github.com/mrtc0/csp-html-webpack-plugin","last_synced_at":"2025-04-15T23:10:41.645Z","repository":{"id":181148879,"uuid":"666269847","full_name":"mrtc0/csp-html-webpack-plugin","owner":"mrtc0","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-07T04:30:30.000Z","size":976,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T11:11:58.215Z","etag":null,"topics":["content-security-policy","csp","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@mrtc0/csp-html-webpack-plugin","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrtc0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-07-14T05:34:41.000Z","updated_at":"2025-03-20T14:54:28.000Z","dependencies_parsed_at":"2023-11-06T14:29:37.743Z","dependency_job_id":"32e48ab8-80be-48ec-b2aa-7b2906fefb18","html_url":"https://github.com/mrtc0/csp-html-webpack-plugin","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.46875,"last_synced_commit":"2b3f34a56d639e0f4b2bf478f8d08ac41dffbe71"},"previous_names":["mrtc0/csp-html-webpack-plugin"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtc0%2Fcsp-html-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtc0%2Fcsp-html-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtc0%2Fcsp-html-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrtc0%2Fcsp-html-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrtc0","download_url":"https://codeload.github.com/mrtc0/csp-html-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249167446,"owners_count":21223506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["content-security-policy","csp","webpack-plugin"],"created_at":"2024-11-01T12:08:23.360Z","updated_at":"2025-04-15T23:10:41.630Z","avatar_url":"https://github.com/mrtc0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSP HTML Webpack Plugin\n\n## About\n\n`@mrtc0/csp-html-webpack-plugin` is a webpack plugin that helps to automatically add CSP(Level 3) to `meta` tags in projects like Single Page Application.  \nThis project is inspired by [strict-csp-html-webpack-plugin](https://github.com/google/strict-csp/tree/main/strict-csp-html-webpack-plugin) and allows for more flexible CSP directives.\n\n## Installation\n\nwith npm:\n\n```shell\nnpm i --save-dev @mrtc0/csp-html-webpack-plugin\n```\n\n## Basic Usage\n\nIn your webpack config file:\n\n```js\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\nconst { CspHtmlWebpackPlugin } = require(\"@mrtc0/csp-html-webpack-plugin\");\n\nmodule.exports = {\n  // ...\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new CspHtmlWebpackPlugin(HtmlWebpackPlugin),\n  ],\n};\n```\n\nWill generate the following HTML:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta\n      http-equiv=\"Content-Security-Policy\"\n      content=\"base-uri 'self'; object-src 'none'; script-src 'strict-dynamic' 'sha256-...';\"\n    /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript\u003e\n      var scripts = [\"/static/js/index.js\"];\n      scripts.forEach(function (scriptUrl) {\n        var s = document.createElement(\"script\");\n        s.src = scriptUrl;\n        s.async = false;\n        document.body.appendChild(s);\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### How does this plugin work?\n\nThis plugin is referencing the [strict-csp](https://github.com/google/strict-csp/tree/main/strict-csp) library as a source of inspiration.\n\n\u003e 1. It replaces sourced scripts with an inline script that dynamically loads all sourced scripts. It calculates the hash of this script.\n\u003e 2. It calculates the hash of other inline scripts.\n\u003e 3. It creates a strict hash-based CSP, that includes the hashes calculated in (1) and (2).\n\n## Configuration\n\nBy default, `@mrtc0/csp-html-webpack-plugin` applies Strict-CSP as follows:\n\n```\nbase-uri 'self'; object-src 'none'; script-src 'strict-dynamic' 'sha256-...';\n```\n\nBy specifying directives, you can modify the default directives. The `script-src` directive is automatically generated.\n\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new CspHtmlWebpackPlugin(HtmlWebpackPlugin, {\n      \"base-uri\": [`'self'`],\n      \"object-src\": [`'none'`],\n      // Add img-src directive\n      \"img-src\": [`'self'`, `https://example.com`],\n      // script-src will auto generate\n    }),\n  ],\n};\n```\n\nIf you need to provide fallbacks for older browsers that do not support CSP Level 3, you can specify the `script-src` directive.\n\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new CspHtmlWebpackPlugin(HtmlWebpackPlugin, {\n      \"base-uri\": [`'self'`],\n      \"object-src\": [`'none'`],\n      // If CSP Level 3 is not supported, then fallback.\n      // Will be generated: \"script-src 'strict-dynamic' sha256-... 'unsafe-inline' 'unsafe-eval' http: https:;\"\n      script-src\": [`'unsafe-inline'`, `'unsafe-eval'`, 'http:', 'https:']\n    }),\n  ],\n};\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrtc0%2Fcsp-html-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrtc0%2Fcsp-html-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrtc0%2Fcsp-html-webpack-plugin/lists"}