\href{https://badge.fury.io/js/webpack-subresource-integrity}{\texttt{ }} \href{https://travis-ci.org/waysact/webpack-subresource-integrity}{\texttt{ }} \href{https://ci.appveyor.com/project/jscheid/webpack-subresource-integrity}{\texttt{ }} \href{https://coveralls.io/github/waysact/webpack-subresource-integrity?branch=master}{\texttt{ }} \href{https://codeclimate.com/github/waysact/webpack-subresource-integrity}{\texttt{ }} \href{https://raw.githubusercontent.com/waysact/webpack-subresource-integrity/master/LICENSE}{\texttt{ }}

Webpack plugin for enabling Subresource Integrity.

\href{http://www.w3.org/TR/SRI/}{\texttt{ Subresource Integrity}} (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33928}{}\doxysection{Features}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33928}

\begin{DoxyItemize}
\item Optional integration with \href{https://github.com/ampedandwired/html-webpack-plugin}{\texttt{ html-\/webpack-\/plugin}}
\item Automatic support for code splitting (integrity for lazy-\/loaded chunks)
\item Compatible with Webpack 1.\+x, 2.\+x, 3.\+x and 4.\+x
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33929}{}\doxysection{Installation}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33929}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install webpack-\/subresource-\/integrity -\/-\/save-\/dev }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33930}{}\doxysubsection{Webpack Configuration Example}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33930}

\begin{DoxyCode}{0}
\DoxyCodeLine{import SriPlugin from 'webpack-\/subresource-\/integrity';}
\DoxyCodeLine{}
\DoxyCodeLine{const compiler = webpack(\{}
\DoxyCodeLine{    output: \{}
\DoxyCodeLine{        crossOriginLoading: 'anonymous',}
\DoxyCodeLine{    \},}
\DoxyCodeLine{    plugins: [}
\DoxyCodeLine{        new SriPlugin(\{}
\DoxyCodeLine{            hashFuncNames: ['sha256', 'sha384'],}
\DoxyCodeLine{            enabled: process.env.NODE\_ENV === 'production',}
\DoxyCodeLine{        \}),}
\DoxyCodeLine{    ],}
\DoxyCodeLine{\}); }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33931}{}\doxysubsection{Setting the $<$tt$>$integrity$<$/tt$>$ attribute for top-\/level assets}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33931}
For the plugin to take effect it is {\bfseries{essential}} that you set the {\ttfamily integrity} attribute for top-\/level assets (i.\+e. assets loaded by your HTML pages.)\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33932}{}\doxysubsubsection{With Html\+Webpack\+Plugin}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33932}
When html-\/webpack-\/plugin is injecting assets into the template (the default), the {\ttfamily integrity} attribute will be set automatically. The {\ttfamily crossorigin} attribute will be set as well, to the value of {\ttfamily output.\+cross\+Origin\+Loading} webpack option. There is nothing else to be done.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33933}{}\doxysubsubsection{With Html\+Webpack\+Plugin(\{ inject\+: false \})}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33933}
When you use html-\/webpack-\/plugin with {\ttfamily inject\+: false}, you are required to set the {\ttfamily integrity} and {\ttfamily crossorigin} attributes in your template as follows\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<\% for (var index in htmlWebpackPlugin.files.js) \{ \%>}
\DoxyCodeLine{  <script}
\DoxyCodeLine{     src="{}<\%= htmlWebpackPlugin.files.js[index] \%>"{}}
\DoxyCodeLine{     integrity="{}<\%= htmlWebpackPlugin.files.jsIntegrity[index] \%>"{}}
\DoxyCodeLine{     crossorigin="{}<\%= webpackConfig.output.crossOriginLoading \%>"{}}
\DoxyCodeLine{  ></script>}
\DoxyCodeLine{<\% \} \%>}
\DoxyCodeLine{}
\DoxyCodeLine{<\% for (var index in htmlWebpackPlugin.files.css) \{ \%>}
\DoxyCodeLine{  <link}
\DoxyCodeLine{     rel="{}stylesheet"{}}
\DoxyCodeLine{     href="{}<\%= htmlWebpackPlugin.files.css[index] \%>"{}}
\DoxyCodeLine{     integrity="{}<\%= htmlWebpackPlugin.files.cssIntegrity[index] \%>"{}}
\DoxyCodeLine{     crossorigin="{}<\%= webpackConfig.output.crossOriginLoading \%>"{}}
\DoxyCodeLine{  />}
\DoxyCodeLine{<\% \} \%> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33934}{}\doxysubsubsection{Without Html\+Webpack\+Plugin}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33934}
The correct value for the {\ttfamily integrity} attribute can be retrieved from the {\ttfamily integrity} property of Webpack assets. However, that property is not copied over by Webpack\textquotesingle{}s {\ttfamily stats} module so you\textquotesingle{}ll have to access the \char`\"{}original\char`\"{} asset on the {\ttfamily compilation} object. For example\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{compiler.plugin("{}done"{}, stats => \{}
\DoxyCodeLine{    const mainAssetName = stats.toJson().assetsByChunkName.main;}
\DoxyCodeLine{    const integrity = stats.compilation.assets[mainAssetName].integrity;}
\DoxyCodeLine{\}); }

\end{DoxyCode}


