[v10] Add support for functions in component configs

[colinrotherham]

Description

This PR adds a new function config schema type (alongside string, boolean, object and array types)

Support for array types was added recently in:

• [v10] Add support for array values in component configs #1747

JavaScript configuration

Config function values via initAll() and createAll(), for example to configure the character count function:

import { CharacterCount, createAll } from 'nhsuk-frontend'

createAll(CharacterCount, {
  countFunction: (string) => string.length
})

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[MatMoore]

The changes themselves look fine, but I am just wondering if there are any security considerations here, so just wanted to flag that.

It seems like the function type is effectively a way to embed a form of inline script, and if you are otherwise blocking inline scripts via a CSP, is this circumventing that protection?

[MatMoore]

maybe move this to the top so you can use it in the precondition, as it appears in that expression twice.

[colinrotherham]

Thanks @MatMoore, done in 3617004

[colinrotherham]

It seems like the function type is effectively a way to embed a form of inline script, and if you are otherwise blocking inline scripts via a CSP, is this circumventing that protection?

Thankfully, if this was configured via inline <script>, it would still be blocked by unsafe-inline

You'll also see that when it comes to HTML:

1. String data-* attributes do not allow arrays, functions or objects
2. Function data-* attributes are automatically dropped

Config functions are only allowed to be set via initAll(), createAll() or new Component()

Although with JavaScript being JavaScript, you can always continue to overwrite things at will anyway:

CharacterCount.prototype.updateCount = () => {
  // Overwrite count function
}

class CharacterCountDanger extends CharacterCount {
 updateCount() {
   // Extend count function
 }
}

i.e. Adding a config option hasn't introduced any new ways to override functions

[MatMoore]

Ah, that makes sense. I was thinking they would be configurable by data attributes.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud