porscheofficial/cookie-consent-banner

The lightweight and flexible Cookie Consent Banner

Porsche Open Source Platform

The Porsche Open Source Platform (POSP) is a static website generated with Next.js 13 and the Porsche Design System. The POSP is a one-stop shop for all open-source activities of Porsche AG and subsidiaries, featuring selected projects and providing documentation on our FOSS best practices.

🛠️ Run Locally

Clone the project

  git clone https://github.com/porscheofficial/porscheofficial.github.io.git

Go to the project directory

  cd porscheofficial.github.io

Install all dependencies

  yarn install

Start the development server

  yarn dev

🔍 Testing, Linting and Prettifying

We're using the opinionated ESLint config provided by Porsche Digital. To check your local changes, simply call

yarn test:ci

Check A11y

To ensure the accessibility of the website, we're using dedicated ESLint rules, as well as automated accessibility checks with axe-core.

ESLint runs automatically after each commit via GitHub Action. Locally it can be called via

yarn test:ci

To run axe-core on the deployed website, we're using a dedicated GitHub Action. To run them from local, simply call

yarn playwright:run

Check Lighthouse Performance Score

We have a dedicated GitHub Action to check the Lighthouse Performance Score of the deployed website. Simply call the respective GitHub Action to run the checks.

🏁 Building for Deployment

To locally simulate a production build, simply call

yarn build

To run a production build locally, simply call

yarn start

✨ Contributing

The Porsche Open Source Platform is openly developed in the wild and contributions (both internal and external) are highly appreciated. See CONTRIBUTING.md on how to get started.

If you have feedback or want to propose a new feature, please open an issue, which will then be monitored/prioritized in our open GitHub Project board.

🙌 Acknowledgements

This project is a joint initiative of Porsche AG and Porsche Digital.

✒️ License

Copyright © 2023 Dr. Ing. h.c. F. Porsche AG

Dr. Ing. h.c. F. Porsche AG publishes the Porsche Open Source Platform software and accompanied documentation (if any) subject to the terms of the MIT license. All rights not explicitly granted to you under the MIT license remain the sole and exclusive property of Dr. Ing. h.c. F. Porsche AG.

Apart from the software and documentation described above, the texts, images, graphics, animations, video and audio files as well as all other contents on this website are subject to the legal provisions of copyright law and, where applicable, other intellectual property rights. The aforementioned proprietary content of this website may not be duplicated, distributed, reproduced, made publicly accessible or otherwise used without the prior consent of the right holder.

cookie-consent-banner's Issues

Absence of the consent-state cookie is not handled correctly

Node/npm version(s):
Node v18.13.0
NPM 8.19.3

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s):
Chrome 111.0.5563.64

Description of the issue/feature:
Consent banner does not open when cookie is absent, only when cookie is present, but set to the empty string. The cause of this is the following code (source):

const cookieValueString =
    `; ${document.cookie}`.split(`; ${this.cookieName}=`).pop() ??
    "".split(";").shift();

const cookieValues = cookieValueString ? cookieValueString.split(",") : [];

This code does not work properly if this.cookieName does not occur in document.cookie.

The first template string (`; ${document.cookie}`) can never be the empty string. Even if there are no cookies set at all and document.cookie is the empty string, `; ${document.cookie}` will be '; '. Calling split on a non-empty string will never produce an empty array, as such the following pop call will always return a value. As such anything past the ?? is never executed.
Now, if document.cookie doesn't contain this.cookieName, then the result of pop will just be the entire document.cookie with ; prepended to it. This is then assumed to be the contents of the cookie and the code assumes a consent decision has already been made.

Upgrade to Stencil v3

More style flexibility

Node/npm version(s):

NodeJS 19.6.0
Pnpm 7.27.0

Package(s) version(s):

@porscheofficial/[email protected]

Browser(s) version(s):

Arc Version 0.110.1 (39837)
Chromium Engine Version 114.0.5735.198

Description of the issue/feature:

Allow button styling. Be able to change button size, padding, font, font weight...

Maybe allowing to pass our own button component to keep the same button style.

