microsoft
/
consent-banner
зеркало из https://github.com/microsoft/consent-banner.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
consent-banner/styleMock.js

32 строки
644 B
JavaScript
Исходник Обычный вид История

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
// Reference: identity-obj-proxy
/* eslint-disable no-var, comma-dangle */
var Reflect; // eslint-disable-line no-unused-vars
var idObj;
function checkIsNodeV6OrAbove() {
if (typeof process === 'undefined') {
return false;
}
return parseInt(process.versions.node.split('.')[0], 10) >= 6;
}
if (!checkIsNodeV6OrAbove()) {
Reflect = require('harmony-reflect'); // eslint-disable-line global-require
}
idObj = new Proxy({}, {
get: function getter(target, key) {
if (key === '__esModule') {
return false;
}
else if (key === 'locals') {
return idObj;
}
return key;
}
});
module.exports = idObj;