canonical / cookie-policy

A script and stylesheet that displays the Canonical cookie policy

Canonical cookie policy component

This project contains the scripts and styles to display a cookie policy notification on a web page.

You can use it to display a custom cookies message of your choosing on your own web page.

Usage

This project can be installed via an NPM package.

yarn add @canonical/cookie-policy

...or...

npm install @canonical/cookie-policy

You can then install the library either by directly linking to it or via an ES6 import.

1. Via direct link

To consume the library directly, add a link to the JS file containing an IIFE and call the lib:

<script src="[ INSERT YOUR LOCAL PATH ]/js/cookie-policy.js"></script>
<script>
  cpNs.cookiePolicy();
</script>

2. Via ES6 import

import { cookiePolicy } from '@canonical/cookie-policy';

Revoking the cookie policy

If you would like users to change their preferences you can add js-revoke-cookie-manager class to any element that is present in the document to recall the policy manager.

<button class="js-revoke-cookie-manager">Revoke cookie manager</button>

or

<a href="" class="js-revoke-cookie-manager"Revoke cookie manager</a>

Visiting a page with tracker disabled

If you add the query ?cp=hide to any URL the cookie policy will not be rendered. The main use case is to visit the policy page without the modal blocking the content.

Callback hook

You can set up the cookie policy with a callback when a preference is selected.

function callbackFunction() {
  alert('Calling back');
}
cpNs.cookiePolicy(callbackFunction);

Full example via ES6 import

import { cookiePolicy } from '@canonical/cookie-policy';

cookiePolicy();

Cookie groups

Essential cookies are always allowed, unless the user turns them off in their browser. Otherwise, there will be a series of values the _cookies_accepted cookie can contain :

Cookie value	Description	Note
all	All cookies accepted by the user. Currently used by the existing widget	Previous value was true. Using the same cookie.
essential	Essential cookies accepted.	This is used to hide the notification instead of not setting the cookie
performance	Performance cookies accepted.	-
functionality	Functionality cookies accepted.	-

Contributing

If you would like to help improve this project, here is a list of commands to help you get started.

Building the cookie policy

Install the requisite dependencies;

npm install

To build the JS and CSS into the build folder, run:

npm run build

You can view the build files in action by running:

npm run serve

And, visiting http://0.0.0.0:8301/

Hacking