Another option could be to add css parts (https://stenciljs.com/docs/styling#css-parts) to be able to stylise the shadow DOM element using ::part() pseudo selector (https://developer.mozilla.org/en-US/docs/Web/CSS/::part)

Use cases:

Have a better design integration of the component

Continue with technically required cookies only button doesn't unset other cookies

Node/npm version(s):
Node: 14.18.0
npm: 6.14.15

Package(s) version(s):

    @porscheofficial/[email protected]
    @porscheofficial/[email protected]

Browser(s) version(s):
Google Chrome: 97.0.4692.71

Description of the issue/feature:
When accepting all the cookies, then showing the banner again, and clicking on "Continue with technically required cookies only", all the cookies previously set are still set.

For example, on my first visit, I select marketing cookies, and save my preferences. Then, I want to update my choices, so I show the banner, I click on "Continue with technically required cookies only", but the marketing cookies are still set.

Some example to reproduce the issue:
https://codesandbox.io/s/issue-cookie-consent-banner-g48uu

Steps to reproduce the issue:

• Click "Agree and continue" to select all the cookie types
• Click on "Show Cookies Banner" button to show the banner
• Click "Continue with technically required cookies only"
• The optional cookies are still set

isMandatory checkbox is disabled but not checked

    @porscheofficial/cookie-consent-banner-react@<3.1.2>

Browser(s) version(s):
Version 111.0.5563.64 (Official Build) (64-bit)

Description of the issue/feature:
isMandatory checkbox is disabled but not checked

Upgrade to stencil v3

Cannot find module './cookie-consent-banner.entry.js'

Node/npm version(s):
v16.13.0

Package(s) version(s):

    @porscheofficial/[email protected]
    @porscheofficial/[email protected]

Browser(s) version(s):
Chrome 100.0.4896.127

Description of the issue/feature:
Component is not rendered and the stack trace shows:

Uncaught (in promise) Error: Cannot find module './cookie-consent-banner.entry.js'
    at newRequire (index.2d3ace14.js:61:19)
    at newRequire (index.2d3ace14.js:45:18)
    at localRequire (index.2d3ace14.js:84:35)
    at loadModule (index-6c3638be.js:1108:12)
    at initializeComponent (index-6c3638be.js:869:20)
    at connectedCallback (index-6c3638be.js:964:17)
    at index-6c3638be.js:1044:39
    at Object.jmp (index-6c3638be.js:12:17)
    at HostElement.connectedCallback (index-6c3638be.js:1044:29)
    at appendChildToContainer (react-dom.development.js:11040:16)

Can not import react module into the app

Node/npm version(s): v18.16.1

Package(s) version(s): ^3.1.3

Description of the issue/feature: The package cannot be imported into the app, which always returns the same error (I have also tried with the new version but nothing changes)

package.json

    {
  "name": "react_",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@porscheofficial/cookie-consent-banner-react": "^3.1.3",
    "@statuspage/status-widget": "^1.0.4",
    "@stripe/react-stripe-js": "^2.1.0",
    "@stripe/stripe-js": "^1.54.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "aos": "^2.3.4",
    "firebase": "^8.6.8",
    "history": "^5.3.0",
    "i18next": "^23.2.11",
    "i18next-browser-languagedetector": "^7.1.0",
    "i18next-http-backend": "^2.2.1",
    "lottie-react": "^2.4.0",
    "lottie-web": "^5.12.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-ga4": "^2.1.0",
    "react-i18next": "^13.0.2",
    "react-owl-carousel": "^2.3.3",
    "react-router-dom": "^6.4.3",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "^5.0.1",
    "react-scrollspy": "^3.4.3",
    "shebang-regex": "^4.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}

Error

ERROR in ./src/component/GDPR_Banner/Main.js 4:0-118
Module not found: Error: Can't resolve '@porscheofficial/cookie-consent-banner-react@^3.1.3' in '/Volumes/SSD/shoppup_site/client/src/component/GDPR_Banner'

Import Statement

import {CookieConsentBanner, triggerCookieConsentBanner} from '@porscheofficial/cookie-consent-banner-react';

Add expirationDate as property

Node/npm version(s):

Package(s) version(s):

    @porscheofficial/cookie-consent-banner@<version>
    @porscheofficial/cookie-consent-banner-react@<version>

Browser(s) version(s):

Description of the issue/feature:

Add an new property called expirationDate in order to customize the cookie life time.

Some example to reproduce the issue:

Use cases:

Some industries require to a specific lifetimes of cookies. At the moment I do not see an option to customize the cookies' expiration date.

@feature "startChecked" new property for CategoryItem

Node/npm version(s):
8.19.2

Package(s) version(s):
3.0.1 (React)

Browser(s) version(s):
Version 1.46.153 Chromium: 108.0.5359.128 (Official Build) (64-bit)

Description of the issue/feature:
Maybe there is a way of doing this already but I haven't found it yet.

A new property for CategoryItem, startChecked.

With the purpose of allowing the developer to get all/some of the cookie categories checked and allow the users to uncheck them if they wish to. As opposed to how it behaves now.

Right now it appears to only "pre" check the mandatory categories, which is great, but it would be good to have the option to pre-check optional categories as well.

Regards

Typescript error triggerCookieConsentBanner

Node/npm version(s): 8.3.1

Package(s) version(s):

    @porscheofficial/cookie-consent-banner-react@<2.1.3>

Browser(s) version(s): lastest Chrome

Description of the issue/feature: Getting an TS error: Module '"@porscheofficial/cookie-consent-banner-react"' has no exported member 'triggerCookieConsentBanner'.

Some example to reproduce the issue: based on demo code

Use cases:

Absence of the consent-state cookie is not handled correctly

Node/npm version(s): v19.7.0

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s): Chrome Version 111.0.5563.110

Description of the issue/feature:
The consent banner is only shown if no cookies are set. But it should be shown as long as long as the consent state cookie is not set or empty. This was also brought up here: #12 (comment)

Some example to reproduce the issue:

• clear cookies
• load page -> cookie consent is shown
• without accepting anything, navigate to another page or reload
• the cookie consent is not shown anymore

Use cases:

• the cookie consent should be shown as long as the user has not actively accepted anything.

Package produces an error in older browser (ie. iOS Safari 12.4)

Node/npm version(s):
Node v14.18.0 / npm v6.14.15

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s):
Safari iOS 12.4

