Add nonce attribute to style tags and setNonceAttribute(...) method (#27)
* Fix esc key in IE
Instead of `event.key == 'Escape'` in Chrome or Firefox, IE used
`event.key == 'Esc'`.
* `showBanner(...)` only create banner.
In previous version, `showBanner(...)` will create banner and hidden
dialog. In the new version, `showBanner(...) will only create banner.
When user clicks `More info` button, it will call `showPreference(...)`
to create a dialog.
When `onPreferencesDialogShowing()` is called, it will check the dialog
is in the DOM or not. Since the only method to remove the dialog is
`hidePreferencesDialog()`, and it will set
`this.previousFocusElementBeforePopup = null;`, we use
`this.previousFocusElementBeforePopup` to determine the dialog is
in the DOM or not. If there is a dialog, we will not add event listener.
* Add new test cases and update old ones
* Add nonce to style tags and `setNonceAttribute(...)` method
1. Add nonce to all style tags
2. Add `setNonceAttribute(...)` method to set nonce attribute
3. Use `textContent` to replace `innerHTML` to change theme
* Set style nonce in constructor
1. Add stylesNonce in IOptions
2. Add webpack-dev-server configuration for Content Security Policy
3. Set style nonce in constructor
* Update `.d.ts` file and document
1. Add `stylesNonce` in interface `IOptions` and related methods
2. Update `showPreferences(...)`
* Update webpack.production.config.js and bump npm version
* Add explanation in stylesNonce
* Simplify webpack.config.js
Use webpack-merge to simplify webpack configuration file.
webpack.common.js is the common part in developmment and production. Use
webpack.dev.js and webpack.prod.js to insert the development and
production specific configuration.
* Update `nonce` attribute in style tag
Since loaders are stateless, we need to reload it if we want to change
it. Instead, we get the styles contents and remove the blocked style
element with style element id. With the styles contents and passed
`nonce`, we can create the new style element that will not be blocked.
If we removed `style-loader` and loaded style element by ourselves, the
actual styles contents will be `styles[0][1]`.
Reference:
https://webpack.js.org/contribute/writing-a-loader/
https://webpack.js.org/guides/hot-module-replacement/
* Use `style-loader` to `inject` styles and `nonce` to `<style>`
* Only add `nonce` to `<style>` if it is not empty
1. Only add `nonce` to `<style>` when options.stylesNonce is not empty
2. Remove private methods in `.d.ts` file
* Update Jest config and test cases
The new file applied in configuration is based on `identity-obj-proxy`.
styles.locals.bannerBody -> bannerBody
Check:
https://github.com/keyz/identity-obj-proxy/blob/master/src/index.js
* Update test cases
Co-authored-by: Bill Chou (Zen3 Infosolutions America Inc) <v-tincho@microsoft.com>
2020-10-06 00:15:09 +03:00
|
|
|
const { merge } = require('webpack-merge');
|
|
|
|
|
const common = require('./webpack.common.js');
|
|
|
|
|
|
|
|
|
|
let mergedConfig = common;
|
|
|
|
|
|
|
|
|
|
let targetRule = mergedConfig.module.rules[1];
|
|
|
|
|
let targetRegex = /\.scss$/;
|
|
|
|
|
if (targetRule.test.toString() !== targetRegex.toString()) {
|
|
|
|
|
targetRule = mergedConfig.module.rules.find(element => element.test.toString() === targetRegex.toString());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let targetLoader = targetRule.use[1];
|
|
|
|
|
if (targetLoader.loader !== "css-loader") {
|
|
|
|
|
targetLoader = targetRule.use.find(element => element.loader === "css-loader");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
targetLoader.options.modules.localIdentName = "[hash:base64]";
|
|
|
|
|
module.exports = mergedConfig;
|