mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2025-01-20 18:41:44 +01: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

72
README.md
View File

@ -89,40 +89,42 @@ If the decline button is enabled then the (onDecline) prop function can be used,
## Props ## Props
| Prop | Type | Default value | Description | | 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. | | 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 | | 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) | | disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) |
| hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) | | hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) |
| acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) | | acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) |
| acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled | | acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled |
| buttonText | string or React component | "I understand" | Text to appear on the button | | buttonText | string or React component | "I understand" | Text to appear on the button |
| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | | declineButtonText | string or React component | "I decline" | Text to appear on the decline button |
| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. | | cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | | cookieValue | string or boolean or number | true | Value to be saved under the cookieName. |
| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | | declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. |
| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | | setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" |
| onAccept | function | `({ acceptedByScrolling }) => {}` | Function to be called after the accept button has been clicked. | | onAccept | function | `({ acceptedByScrolling }) => {}` | Function to be called after the accept button has been clicked. |
| onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. | | onDecline | function | `() => {}` | Function to be called after the decline button has been clicked. |
| debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. | | debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
| expires | number | 365 | Number of days before the cookie expires. | | expires | number | 365 | Number of days before the cookie expires. |
| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | | extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie |
| containerClasses | string | "" | CSS classes to apply to the surrounding container | | containerClasses | string | "" | CSS classes to apply to the surrounding container |
| buttonClasses | string | "" | CSS classes to apply to the button | | buttonClasses | string | "" | CSS classes to apply to the button |
| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | | buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons |
| declineButtonClasses | string | "" | CSS classes to apply to the decline button | | declineButtonClasses | string | "" | CSS classes to apply to the decline button |
| buttonId | string | "" | Id to apply to the button | | buttonId | string | "" | Id to apply to the button |
| declineButtonId | string | "" | Id to apply to the decline button | | declineButtonId | string | "" | Id to apply to the decline button |
| contentClasses | string | "" | CSS classes to apply to the content | | contentClasses | string | "" | CSS classes to apply to the content |
| style | object | [look at source][style] | React styling object for the bar. | | style | object | [look at source][style] | React styling object for the bar. |
| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | | buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. |
| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | | declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. |
| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | | contentStyle | object | [look at source][contentstyle] | React styling object for the content. |
| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) | | disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) |
| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | | enableDeclineButton | boolean | false | If enabled the decline button will be rendered |
| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | | flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped |
| ButtonComponent | React component | button | React Component to render as a button. | | 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 ## 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> <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 ## Styling it

2
build/index.d.ts vendored
View File

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

121
build/index.js
View File