Description of the issue/feature:
Instantiating the component CookieConsentBanner results in an error:

I suppose it comes from a js feature that is not supported by old browsers.

Some example to reproduce the issue:
Unfortunately I am unable to reproduce the issue on codesandbox, sorry :/
To reproduce the issue, try to load the component in an old version of safari (ie. safari for iOS v12.4). You can use the iOS simulator for that.

Use cases:

LCP slows down by 2.2 seconds when cookie banner is shown.

Node/npm version(s):

Package(s) version(s):

    @porscheofficial/[email protected]

Browser(s) version(s):
Chrome/Any

Description of the issue/feature:
Largest Contentful Paint (LCP) slows down by ~2.2 seconds when the cookie banner is shown.
Once the cookies are accepted and the banner does not pop up anymore the speed is improved by ~2.2 seconds.

Some example to reproduce the issue:
Using Google Lighthouse in Dev tools or https://pagespeed.web.dev/report.
Use cases:

Can not import react module into the app

Node/npm version(s):
v14.7.3

Package(s) version(s):

    @porscheofficial/cookie-consent-banner-react": "^2.1.1

Description of the issue/feature:
Module import error

Some example to reproduce the issue:
import { CookieConsentBanner } from "@porscheofficial/cookie-consent-banner-react";

Use cases:

Module parse failed: Unexpected token (13:61)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const acceptedCategoriesListener = event => {
|     if (isCustomEvent(event)) {
>       setAcceptedCategories(event.detail.acceptedCategories ?? []);
|     }
|   };```

Error when using with Vite

Node/npm version(s):
Node v18.7.0
npm v8.15.0

Package(s) version(s):

 @porscheofficial/[email protected]
 @porscheofficial/[email protected]

Browser(s) version(s):
Brave browser: Version 1.41.100 Chromium: 103.0.5060.134 (Official Build) (x86_64)

Description of the issue/feature:
I installed the package with yarn (v1.22.19). I imported it and tried to set up the basic example.
I get the following e

rrors in the browser console and banner is not rendered (the rest of the application compiles & renders):

Some example to reproduce the issue:

• Install porsche cookie consent banner in a basic Vite react project (bootstrapped with TS).
• Check the dev console.

Dark patterns are present in example image

Dark patterns are present in the example image.

• 2. Pre-ticked checkboxes
• 4. Deceptive button contrast colors

I did not check to see how the banner is actively being used in the wild and that might differ.