When developing this project you can run the following command to listen to changes in the src/js/*js and src/sass/*scss folders and build them into the /build folder.

npm run watch

Before submitting your pull request, run the linters, which checks both the JS and Sass for errors.

npm run test

Code licensed LGPLv3 by Canonical Ltd.

With ♥ from Canonical

cookie-policy's Issues

Cookie policy includes generic styles

When used in the jaas.ai project the styles included by cookie-policy.scss contain generic classes and are overriding the styles for p tags etc.

See: canonical/jaas.ai#250 and my fix here: https://github.com/canonical-web-and-design/jaas.ai/pull/260/files

Dialog not spanning full fixed width, leaving slivers of arbitrary content visible

Maybe there's a reason, if so please ignore this, but...

Wouldn't it be better to make the dialog cover the content underneath? As it stand it leaves a couple of characters visible on one side (in this particular example) and looks strange. Also the hr extends further to the right so the dialog feels off center (due to differences in padding on the sidenav and main content I assume).

Unnecessary grid CSS in built file

There is quite a lot of unnecessary grid related CSS in built file (like: [grid-demo] [class*="col-"]{background:#cdcdcd;margin-bottom:1rem} ...) leaking from Vanilla.

It was already fixed in Vanilla itself, so quite likely rebuilding with newer version should fix that.

Updated Europe guidelines on user consent; it needs to be explicit, manual

The consent banner currently auto-hides after some time. This behavior needs to be changed according to new guidelines:

https://edpb.europa.eu/sites/edpb/files/files/file1/edpb_guidelines_202005_consent_en.pdf

Set SameSite when setting cookie

Cookie “_cookies_accepted” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Add affordance for old cookies

In version 2.x we set the cookie to the value of "true" when accepting the cookie policy. With the new regulations, we need to force users to re-review the new options. Therefore simply checking the existence of the cookie does not suffice.

Cookies with the value of "true" should also invoke the cookie policy notification.

Update Vanilla Framework to 1.8.0

There were significant changes to patterns used in the cookie policy in V1.8.0 of Vanilla Framework. The dependency should be updated to reduce problems when using the plugin on sites with newer versions of VF.

Styling issues when Vanilla versions are misaligned

cookie-policy includes it's own version of Vanilla and builds its own separate stylesheet with it.
When used in a project that also has Vanilla this means there are 2 Vanilla stylesheets on one website. This can cause issues when these versions don't match.

This happened recently with (fairly unnoticable) issue with modal spacing:

Caused by the fact that cookie-policy is using older version of Vanilla than the websites.
The issue above will be fixed by merging renovate PR #127, but renovate only updates cookie-policy once a month, so this leaves quite a large window of possibly broken experience.

Ideally cookie-policy should not include its own version of Vanilla and rely on version in the project.

We could also update renovate config here to make sure Vanilla is updated immediately when released.

Change first page of cookie policy/manage tracker settings to be non-dismisable modal.

Can we change the initial page 'Your tracker settings' to open like the second page does, as a non-dismisable, screen centred modal with the background greyed out.

Hopefully this will get more users to acknowledge the policy.

Do not load all the base styles from Vanilla

This module loads the entire base styles from vanilla (vf-base) which includes the embed of a number of fonts. This is bloating sites and should not include fonts but us the parent sites font.

Save settings button covered by address bar in Firefox Android

It's not possible to set cookie tracking preferences on iPhone

Summary

The cookie UI isn't very usable on iOS Safari

Current and expected result

When the user scrolls down and attempts to tap the 'save preferences' button, the app thinks the user is trying to use the bottom bar of Safari and blocks the tap.

Screenshot

Browser details

iOS (latest stable) Safari (latest stable).

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update all dependencies (@babel/core, @babel/preset-env, circleci/node, eslint, rollup, sass, stylelint, stylelint-config-standard, stylelint-order, vanilla-framework)

---

• Check this box to trigger a request for Renovate to run again on this repository

Cookie banner causing JS error in Safari v9

Summary

• Fire up Safari on El Capitan (or Browserstack) and open site on Safari v9
• Reduce screen resolution to small screen
• Refresh screen
• Cookie banner function is breaking global nav
• See (3rd error in console):

Scrolling on the background is not blocked properly

The background scroll lock is not always working and I believe the following steps should fix it:

1. The scroll-lock class should set the height and width of the body to the height and width of the viewport
2. The default dialog style should be overwritten. Currently it is not and it appends a square to the end of the page
   

Modal not focused by default

When you visit a site that has the cookie policy modal displayed you should be able to tab to the buttons and action them with your keyboard. Currently you have to tab through the whole document behind the modal before the focus eventually gets to the modal buttons.

Provide a decline all non essential option from the first screen

It was pointed out that it would be better for people that want to decline cookies. If they could set that from the notice instead of coding manage and scrolling all the way down.

Add auto disappear functionality

Add the ability to set a number of seconds before the notification self destructs.

Build the manage cookie panel

Expiry cookie after a year

Change the expiration of the cookie from a day to a year.

Cookies are scoped to the path in which they are set

We should update the path when setting a cookie to root so the cookie is scoped to the entire site.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

https://web.dev/measure/ is complaining aria-hidden="true"

We do this https://github.com/canonical-web-and-design/cookie-policy/search?q=aria-hidden
and https://web.dev/measure/ is complaining about it.

Create jenkins job to auto publish on npm

Now it is published manually: https://www.npmjs.com/package/cookie-policy

Text doesn't flow to fill container on largest breakpoint

The text should either flow to the full width or the container shouldn't be as wide.

Disable cookie policy on legal page /legal/data-pricacy

We might want to remove any form of analytics on the data-privacy page since the cookie policy links to this page if I didn't accept yet the tracking.

Styles should also be added via JS

This would mean users can just install the package, call it and be done.

Update revoke example

Either remove the href from the button or turn it into a a in the README.

Add refuse button to the set of actions

At the moment we have accept and manage we should add a quick button to reject cookies.

[COPY UPDATE] Chinese translation

Please update Cookie policy - cn from the copy doc

Could we create a Chinese language version of the policy (also Japanese)?

Use vanilla-framework for the pattern styling

We should tie the notification pattern to Vanilla framework instead of copying the pattern in. This will help maintain the styling in the future.

It should use GH Actions instead of CircleCI

cookie-policy project seems to still be using CircleCI for building and checking PRs.
Most of our projects were migrated to GH Actions already.

Provide an example flask project

It'd be nice to create an example flask project, similar to the ones we usually have, to test that this package works.

This way, we could also include github actions to test dependency updates

Make the cookie policy a web component

The current cookie policy would be improved by making it a web component, removing problems of local styles on the site effecting the display of the cookie policy.

This would also mitigate the problem of mismatched Vanilla Framework versions - for example in #14

Please convert this project to a Web component project. Using Shadow Dom to encapsulate the markup and scoped styles and is. Create a custom element taking some customising attr.

Update the usage documentation.

Bump a major version.