mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2024-10-22 16:48:15 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #68 from mding5692/hot-fix/samesite-support

Browse Source
This commit is contained in:
Rick van Lieshout 2020-05-23 22:38:21 +02:00 committed by GitHub
commit e2fb5f3990
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 198 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -90,7 +90,7 @@ If the decline button is enabled then the (onDecline) prop function can be used,
## Props
| Prop | Type | Default value | Description |
| ------------------------ | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| ------------------------ | :-------------------------------: | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| location | string, "top", "bottom" or "none" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. |
| children | string or React component | | Content to appear inside the bar |
| disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) |
@ -123,6 +123,8 @@ If the decline button is enabled then the (onDecline) prop function can be used,
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| ButtonComponent | React component | button | React Component to render as a button. |
| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value |
| cookieSecurity | boolean | location ? location.protocol === "https:" : true | Cookie security level. Defaults to true unless running on http. |
## Debugging it
@ -132,7 +134,7 @@ Because the cookie consent bar will be hidden once accepted, you will have to se
<CookieConsent debug={true}></CookieConsent>
```
**Note:** Dont forget to remove the `debug`-property for production.
**Note:** Don't forget to remove the `debug`-property for production.
## Styling it

2
build/index.d.ts vendored
View File

@ -3,6 +3,8 @@ import Cookies from "js-cookie";
export interface CookieConsentProps {
location?: "top" | "bottom" | "none";
sameSite?: "strict" | "lax" | "none";
cookieSecurity?: boolean;
style?: object;
buttonStyle?: object;
declineButtonStyle?: object;

117
build/index.js
View File

@ -506,7 +506,7 @@ module.exports = require("react");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Cookies = exports.OPTIONS = undefined;
exports.Cookies = exports.SAME_SITE_OPTIONS = exports.OPTIONS = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@ -540,6 +540,12 @@ var OPTIONS = exports.OPTIONS = {
NONE: "none"
};
var SAME_SITE_OPTIONS = exports.SAME_SITE_OPTIONS = {
STRICT: "strict",
LAX: "lax",
NONE: "none"
};
var CookieConsent = function (_Component) {
_inherits(CookieConsent, _Component);
@ -599,21 +605,19 @@ var CookieConsent = function (_Component) {
_createClass(CookieConsent, [{
key: "componentDidMount",
value: function componentDidMount() {
var _props = this.props,
cookieName = _props.cookieName,
debug = _props.debug;
var debug = this.props.debug;
// if cookie undefined or debug
if (_jsCookie2.default.get(cookieName) === undefined || debug) {
if (this.getCookieValue() === undefined || debug) {
this.setState({ visible: true });
}
// if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
if (this.props.acceptOnScroll && (_jsCookie2.default.get(cookieName) === undefined || debug)) {
if (this.props.acceptOnScroll) {
window.addEventListener("scroll", this.handleScroll, { passive: true });
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
@ -650,13 +654,11 @@ var CookieConsent = function (_Component) {
value: function accept(_ref) {
var _ref$acceptedByScroll = _ref.acceptedByScrolling,
acceptedByScrolling = _ref$acceptedByScroll === undefined ? false : _ref$acceptedByScroll;
var _props2 = this.props,
cookieName = _props2.cookieName,
cookieValue = _props2.cookieValue,
expires = _props2.expires,
hideOnAccept = _props2.hideOnAccept,
onAccept = _props2.onAccept,
extraCookieOptions = _props2.extraCookieOptions;
var _props = this.props,
cookieName = _props.cookieName,
cookieValue = _props.cookieValue,
hideOnAccept = _props.hideOnAccept,
onAccept = _props.onAccept;
// fire onAccept
@ -665,7 +667,7 @@ var CookieConsent = function (_Component) {
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
_jsCookie2.default.set(cookieName, cookieValue, _extends({ expires: expires }, extraCookieOptions));
this.setCookie(cookieName, cookieValue);
if (hideOnAccept) {
this.setState({ visible: false });
@ -679,14 +681,14 @@ var CookieConsent = function (_Component) {
}, {
key: "decline",
value: function decline() {
var _props3 = this.props,
cookieName = _props3.cookieName,
declineCookieValue = _props3.declineCookieValue,
expires = _props3.expires,
hideOnDecline = _props3.hideOnDecline,
onDecline = _props3.onDecline,
extraCookieOptions = _props3.extraCookieOptions,
setDeclineCookie = _props3.setDeclineCookie;
var _props2 = this.props,
cookieName = _props2.cookieName,
declineCookieValue = _props2.declineCookieValue,
expires = _props2.expires,
hideOnDecline = _props2.hideOnDecline,
onDecline = _props2.onDecline,
extraCookieOptions = _props2.extraCookieOptions,
setDeclineCookie = _props2.setDeclineCookie;
// fire onDecline
@ -696,13 +698,72 @@ var CookieConsent = function (_Component) {
window.removeEventListener("scroll", this.handleScroll);
if (setDeclineCookie) {
_jsCookie2.default.set(cookieName, declineCookieValue, _extends({ expires: expires }, extraCookieOptions));
this.setCookie(cookieName, declineCookieValue);
}
if (hideOnDecline) {
this.setState({ visible: false });
}
}
/**
* Get the legacy cookie name by the regular cookie name
* @param {string} name of cookie to get
*/
}, {
key: "getLegacyCookieName",
value: function getLegacyCookieName(name) {
return name + "-legacy";
}
/**
* Function to set the consent cookie based on the provided variables
* Sets two cookies to handle incompatible browsers, more details:
* https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
*/
}, {
key: "setCookie",
value: function setCookie(cookieName, cookieValue) {
var _props3 = this.props,
extraCookieOptions = _props3.extraCookieOptions,
expires = _props3.expires,
sameSite = _props3.sameSite,
cookieSecurity = _props3.cookieSecurity;
var cookieOptions = _extends({ expires: expires }, extraCookieOptions, { sameSite: sameSite, secure: cookieSecurity });
// Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
if (sameSite === SAME_SITE_OPTIONS.NONE) {
_jsCookie2.default.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
}
// set the regular cookie
_jsCookie2.default.set(cookieName, cookieValue, cookieOptions);
}
/**
* Returns the value of the consent cookie
* Retrieves the regular value first and if not found the legacy one according
* to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
*/
}, {
key: "getCookieValue",
value: function getCookieValue() {
var cookieName = this.props.cookieName;
var cookieValue = _jsCookie2.default.get(cookieName);
// if the cookieValue is undefined check for the legacy cookie
if (cookieValue === undefined) {
cookieValue = _jsCookie2.default.get(this.getLegacyCookieName(cookieName));
}
return cookieValue;
}
}, {
key: "render",
value: function render() {
@ -834,6 +895,9 @@ CookieConsent.propTypes = {
location: _propTypes2.default.oneOf(Object.keys(OPTIONS).map(function (key) {
return OPTIONS[key];
})),
sameSite: _propTypes2.default.oneOf(Object.keys(SAME_SITE_OPTIONS).map(function (key) {
return SAME_SITE_OPTIONS[key];
})),
style: _propTypes2.default.object,
buttonStyle: _propTypes2.default.object,
declineButtonStyle: _propTypes2.default.object,
@ -865,7 +929,8 @@ CookieConsent.propTypes = {
disableButtonStyles: _propTypes2.default.bool,
enableDeclineButton: _propTypes2.default.bool,
flipButtons: _propTypes2.default.bool,
ButtonComponent: _propTypes2.default.elementType
ButtonComponent: _propTypes2.default.elementType,
cookieSecurity: _propTypes2.default.bool
};
CookieConsent.defaultProps = {
@ -896,6 +961,8 @@ CookieConsent.defaultProps = {
disableButtonStyles: false,
enableDeclineButton: false,
flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: function ButtonComponent(_ref2) {
var children = _ref2.children,
props = _objectWithoutProperties(_ref2, ["children"]);

2
src/index.d.ts vendored
View File

@ -3,6 +3,8 @@ import Cookies from "js-cookie";
export interface CookieConsentProps {
location?: "top" | "bottom" | "none";
sameSite?: "strict" | "lax" | "none";
cookieSecurity?: boolean;
style?: object;
buttonStyle?: object;
declineButtonStyle?: object;

75
src/index.js
View File

@ -8,6 +8,12 @@ export const OPTIONS = {
NONE: "none",
};
export const SAME_SITE_OPTIONS = {
STRICT: "strict",
LAX: "lax",
NONE: "none",
};
class CookieConsent extends Component {
constructor(props) {
super(props);
@ -59,18 +65,18 @@ class CookieConsent extends Component {
}
componentDidMount() {
const { cookieName, debug } = this.props;
const { debug } = this.props;
// if cookie undefined or debug
if (Cookies.get(cookieName) === undefined || debug) {
if (this.getCookieValue() === undefined || debug) {
this.setState({ visible: true });
}
// if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
if (this.props.acceptOnScroll && (Cookies.get(cookieName) === undefined || debug)) {
if (this.props.acceptOnScroll) {
window.addEventListener("scroll", this.handleScroll, { passive: true });
}
}
}
componentWillUnmount() {
// remove listener if still set
@ -101,14 +107,7 @@ class CookieConsent extends Component {
* Set a persistent accept cookie
*/
accept({ acceptedByScrolling = false }) {
const {
cookieName,
cookieValue,
expires,
hideOnAccept,
onAccept,
extraCookieOptions,
} = this.props;
const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
// fire onAccept
onAccept({ acceptedByScrolling });
@ -116,7 +115,7 @@ class CookieConsent extends Component {
// remove listener if set
window.removeEventListener("scroll", this.handleScroll);
Cookies.set(cookieName, cookieValue, { expires: expires, ...extraCookieOptions });
this.setCookie(cookieName, cookieValue);
if (hideOnAccept) {
this.setState({ visible: false });
@ -144,7 +143,7 @@ class CookieConsent extends Component {
window.removeEventListener("scroll", this.handleScroll);
if (setDeclineCookie) {
Cookies.set(cookieName, declineCookieValue, { expires: expires, ...extraCookieOptions });
this.setCookie(cookieName, declineCookieValue);
}
if (hideOnDecline) {
@ -152,6 +151,50 @@ class CookieConsent extends Component {
}
}
/**
* Get the legacy cookie name by the regular cookie name
* @param {string} name of cookie to get
*/
getLegacyCookieName(name) {
return `${name}-legacy`;
}
/**
* Function to set the consent cookie based on the provided variables
* Sets two cookies to handle incompatible browsers, more details:
* https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
*/
setCookie(cookieName, cookieValue) {
const { extraCookieOptions, expires, sameSite, cookieSecurity } = this.props;
let cookieOptions = { expires, ...extraCookieOptions, sameSite, secure: cookieSecurity };
// Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
if (sameSite === SAME_SITE_OPTIONS.NONE) {
Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
}
// set the regular cookie
Cookies.set(cookieName, cookieValue, cookieOptions);
}
/**
* Returns the value of the consent cookie
* Retrieves the regular value first and if not found the legacy one according
* to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
*/
getCookieValue() {
const { cookieName } = this.props;
let cookieValue = Cookies.get(cookieName);
// if the cookieValue is undefined check for the legacy cookie
if (cookieValue === undefined) {
cookieValue = Cookies.get(this.getLegacyCookieName(cookieName));
}
return cookieValue;
}
render() {
// If the bar shouldn't be visible don't render anything.
if (!this.state.visible) {
@ -274,6 +317,7 @@ class CookieConsent extends Component {
CookieConsent.propTypes = {
location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])),
sameSite: PropTypes.oneOf(Object.keys(SAME_SITE_OPTIONS).map((key) => SAME_SITE_OPTIONS[key])),
style: PropTypes.object,
buttonStyle: PropTypes.object,
declineButtonStyle: PropTypes.object,
@ -306,6 +350,7 @@ CookieConsent.propTypes = {
enableDeclineButton: PropTypes.bool,
flipButtons: PropTypes.bool,
ButtonComponent: PropTypes.elementType,
cookieSecurity: PropTypes.bool,
};
CookieConsent.defaultProps = {
@ -336,6 +381,8 @@ CookieConsent.defaultProps = {
disableButtonStyles: false,
enableDeclineButton: false,
flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
};