Note that you\textquotesingle{}re also required to set the {\ttfamily crossorigin} attribute. It is recommended to set this attribute to the same value as the webpack {\ttfamily output.\+cross\+Origin\+Loading} configuration option.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33935}{}\doxysubsection{Web Server Configuration}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33935}
If your page can be loaded through plain HTTP (as opposed to HTTPS), you must set the {\ttfamily Cache-\/\+Control\+: no-\/transform} response header or your page will break when assets are loaded through a transforming proxy. \href{\#proxies}{\texttt{ See below}} for more information.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33936}{}\doxysubsection{Content Security Policy}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33936}
\sout{Consider adding the following rule to your CSP file\+:}

$\sim$$\sim${\ttfamily Content-\/\+Security-\/\+Policy\+: require-\/sri-\/for script style;}$\sim$$\sim$

\sout{It ensures that if, for some reason, this plugin fails to add integrity attributes to all your assets, your page will fail to load rather than load with unverified assets.}

{\ttfamily require-\/sri-\/for} has never officially shipped in \href{https://bugs.chromium.org/p/chromium/issues/detail?id=618924}{\texttt{ Chrome}} or \href{https://groups.google.com/d/msg/mozilla.dev.platform/TKFsYlh9pr8/o_Vq_1s7BwAJ}{\texttt{ Firefox}}, and both appear to be leaning towards removing their implementations.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33937}{}\doxysubsection{Options}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33937}
\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33938}{}\doxysubsubsection{hash\+Func\+Names}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33938}
Required option, no default value.

An array of strings, each specifying the name of a hash function to be used for calculating integrity hash values. For example, `\mbox{[}\textquotesingle{}sha256', \textquotesingle{}sha512\textquotesingle{}\mbox{]}\`{}.

See \href{http://www.w3.org/TR/SRI/\#cryptographic-hash-functions}{\texttt{ SRI\+: Cryptographic hash functions}}\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33939}{}\doxysubsubsection{enabled}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33939}
Default value\+: {\ttfamily true}

When this value is falsy, the plugin doesn\textquotesingle{}t run and no integrity values are calculated. It is recommended to disable the plugin in development mode.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33940}{}\doxysection{Exporting $<$tt$>$integrity$<$/tt$>$ values}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33940}
You might want to export generated integrity hashes, perhaps for use with SSR. We recommend \href{https://github.com/webdeveric/webpack-assets-manifest}{\texttt{ webpack-\/assets-\/manifest}} for this purpose. When configured with option {\ttfamily integrity\+: true} it will include the hashes generated by this plugin in the manifest (requires webpack-\/assets-\/manifest version $>$= 3 which in turn requires Webpack $>$= 4).

\href{examples/webpack-assets-manifest/}{\texttt{ Example usage with webpack-\/assets-\/manifest}}.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33941}{}\doxysection{Caveats}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33941}
\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33942}{}\doxysubsection{Preloading}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33942}
This plugin adds the integrity attribute to {\ttfamily $<$link rel=\char`\"{}preload\char`\"{}$>$} tags, but preloading with SRI doesn\textquotesingle{}t work as expected in current Chrome versions. The resource will be loaded twice, defeating the purpose of preloading. This problem doesn\textquotesingle{}t appear to exist in Firefox or Safari. See \href{https://github.com/waysact/webpack-subresource-integrity/issues/111}{\texttt{ issue \#111}} for more information.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33943}{}\doxysubsection{Proxies}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33943}
By its very nature, SRI can cause your page to break when assets are modified by a proxy. This is because SRI doesn\textquotesingle{}t distinguish between malicious and benevolent modifications\+: any modification will prevent an asset from being loaded.

Notably, this issue can arise when your page is loaded through \href{https://developer.chrome.com/multidevice/data-compression}{\texttt{ Chrome Data Saver}}.

This is only a problem when your page can be loaded with plain HTTP, since proxies are incapable of modifying encrypted HTTPS responses.

Presumably, you\textquotesingle{}re looking to use SRI because you\textquotesingle{}re concerned about security and thus your page is only served through HTTPS anyway. However, if you really need to use SRI and HTTP together, you should set the {\ttfamily Cache-\/\+Control\+: no-\/transform} response header. This will instruct all well-\/behaved proxies (including Chrome Data Saver) to refrain from modifying the assets.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33944}{}\doxysubsection{Browser support}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33944}
Browser support for SRI is widely implemented. Your page will still work on browsers without support for SRI, but subresources won\textquotesingle{}t be protected from tampering.

See \href{http://caniuse.com/\#feat=subresource-integrity}{\texttt{ Can I use Subresource Integrity?}}\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33945}{}\doxysubsection{Hot Reloading}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33945}
This plugin can interfere with hot reloading and therefore should be disabled when using tools such as {\ttfamily webpack-\/dev-\/server}. This shouldn\textquotesingle{}t be a problem because hot reloading is usually used only in development mode where SRI is not normally needed.

For testing SRI without setting up a full-\/blown web server, consider using a tool such as \href{https://github.com/indexzero/http-server}{\texttt{ {\ttfamily http-\/server}}}.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33946}{}\doxysubsection{Safari and Assets that Require Cookies}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33946}
As detailed in \href{https://github.com/webpack/webpack/issues/6972}{\texttt{ Webpack Issue \#6972}}, the {\ttfamily cross\+Origin} attribute can break loading of assets in certain edge cases due to a bug in Safari. Since SRI requires the {\ttfamily cross\+Origin} attribute to be set, you may run into this case even when source URL is same-\/origin with respect to the asset.\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33947}{}\doxysection{Further Reading}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33947}

\begin{DoxyItemize}
\item \href{https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity}{\texttt{ MDN\+: Subresource Integrity}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33948}{}\doxysection{License}\label{md_sfcode_node_modules_webpack_subresource_integrity_README_autotoc_md33948}
Copyright (c) 2015-\/present Waysact Pty Ltd

MIT (see \mbox{[}LICENSE\mbox{]}(LICENSE)) 