@ -506,7 +506,7 @@ module.exports = require("react");
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
value: true 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; }; 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" NONE: "none"
}; };
var SAME_SITE_OPTIONS = exports.SAME_SITE_OPTIONS = {
STRICT: "strict",
LAX: "lax",
NONE: "none"
};
var CookieConsent = function (_Component) { var CookieConsent = function (_Component) {
_inherits(CookieConsent, _Component); _inherits(CookieConsent, _Component);
@ -599,19 +605,17 @@ var CookieConsent = function (_Component) {
_createClass(CookieConsent, [{ _createClass(CookieConsent, [{
key: "componentDidMount", key: "componentDidMount",
value: function componentDidMount() { value: function componentDidMount() {
var _props = this.props, var debug = this.props.debug;
cookieName = _props.cookieName,
debug = _props.debug;
// if cookie undefined or debug // if cookie undefined or debug
if (_jsCookie2.default.get(cookieName) === undefined || debug) { if (this.getCookieValue() === undefined || debug) {
this.setState({ visible: true }); this.setState({ visible: true });
}
// if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener. // 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 }); window.addEventListener("scroll", this.handleScroll, { passive: true });
}
} }
} }
}, { }, {
@ -650,13 +654,11 @@ var CookieConsent = function (_Component) {
value: function accept(_ref) { value: function accept(_ref) {
var _ref$acceptedByScroll = _ref.acceptedByScrolling, var _ref$acceptedByScroll = _ref.acceptedByScrolling,
acceptedByScrolling = _ref$acceptedByScroll === undefined ? false : _ref$acceptedByScroll; acceptedByScrolling = _ref$acceptedByScroll === undefined ? false : _ref$acceptedByScroll;
var _props2 = this.props, var _props = this.props,
cookieName = _props2.cookieName, cookieName = _props.cookieName,
cookieValue = _props2.cookieValue, cookieValue = _props.cookieValue,
expires = _props2.expires, hideOnAccept = _props.hideOnAccept,
hideOnAccept = _props2.hideOnAccept, onAccept = _props.onAccept;
onAccept = _props2.onAccept,
extraCookieOptions = _props2.extraCookieOptions;
// fire onAccept // fire onAccept
@ -665,7 +667,7 @@ var CookieConsent = function (_Component) {
// remove listener if set // remove listener if set
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
_jsCookie2.default.set(cookieName, cookieValue, _extends({ expires: expires }, extraCookieOptions)); this.setCookie(cookieName, cookieValue);
if (hideOnAccept) { if (hideOnAccept) {
this.setState({ visible: false }); this.setState({ visible: false });
@ -679,14 +681,14 @@ var CookieConsent = function (_Component) {
}, { }, {
key: "decline", key: "decline",
value: function decline() { value: function decline() {
var _props3 = this.props, var _props2 = this.props,
cookieName = _props3.cookieName, cookieName = _props2.cookieName,
declineCookieValue = _props3.declineCookieValue, declineCookieValue = _props2.declineCookieValue,
expires = _props3.expires, expires = _props2.expires,
hideOnDecline = _props3.hideOnDecline, hideOnDecline = _props2.hideOnDecline,
onDecline = _props3.onDecline, onDecline = _props2.onDecline,
extraCookieOptions = _props3.extraCookieOptions, extraCookieOptions = _props2.extraCookieOptions,
setDeclineCookie = _props3.setDeclineCookie; setDeclineCookie = _props2.setDeclineCookie;
// fire onDecline // fire onDecline
@ -696,13 +698,72 @@ var CookieConsent = function (_Component) {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
if (setDeclineCookie) { if (setDeclineCookie) {
_jsCookie2.default.set(cookieName, declineCookieValue, _extends({ expires: expires }, extraCookieOptions)); this.setCookie(cookieName, declineCookieValue);
} }
if (hideOnDecline) { if (hideOnDecline) {
this.setState({ visible: false }); 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", key: "render",
value: function render() { value: function render() {
@ -834,6 +895,9 @@ CookieConsent.propTypes = {
location: _propTypes2.default.oneOf(Object.keys(OPTIONS).map(function (key) { location: _propTypes2.default.oneOf(Object.keys(OPTIONS).map(function (key) {
return OPTIONS[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, style: _propTypes2.default.object,
buttonStyle: _propTypes2.default.object, buttonStyle: _propTypes2.default.object,
declineButtonStyle: _propTypes2.default.object, declineButtonStyle: _propTypes2.default.object,
@ -865,7 +929,8 @@ CookieConsent.propTypes = {
disableButtonStyles: _propTypes2.default.bool, disableButtonStyles: _propTypes2.default.bool,
enableDeclineButton: _propTypes2.default.bool, enableDeclineButton: _propTypes2.default.bool,
flipButtons: _propTypes2.default.bool, flipButtons: _propTypes2.default.bool,
ButtonComponent: _propTypes2.default.elementType ButtonComponent: _propTypes2.default.elementType,
cookieSecurity: _propTypes2.default.bool
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@ -896,6 +961,8 @@ CookieConsent.defaultProps = {
disableButtonStyles: false, disableButtonStyles: false,
enableDeclineButton: false, enableDeclineButton: false,
flipButtons: false, flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: function ButtonComponent(_ref2) { ButtonComponent: function ButtonComponent(_ref2) {
var children = _ref2.children, var children = _ref2.children,
props = _objectWithoutProperties(_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 { export interface CookieConsentProps {
location?: "top" | "bottom" | "none"; location?: "top" | "bottom" | "none";
sameSite?: "strict" | "lax" | "none";
cookieSecurity?: boolean;
style?: object; style?: object;
buttonStyle?: object; buttonStyle?: object;
declineButtonStyle?: object; declineButtonStyle?: object;

79
src/index.js
View File

@ -8,6 +8,12 @@ export const OPTIONS = {
NONE: "none", NONE: "none",
}; };
export const SAME_SITE_OPTIONS = {
STRICT: "strict",
LAX: "lax",
NONE: "none",
};
class CookieConsent extends Component { class CookieConsent extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -59,16 +65,16 @@ class CookieConsent extends Component {
} }
componentDidMount() { componentDidMount() {
const { cookieName, debug } = this.props; const { debug } = this.props;
// if cookie undefined or debug // if cookie undefined or debug
if (Cookies.get(cookieName) === undefined || debug) { if (this.getCookieValue() === undefined || debug) {
this.setState({ visible: true }); this.setState({ visible: true });
}
// if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener. // 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 }); window.addEventListener("scroll", this.handleScroll, { passive: true });
}
} }
} }
@ -101,14 +107,7 @@ class CookieConsent extends Component {
* Set a persistent accept cookie * Set a persistent accept cookie
*/ */
accept({ acceptedByScrolling = false }) { accept({ acceptedByScrolling = false }) {
const { const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
cookieName,
cookieValue,
expires,
hideOnAccept,
onAccept,
extraCookieOptions,
} = this.props;
// fire onAccept // fire onAccept
onAccept({ acceptedByScrolling }); onAccept({ acceptedByScrolling });
@ -116,7 +115,7 @@ class CookieConsent extends Component {
// remove listener if set // remove listener if set
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
Cookies.set(cookieName, cookieValue, { expires: expires, ...extraCookieOptions }); this.setCookie(cookieName, cookieValue);
if (hideOnAccept) { if (hideOnAccept) {
this.setState({ visible: false }); this.setState({ visible: false });
@ -144,7 +143,7 @@ class CookieConsent extends Component {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
if (setDeclineCookie) { if (setDeclineCookie) {
Cookies.set(cookieName, declineCookieValue, { expires: expires, ...extraCookieOptions }); this.setCookie(cookieName, declineCookieValue);
} }
if (hideOnDecline) { 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() { render() {
// If the bar shouldn't be visible don't render anything. // If the bar shouldn't be visible don't render anything.
if (!this.state.visible) { if (!this.state.visible) {
@ -274,6 +317,7 @@ class CookieConsent extends Component {
CookieConsent.propTypes = { CookieConsent.propTypes = {
location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])), 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, style: PropTypes.object,
buttonStyle: PropTypes.object, buttonStyle: PropTypes.object,
declineButtonStyle: PropTypes.object, declineButtonStyle: PropTypes.object,
@ -306,6 +350,7 @@ CookieConsent.propTypes = {
enableDeclineButton: PropTypes.bool, enableDeclineButton: PropTypes.bool,
flipButtons: PropTypes.bool, flipButtons: PropTypes.bool,
ButtonComponent: PropTypes.elementType, ButtonComponent: PropTypes.elementType,
cookieSecurity: PropTypes.bool,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@ -336,6 +381,8 @@ CookieConsent.defaultProps = {
disableButtonStyles: false, disableButtonStyles: false,
enableDeclineButton: false, enableDeclineButton: false,
flipButtons: false, flipButtons: false,
sameSite: SAME_SITE_OPTIONS.NONE,
cookieSecurity: location ? location.protocol === "https:" : true,
ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>, ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
}; };